Monday, 18 October 2010

CSS: Making background image fit any screen resolution

   


Please see the revised solution for fixed backgrounds with scrolling pages:
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.

36 comments:

  1. In this fluid image how to give image map link? How to set the link position in any screen resolution?
    Help me My id hariharanguru83@gmail.com

    ReplyDelete
    Replies
    1. 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:

      http://www.prada.com/en?cc=en

      Any chance for me to get it done this way?
      eduard@nytrade.co

      Delete
  2. Hari,

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

    ReplyDelete
  3. Hari,

    I'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.

    ReplyDelete
  4. thank you very much! this has been a great help for me for my computer project :)

    ReplyDelete
  5. Thank to you, nikhil, for dropping a line!

    ReplyDelete
  6. Friend, I might not know you but what you've helped me do has REALLY helped me. Thanks countless times

    ReplyDelete
    Replies
    1. I'm really happy to hear that, Robert. Take care and keep on reading!

      Delete
  7. hey this seems to be an easy way out :) Thanx..

    But 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? :(

    ReplyDelete
    Replies
    1. 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.

      Delete
  8. thanks it did what it said it would do. but how do you center it?

    ReplyDelete
    Replies
    1. It should stay at the centre. Remember to place the ing inside a div with content centred.

      Delete
  9. This code does't work for me. I get the error message:

    Your 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 "".

    ReplyDelete
    Replies
    1. 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.

      Delete
  10. Is there any way to "fix" the image so it will scroll with the page and have it stretch?

    ReplyDelete
    Replies
    1. The solution I proposed in this post is for a page without scrolling. I'm sorry...

      Delete
  11. i 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.

    .background_image
    {
    background:url(2.jpg);
    position: absolute;
    width:100%;
    height:100%;
    }

    ReplyDelete
    Replies
    1. That is not what I suggest. Do not use background.

      Delete
  12. Hi,

    Thanks for the tutorial.

    There is a gap on the right on the page when viewing in IE8.

    ReplyDelete
  13. Thanks, it helped me a lot :)

    ReplyDelete
  14. you can use this code ...

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

    ReplyDelete
  15. If 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. :)

    ReplyDelete
    Replies
    1. If you look at the revised version mentioned at the top of the post, I'm saying the same.
      Cheers!

      Delete
  16. thank you dear.........

    ReplyDelete
  17. hi, is it possible this code can do at blogger.com? i have tried but its fail. can you help me?

    ReplyDelete
    Replies
    1. Yes you can.
      But I can't help you on the blogger code.

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

    ReplyDelete
  19. Thank you very very much! This has been a great help for me !

    ReplyDelete
  20. hey thank you very very very much,
    this is the best way to do it.
    again thanks.

    ReplyDelete
  21. 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.....

    ReplyDelete
  22. Thanks 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.

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

    ReplyDelete

Comments are moderated. I apologize if I don't publish comments immediately.

However, I do answer to all the comments.