Adding Images: HTML and CSS

The first thing you have to do is place the photo, logo or icon you wish to “source” into your images folder. Remember, to save at 72 dpi and that only images go into the images folder!

1. Adding Your Image as Content:

Here is the basic HTML: <img src=”images/your_photo.jpg” alt=”discription”>

To have text wrap around the image, apply the float property and some padding. See example:

<p><img class=”photo” src=”images/angry_cat_meme.jpg” alt=”Angry Cat”> Your text goes here.</p>

Here is the CSS:

.photo {
float: left;
padding-right: 15px;
}

Note: The <img> tag is empty, which means that it has no closing tag.

2. Adding Your Image as a Div Background:

Here is the HTML: <div class=”div1″> Your text goes here.</div>

Here is the CSS for an image displayed only once:
.div1 {
background: url (images/angry_cat_meme.jpg) no-repeat;
}

Here is the CSS for an image repeated horizontally:
.div1 {
background: ur l(images/angry_cat_meme.jpg) repeat-x;
}

Here is the CSS for an image repeated vertically:
.div1 {
background: url (images/angry_cat_meme.jpg) repeat-y;
}

Here is the CSS for an image repeated vertically and horizontally:
.div1 {
background: url (images/angry_cat_meme.jpg) repeat;
}

Here is the CSS for an image displayed only once with a red background:
.div1 {
background: url (images/angry_cat_meme.jpg) #ff0000 no-repeat;
}

We can also position the image within a div using and will cover this later.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s