Scaling body background images with pure CSS
Dealing with large background images? Well, perhaps I have a nice solution for you:
DEMO: Just look, see and wonder
Low broser resolution
High broser resolution
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!
23 Kommentare zu "Scaling body background images with pure CSS"
Sorry, but it just isn’t working on my browser. Firefox. Mac G4 power book.
Victoria
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
Thanks for the great solution – solved the biggest problem I’ve hit so far!
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.
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.
@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
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!
Been scratch my head for month trying to figure our how to do this. Thank you! it works great
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?
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!!!
@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.
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.
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.
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!
@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…
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
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-
Please help me, it’s not working.
Where do I need to put this code?
Thanks, friends
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!
It is a solution, but not the best. Just i think. .
Because it will make picture distortion
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!!
Wow thanks! =D
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