Monday 28 May 2012

CSS: Making background image fit any screen resolution (revised)

   


After the great success of my previous post "CSS: Making background image fit any screen resolution" I would like to share a new version of the same.
The following is just a revised post, so basically it contains the same code, but with a twist.
The point is that many readers have asked me how they could have a scrolling page while the image stays stretched and fixed.
Well... I suppose you could get there and find how to do it by yourself, but I thought I could share it anyway, maybe for those of you that are not really experienced enough already (time to grow ladies and gentlemen - I'm joking... obviously...). We are going to use a few CSS lines and two HTML tags.

Ok, let's get into it!

The image
As I explained already in my previous post, just place your image just before the </body> tag:
<div align="center" ><img src="images/BG.jpg" border="0" class="bg" ></div>
The image has a class="bg". That's where most of the magic is.
Now, just before the above snippet, place a div: that will be our main container. Just to be clear, we are going to put all the rest of the page (articles, images and so on) inside that div. We are going to style it as well, afterwards.
<div class="maincontainer">Place your content here!</div>
Let's see how to style those two elements.

The CSS
What we basically need is:
1) place the image in the background;
2) place the main container on top.
Simple as that. There's a difference from the my previous post: the image is not absolutely positioned.
Let's see the code:
<style type="text/css">
.bg {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -5000;
    height: 100%;
}
.maincontainer {
    height: 1000px;
    z-index: 5000;
}
</style>
First of all, the main container has an height of 1000px. That is only for the example: you do not need it because the div will stretch according to its content.
The image (.bg class) has a fixed position and a -5000 z-index, while the main container has 5000 value for z-index. That is because we need the image to stay in the background.

That's all folks! Try the example with your testing server and see how it works... after that let me know what you think...

13 comments:

  1. Hey I'm having a little trouble with this. Can you spot my trouble. I have successfully got the background image resizing with the browser resize...but no cigar on the scrolling bars.

    ReplyDelete
    Replies
    1. Cameron, how would I spot it? :)
      Is your main container height bigger than your viewport? Are you sure you need scrollbars? Are you hiding them somewhere else in your CSS?

      Delete
  2. Marco,

    I have a quick question, how would you get an image to repeat-x instead of having it stretch in the x direction?

    Thanks in advanced!

    ReplyDelete
    Replies
    1. Try to use the repeat-x css rule. You need to use a background image though.
      I believe you need to play with it because it's really difficult for to help without knowing exactly your needs. Cheers!

      Delete
  3. hi
    ive got this working but how do i get the image to repeat? and "background-repeat: repeat-x;" doesn't work btw...
    Louise :-)

    ReplyDelete
    Replies
    1. Don't use repeat. It doesn't make sense for the purpose of this example. The image must occupy all the a ail able space. One image, just one.

      Delete
  4. my page content has now disappeared in dreamweaver. i think this is because everything is before the body tag.?

    ReplyDelete
    Replies
    1. Everything before the body tag is not in the body of your page. Please read the article carefully... :)

      Delete
  5. Thank you very much. Very elegant method to do this. I'm just learning and this helped a lot.

    ReplyDelete
  6. This is just what i needed! Very simple and precise.Keep posting more stuff!!

    ReplyDelete
  7. This was really helpful thanks! I'm new to html/css. However I'm running into the trouble that when I'm trying to insert a picture or text it goes above or below the background. Whereas I want it to go on top of the background, like what a background is.

    ReplyDelete

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

However, I do answer to all the comments.