0

I want to create a basic layout for webpage with divs and want to set images for their background. Since I have smaller images I want to stretch them to fill in the divs.

There are many ways to do that. But I tried following:

</html>
<head>
    <style>
       img#bg {  
         top:0;
         left:0; 
         width:100%;
         height:100%;
       } 
   <style>
<head>
<body>
  <img src="body.jpg" alt="background image" id="bg" />
  <div id="content"> </div>
<body>
</html>

This worked. Then I tried to make use of it in layout.

    <div id="hmenu" style="zindex=1;height:80px;background-color:#007980"></div>        
    <div id="content"  >
        <img src="body.jpg" alt="background image" id="bg" />
    </div>

This also worked. But when I tried to set image this way for a div with float:left or CSS width set, it did not worked:

  <div id="header" style="zindex=1;height:300px;width:100%"></div>
    <div id="hmenu" style="zindex=1;height:80px;background-color:#007980"></div>        
    <div id="content" style="float:right" >
        <img src="body.jpg" alt="background image" id="bg" />
    </div>

This doesnt work. In last HTML notice float:right. I will like to stick to this method, not any jQuery method or others and also will like to know what is wrong here and what should be done to get the desired result with CSS modifications as I am learning this.

Mahesha999
  • 22,693
  • 29
  • 116
  • 189

3 Answers3

2

Seems like you want a background image

A good explanation can be found here

Basically you can make a div have a background using CSS and not having to put an tag inside, this is almost always preferable.

Example code for you could be:

body {
   background-image: url('body.jpg');
   background-size: cover;
}
Andy
  • 14,427
  • 3
  • 52
  • 76
  • I disagree with the premise that a background image is almost always better. If the images are part of the content then they should be treated as content, and therefore be present in the document without CSS. – michaelward82 Dec 18 '12 at 11:21
  • @michaelward82 Backgrounds are generally not part of content, hence "almost always", but not "always" – Andy Dec 18 '12 at 11:22
  • 1
    I withdraw my previous comment - I failed to notice that it was a background image that is wanted. Apologies. – michaelward82 Dec 18 '12 at 11:24
  • Yeah I tried background-image, but was not able to scale image full size. is that `background-size:cover` introduced in CSS3? Now it is causing repeat in x and y axis, in IE8. I am trying to apply it to `
    ` (see main question).
     – Mahesha999 Dec 18 '12 at 11:35
  • @Mahesha999 Ah, background-size is only supported in IE9+, you should look at my second link (http://css-tricks.com/perfect-full-page-background-image/) at "CSS only technique #1" for a good alternative – Andy Dec 18 '12 at 11:39
0

In order for height: 100%, Top:0 etc to work you need to have a position applied to the element.

You don't as per the example code given. Give more code and i can help more. But from what you have given this is your problem.

Jamie Hutber
  • 26,790
  • 46
  • 179
  • 291
0
background-size: cover;

Is a nice solution, but I'm not sure about the browser support, because it's CSS3.

I made a fiddle, is this what you were looking for? http://jsfiddle.net/NQY6B/5/

By the way, change "zindex" to "z-index".

EDIT: I've updated the fiddle with text content in the div

Nerbiz
  • 134
  • 1
  • 3
  • yeah its not working in IE8 causing background repeat not scaling, I want it to work in IE8 – Mahesha999 Dec 18 '12 at 11:38
  • The latest version works here in IE8 mode in IE9 (also in IE7 mode). Background-repeat is not possible by the way, because it's a stretched , I didn't specify a background – Nerbiz Dec 18 '12 at 11:55