Please see the revised solution for fixed backgrounds with scrolling pages:
CSS: Making background image fit any screen resolution (revised).
CSS: Making background image fit any screen resolution (revised).
Making a background image fit any screen resolution is something everybody needs at least once in a lifetime. It is easy to create such effect, using CSS, and the result is quite good.
First of all, select your background image. Well, it seems that choosing is not really a big issue, but let me tell you that you need to do it carefully.
First of all, your background image should be large enough to fit your largest target screen size, but should not be too heavy in weight. As you may understand, the image's weight in bytes might affect your site speed.
Secondly, remember that a too bright image might disturb the correct balance of the content. It should be meaningful to the overall theme and content of the site. However, it should not be too invasive, distractive or in any way prevent the navigation of the site itself.
Ok, now that you have choosen your background image, let's get to the code.
Place a div at the bottom of your page, just before the </body> tag:
<div align="center"><img src="images/BG.jpg" class="bg"></div>
As you may see, we have a class named "bg" in the image tag (the image is called BG.jpg). We are going to use a CSS style to stretch our image.
<style type="text/css">
.bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -5000;
}
</style>
With the above style, the image is always stretched to the screen size, it is placed at the very top and left position, it has an absolute positioning and it stays at the backround (z-index).Now if you resize your browser or the screen resolution, the image will adapt to the new size.
Piece of cake!
Please let me know what you think about it.
In this fluid image how to give image map link? How to set the link position in any screen resolution?
ReplyDeleteHelp me My id hariharanguru83@gmail.com
I know this old way. but: the image will be distorted. Not good for faces, eh? (I dislike eggheads). I want to see my backgrounds like the guys of prada do it:
Deletehttp://www.prada.com/en?cc=en
Any chance for me to get it done this way?
eduard@nytrade.co
Hari,
ReplyDeleteI never thought about it. I do not know if it is possible at all. Just give me a few days - as I cannot think about it during the weekend - and I will get back to you.
Hari,
ReplyDeleteI've tried using image map with a fluid background image, and it does not work. A solution I thought was to use percentage for coords, however it does not work either.
It seems that with jQuery/JavaScript you can create a function that calculates the right coords according to the screen resolution. Anyway, I think that a quicker solution would be to place transparent images (with area shapes or simply a link) in an absolute way (using percentage). That will place the links exactly where you want.
As an example:
<div style="position: absolute; top: 50%; left:50%;"><font
color="#000000"><a href="#1">Link</a></font></div>
That link will always stay roughly at the center of your page.
Hope this will help.
thank you very much! this has been a great help for me for my computer project :)
ReplyDeleteThank to you, nikhil, for dropping a line!
ReplyDeleteFriend, I might not know you but what you've helped me do has REALLY helped me. Thanks countless times
ReplyDeleteI'm really happy to hear that, Robert. Take care and keep on reading!
Deletehey this seems to be an easy way out :) Thanx..
ReplyDeleteBut my image "repeats" and doesn't stretch.
Also the page height becomes the screen height and the lower half of the page doesn't get displayed(no scroll). Do you know how to fix it? :(
Sneha, please follow the instruction carefully. The trick as it is explained is not working if you have overflows: your content should stay in the viewport.
Deletethanks it did what it said it would do. but how do you center it?
ReplyDeleteIt should stay at the centre. Remember to place the ing inside a div with content centred.
DeleteThis code does't work for me. I get the error message:
ReplyDeleteYour template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "img" must be terminated by the matching end-tag "".
It seems you are trying to apply it to Blogger template. I've never tried it for Blogger, so I cannot guarantee it works. However be sure to use the code properly.
DeleteIs there any way to "fix" the image so it will scroll with the page and have it stretch?
ReplyDeleteThe solution I proposed in this post is for a page without scrolling. I'm sorry...
Deletei tried the same example given by you but it didnt worm to me....my picture size is 50kb...i didnt get the complete picture to fit the window.this is my code.
ReplyDelete.background_image
{
background:url(2.jpg);
position: absolute;
width:100%;
height:100%;
}
That is not what I suggest. Do not use background.
DeleteHi,
ReplyDeleteThanks for the tutorial.
There is a gap on the right on the page when viewing in IE8.
Great staff!
ReplyDeleteThanks, it helped me a lot :)
ReplyDeleteyou can use this code ...
ReplyDeletefirst write this in head
script src="location to jquery /jquery.js"
then add this in a script tag
$("document").ready(function(){
var w = screen.width;
var h = screen.height;
var s = w+"px "+h+"px";
$("body").css("background-size",s);
});
this worked for me ..
Thanks for your idea...
DeleteIf you want the content to scroll and the background stays, change the position from absolute to fixed. By doing this, the background won't scroll together when you scroll down your page. :)
ReplyDeleteIf you look at the revised version mentioned at the top of the post, I'm saying the same.
DeleteCheers!
thank you dear.........
ReplyDeleteKeep on reading...
Deletehi, is it possible this code can do at blogger.com? i have tried but its fail. can you help me?
ReplyDeleteYes you can.
DeleteBut I can't help you on the blogger code.
Um. Can I please just say that I freaking love you for posting this? I have been trying to figure out how to do this FOREVER. I've tried so many other solutions and they just did not work, but this worked like a charm, and was much, much simpler. Thank you so much!!
ReplyDeleteThank to you!!!
DeleteThank you very very much! This has been a great help for me !
ReplyDeletehey thank you very very very much,
ReplyDeletethis is the best way to do it.
again thanks.
I make a webpage on my pc whose screen resolution is 1366 x 768 ..when i uploaded that page on server and open that page on other pc whose resolution is 1280 x 768..then it does not showing the most of the content of webpage which is in right most side....i have to scroll to right to see the content .......plzz help.....
ReplyDeleteThanks you for your excellent post! But I still have one question, though this works for me in html, when I convert html to pdf by wkhtmltopdf, it couldn't have the same background as html.
ReplyDeleteEven I tried background-image and background-repeat, the size of image is always too small or too big in pdf pages. I think it might because of the screen DPI but i'm not sure. Any ideas? Thanks!
This is not made to work with a PDF. Sorry.
Delete