Scaling body background images with pure CSS

// 15012009 / Allgemein, CSS / 23 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!

Read other interesting articles:

Be Sociable, Share!

23 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. Katrina Katrina Dezember 12th, 2009 at 19:25

    @Cory

    Can you please explain in detail for a newbie just how you got this to work in WordPress. I’ve been trying to figure this thing out for WEEKS!!

    If it helps any, I am using the Sliding Door theme.

    Thanks,
    ~Katrina

  7. 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!

  8. 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

  9. 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?

  10. JD JD Juli 29th, 2010 at 12:01

    thanks for the solution :)

    and Dude there is the solution for ur problem and in pure css :D

    just give height: 100%; overflow: hidden; to the body syntext will be

    body{margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden}

    it will solve ur problem ;)

    cheers!!!

  11. TK TK August 8th, 2010 at 08:28

    @dude:
    i`m havin`the same problem. Currently i`m working on a site:
    http://fiftynine-design.de/z/projects/soma
    and i wanted to fade the BG-image of the body, but that doesn`t work. So i saw your code here, i didn`t know that you could use a neg. z-index. Nice, so i set a Div with the image, not a , but a with the image applied to it, within an external styleheet.
    It´s a bit different but a got the same Problem as you “Dude” – if you got a scollbar, you get some white-space at the bottom of the site.
    If someone has got any solution, i would be graceful if you would post it here.

  12. TK TK August 8th, 2010 at 08:47

    i just solved it – i just gave the Div a fixed width and height, and “killed” the scrollbar to the x axis. Now if you scroll down, the image stays where it should be and isn`t cutted.
    I know you using the HTML scale functionality, and i`m doing some different things, but perhaps you got some new ideas now, Dude.

  13. MS MS August 18th, 2010 at 13:10

    here you go:

    Image Full Screen

    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    }

    img#bg {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    }

    #content {
    position:relative;
    z-index:1;
    }

    Place all your content here – headers, paragraphs, etc etc.

  14. jamie jamie September 12th, 2010 at 22:17

    this seems perfect for what I need. I have found a lot of slide shows but this is nice and simple. Do you think this could be adapted so that a new image was displayed on each REFRESH of the browser? Or perhaps a new image displayed for each DAY of the week? I used to have some old javascript that would do that… I wonder if it can be combined with this? If anyone has tips in that direction I would appreciate it..

    anyway, thanks again for this idea!

  15. Nicole Nicole September 13th, 2010 at 05:27

    @jamie just integrate the css dynamically by the help of a “document.write” within your javascript code choosing one of your images via an array. either randomly or with date-function or…

  16. falkon falkon September 29th, 2010 at 18:26

    Hi Nicole,

    One question.. I am new with DW CS4 and usually I work with Graphics but recently I started with the web design and some of the sites would like to have an image as the background, so being new at this thing, So the code you have written in start of this page will be in the CSS page right? or is it for the html part of the site, and where exactly would I be implementing this code at ? ( if you give an example I would really appreciate it) I would appreciate your input and help.

    Thanks in advance,

    Falkon

  17. Ernie Ernie Oktober 2nd, 2010 at 12:13

    Has anyone done a whole site with this?

    Would like to know how to add Navigation and content all around?

    Any help would be great!

    Ernie-

  18. Michael Michael November 9th, 2010 at 09:49

    Please help me, it’s not working.

    Where do I need to put this code?

    Thanks, friends

  19. anjani anjani Mai 25th, 2011 at 21:40

    Yes, this works! With the minimal amount of coding. Thank You!
    Just one question >
    My image does not scale in the correct aspect ratio when the browser is resized. Do you have additional info regarding how to correct this?
    Cheers and thanks!

  20. 天津网站设计,天津网站制作 天津网站设计,天津网站制作 Juni 2nd, 2011 at 08:59

    It is a solution, but not the best. Just i think. .
    Because it will make picture distortion

  21. Tammy Tammy August 11th, 2011 at 01:54

    I’ve searched everywhere for this! Just one problem, I obviously don’t understand computers as well as I thought, and I have absolutely no idea where to put this code!! In the HTML tab or is it where you create a custom css? And then where do you add the link for the background image? Please help! I have a blog and want my own background but it’s either too large or too small no matter what I try! Thanks so much!!

  22. HD HD September 26th, 2011 at 01:22

    Wow thanks! =D

  23. Someone creating a template Someone creating a template Oktober 19th, 2011 at 12:42

    Would it be possible to do this trick for div tags with a background-image? It seems that when I use width and height 100% this wouldn’t work and I think it’s because the background-image needs to have a fixed amount of pixels and do not work for percentages. I am not allowed to create img tags for a specific reason, thats why I’m asking…


Kommentieren




  • www.goneo.de