Posted By

Masis on 09/13/10


image background

Versions (?)

Who likes this?

1 person have marked this snippet as a favorite


СSS: background-image

 / Published in: CSS


It determines background image for the element. If the background color is specified for the element at the same time it will be shown while the background image will have been downloaded fully. The same will happen if the image is inaccessible or their demonstration in the browser is switched off. When there are transparent areas in the image you can see the background color through them.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  5. <title>background-image</title>
  6. <style type="text/css">
  7. BODY {
  8. background-image: url(images/bg.jpg); /* Path to the background image */
  9. background-color: #c7b29a; /* Background color */
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <p>...</p>
  15. </body>
  16. </html>

Report this snippet  


RSS Icon Subscribe to comments
Posted By: bsalem on October 2, 2010

Can this be done with SVG imagery? I have tried it and found that the default repeat does not work as claimed at in Chrome 6. It may not know the image dimensions, remember SVG is XML, and so it only repeated in the Y direction. I know that the image generated 318X318 px, and so two copies of it would have fit across the page. I also noticed that the next copy in the Y direction was always after the body text, any ideas? What it did seems all wrong to me.

You need to login to post a comment.