Scaling body background images with pure CSS

// 15012009 / Allgemein, CSS / 8 Kommentare

Dealing with large background images? Well, perhaps I have a nice solution for you:

DEMO: Just look, see and wonder

Low broser resolution

Scaling background image effect - small

High broser resolution

Scaling background image effect - large

The trick

The trick is quite simple: It’s just an absolute positioned image with css properties “width: 100%; height:  100%” and “z-index:-1″  directly inserted after the body tag. Nothing more. The only thing you have to pay attention on is to insert the image directly after the body tag if you want to have a scaling body image.

…
<style type="text/css">
#background
{
width:100%; height:100%; position: absolute; z-index: -1; top: 0; left:0;
}
</style>
</head>
<body>
<img id="background" src="background.jpg"/>

…

I wanted to use this css trick on my new website for younicmedia (we’re currently working on it) but I got new ideas. Have fun with it!

  • del.icio.us
  • Google Bookmarks
  • email
  • MisterWong.DE
  • Print
  • Technorati
  • Webnews.de
  • Yigg

8 Kommentare zu "Scaling body background images with pure CSS"

  1. victoria victoria Januar 31st, 2009 at 14:55

    Sorry, but it just isn’t working on my browser. Firefox. Mac G4 power book.
    Victoria

  2. Gl3nnym Gl3nnym Februar 22nd, 2009 at 12:48

    Hello there

    Sorry, I do not speak what I presume is German so hopefully you will understand this. Just wanted to say thanks for your CSS trick “Scaling body background images with css”. I found many solutions but yours worked the best for me.

    Keep up the good work.
    Gl3nnym

  3. Joseph Joseph Juni 29th, 2009 at 10:53

    Thanks for the great solution – solved the biggest problem I’ve hit so far!

  4. cory cory September 19th, 2009 at 20:36

    DUDE! I cannot believe it! You have NO idea how long I have been looking to find something like this! I am using wordpress and building a website for a client. all the million tuts i’ve seen are trying to explain jquery and java and flash, and css layering, and then I found your site with google, put the code after the body tag in my header and it works like a charm. SO easy. You my friend, are a life saver. thank you.

  5. JayJay JayJay September 22nd, 2009 at 22:28

    I just want to say thank you so much. I’ve searched the web for days on end trying to find code that works for what I wanted to do and this is the only one that does it. I really appreciate it.

  6. Jory Jory Februar 5th, 2010 at 07:55

    I know this is a bit old, but i came across a problem.
    For some reason when you do this as an external style sheet it doesn’t work, (all the content of the page is put below the image) but as an Internal style sheet it works like a charm. Any thoughts as to why it wouldn’t work if applied externally?

    Thanks for the tip, elegant and simple!

  7. Steve Be Steve Be April 6th, 2010 at 01:36

    Been scratch my head for month trying to figure our how to do this. Thank you! it works great

  8. Dude Dude Mai 13th, 2010 at 18:19

    You are a genius! The only drawback that I have with your solution is when you are viewing the site in a reduced view and attempt to scroll down, the image does not remain fixed but scrolls with the page showing a bunch of white space below. Is there a workaround for this?


Kommentieren