SEARCH
Newsletter
Subscribe to get design tips, latest trends, free stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials HTML and CSS Tutorials Inserting images with CSS

Inserting images with CSS

killer Tutorials Sep 10, 2004

This article assumes that you know at least basic HTML; you know what a tag is and how to use simple tags like the <img> or the <p> tag. If this is confusing you, you need to read my tutorial for total beginners on web design -it's really easy and people seem to like it, so give it go!

Inserting images with CSS
CSS Image Placement.

Download the source files for this article.

Ok, I assume that everyone knows what images are, as we all have seen images on web pages. Images are not technically inserted into a web page (to be nerd precise), rather images are linked to web pages and typically we use the image tag (<img>) to create holding space (or a reference to the image) for the image.

When someone loads a web page (by going to the URL), it is the browser, at that moment, that actually gets the image from the web server and inserts it into the page for you to see - makes sense?

This is different from using a program like MS Word for example, where with Word, when you insert an image into a Word document, the image actually becomes 'part' of the actual document. When you save a Word file, all you need to keep track of is that one Word file, and you know the images you inserted will be there when you open it again no matter where you move the file.

Where as with an HTML page, since you are only referencing the images with the image tag, you have to make sure that the images you are linking to always stay in the same spot in relation to the web page. When people mess up that path between the HTML page and the images it is referencing, you get that broken link icon that everyone loves to see. You are seeing that broken link icon because the browser can't find the image you are referencing in the <img> tag.

Ok, if you didn't know much about the mechanics of images loading in web pages, now you know too much! Lets move to something practical.

Using CSS to insert images into your web pages

This next part is really easy to understand, easy to use and can be very powerful - triple bonus! With CSS, all block-level and inline elements (tags) can have background images inserted into them. Two commonly used block-level tags are <p> and <div>.

Even though you can insert images into any type of tag (block-level or inline), I think it is better form in most situations to use block-level tags for this sort of thing. But in reality it doesn't matter if you use block-level tags, or inline tags because you can turn any tag into a block-level tag and vice versa; with this simple CSS code I change any tag to block-level:

display: block;

Or the reverse:

display: inline;

So what? Remember my newsletter where I talked about inserting backgrounds with CSS? In the same way you can insert images in the backgrounds of your web pages, you can do it with any other element. This combined with some extra padding and you have your headline image where you want it.

Take a look at this code where I use this technique:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>CSS image placement</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css" media="screen">

#headline1 {

background-attachment: fixed;

background-image: url(images/newsletter_headline1.gif);

background-repeat: no-repeat;

background-position: left top;

padding-top:68px;

margin-bottom:50px;

}

#headline2 {

background-attachment: fixed;

background-image: url(images/newsletter_headline2.gif);

background-repeat: no-repeat;

background-position: left top;

padding-top:68px;

}

</style>

</head>

<body>

<div id="headline1">

Some text â?¦

</div>

<div id="headline2">

Some more text ..

</div>

</body>

</html>

To keep this example easy to follow, I inserted the CSS code into the web page itself. Typically I would place my CSS code in a separate CSS file and link to it so that I could reuse the CSS code on many pages.

In the above CSS code you will notice that I insert a background image for each ID (headline1 and headline2) and I increase the padding at the top (padding-top:68px) to push down the text to make space for the background images.

This may seem unclear now, so just take a look at the page and then pop open the source code and check it out for yourself. Feel free to take a copy and play with the padding number and see how it changes things. Why did I add 68px to the padding? The image is 68px tall, but I could put any number I like to get the placement I want. Padding does not affect the background image; it only affects the contents inside the tag/element. In this case I used <div> tags.

ABOUT THE AUTHOR

Stefan Mischook

Stefan Mischook has been developing web sites and web applications since 1994. Along with contract work, Stefan now runs the popular web sites www.killersites.com, www.how-to-build-websites.com and www.secretsites.com writing concise to the point articles with the aim of teaching people 'real-world' web design skills.

subscribe to newsletter