inserting images with css

Inserting images with CSS

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!

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. 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-image: url(images/newsletter_headline1.gif);
      background-repeat: no-repeat;
      background-position: left top;
      padding-top:68px;
      margin-bottom:50px;
   }
   #headline2 {
      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.

25 Responses to “CSS & Images”

  1. admin says:

    Hi,

    I am opening this page up to comments for the first time ever!! So please, don’t spam poor little old me!

    Stef

  2. Fachwirt says:

    I was actually looking for a code NOT to display an image. I have an image showing up on one of my sites- I don’t know how it comes there- but its not removable. How do I adress that?
    background-image: url(images/newsletter_headline1.gif);
    display: none;

    Is that the code?
    THX, Fachwirt

  3. admin says:

    Just remove this code from your css:

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

    If you remove the code telling the web browser to put in that image, the image won’t appear.

    Stef

  4. Candice says:

    I am new to all of this and the no-repeat; function doesnt ork for some reason ive got a screen full of ponies!! please help

    thanks

    • admin says:

      It’s all in the code … just recheck and make sure you have your semicolons in place:

      background-repeat: no-repeat;

      Stef

  5. Brenda says:

    Thanks, great tip. My requirement is slightly different and I wonder if you can help.

    I need to add a logo to the top of a printed menu page. The page is generated through a wordpress plugin so I don’t have a lot of control over the HTML output insofar as adding the appropriate div tags, etc. I was able to use the first div tag and assign the background image but it fills the page behind the text.

    Then, if I really had my druthers I would like to add a footer to the page with the appropriate location and contact information.

    • admin says:

      Hi Brenda,

      You need to look at the particular wordpress theme you are using; there maybe support for adding a footer and customizing the content.

      Printing web pages: You can create a custom CSS page that controls how pages are printed. Basically, you define what elements get printed (div tags, p tags etc …) and even insert a logo (via css) using this css page. Here is an article that goes into detail:

      http://www.csstutorial.net/2013/10/making-web-pages-printable-using-css/

      Stef

  6. Brenda says:

    Hi Stef,

    Thanks for your quick response. I’ll keep digging.

    Have a good weekend,

    Brenda

    • admin says:

      Did my article on making web pages printable useful to you?

      … If not, let me know some more details and I might be able to help.

      Stef

  7. Brenda says:

    No, I don’t it goes quite far enough. I’ve got to leave it for a couple of days but I might bother you again if I’m stuck.

    What I do know is that the theme doesn’t support the print css so I looked to the plugin. I will put in a request through the support forum. Their site was down earlier but it seems to be back up again.

    Thanks

  8. admin says:

    Well, you could modify the theme by:

    1. adding a print css file
    2. linking to it in the theme.
    3. adding print specific classes or just using the print CSS file to target elements in the pages you want to change up for printing. For example: make the menu invisible.

    Well. get back to me if you have questions.

    Stef

  9. Eric Okeno says:

    I have a problem regarding joining both the vertical and horizontal links together please do assist me with an example.

  10. spyros says:

    hi! i’m kinda new to web designing

    in my case, i want to have a separate CSS file for all this, but i want to be able to choose my background-image (and only that) from my source code file..

    the reason is that, there will be a big number of divs like that, each one with a different pic (of the same size)… is there any way to add an attribute and by-pass the CSS code??

    thanks!

    is that possible??

    • admin says:

      Hi,

      You can bypass CSS by understanding the ‘cascade’ in CSS. So basically, CSS code that is on the HTML tags themselves will override CSS that is in the external CSS file.

      Does that make sense?

      Stef

  11. kaveri says:

    Hi,

    I have a problem in inserting image to jsp by css. I have to insert an image before the decorated text which is done using css class.

    I have tried to use .class:before and :after tags ..Its not working for me.. can u plss suggest me some solution..

    Thanks,
    Kaveri

    • admin says:

      You said you had problems inserting images “.. to jsp by CSS.”

      … Do you mean you are trying to insert images with CSS into a JSP page? If so, whether it is a JSP, PHP or HTML page, it’s all the same. The problem you are having is that the CSS method (.class:before) might not be supported by the web browsers you are working with.

      You might try or more straightforward / traditional method of CSS targeting.

      Stef

  12. Adam says:

    G’day,
    i have a basic understanding of adding images to the background, however, what about the foreground?
    What is the simplest way to ensure that the image links are always on top of existing background??

  13. Steen says:

    Hi,

    Thanks for nice tips and tricks!

    I have a tricky situation and would appreciate some expert advice:

    I am creating an HTML webpage for a site that contains a form with a lot of ‘s (nine in total).

    On the right side of the page should be an image reflecting the choices made by the user in the ‘s

    I have made this work top nice, changing the source value of the image using a complex, but well working javascript.

    In order to format the form page I have used tables (I know, should have been CSS, but that will have to wait for now!) and the image is placed in a that rowspans all the selects.

    Now, I would like to make the image scroll along when the user scrolls the page to select options, so the picture will allways be visible to the user.

    Searching have made me consider CSS background image, defining it for a that will be put in the above mentioned of the table, but I can not see how I can change the source value of the image, if I use this method, and it is imperative that I can change the image source based on the user’s choices.

    I would greatly appreciate any advice on this matter!!!

    Kind regards,
    Steen

    • admin says:

      Hi,

      First:

      “In order to format the form page I have used tables (I know, should have been CSS, but that will have to wait for now!)”

      There is nothing wrong with using tables to format forms. The only thing you should not be using tables to do is to frame your entire page. But forms, product list, price tables … html tables are great.

      For your other problem, have you tried using dom scripting to simply change the src value for your target image?

      Another option would be to use ajax to do it.

      Stef

  14. Ehab says:

    Really I don’t know what to say !
    U helped me too much , i never know before how to use CSS code Perfect , Now i got Like 30% and still following you to learn more about CSS . Keep it up Please Steph

  15. Mili says:

    hello,

    i have one main div,which has background image and two child div of that main div and two images of those div s.but when i am declaring background image of the main div in CSS,the image is not displaying on web page but if i declare the image in html(inline),it is working.
    don’t know the process how to set background image of the main div and images of child div s.

    I will really b grateful if my problem gets solved.

    Regards
    Mili

  16. admin says:

    Hi,

    The image is probably appearing when you add it inline because the inline CSS is overriding any other CSS – remember the cascade order in CSS.

    That said, that would suggest the reason it is not working when you try to add in image using your main CSS file, is because you have some other CSS that is overriding it.

    Makes sense?