[Solved] Extend Background to fill entire div

[maaximummedia]

Hey guys,

First , if you have firebug or web developer you will be able to see the various CSS divided regions better.

Anyways I have a <div> called Page or #page in CSS. I am simply trying to fill a background image in it, however the problem is that when I do, because firefox scales down the image, the complete image fills until mid of the page. Really need help on how to do this.

Here is how it looks on my test site.

You can go to http://mmtest1.byethost22.com

Thanks

Omar

[TheDoc]

Code:

#page { /* main container */
width:940px;
margin:0 auto;
font-size:1em;

background: url(‘http://www.mmtest1.byethost22.com/brown-gradient.jpg&#8217;);
background-size:100%;
background-repeat: no-repeat;
padding: 10px 20px 40px 20px;
border-top:4px solid #864E04;
border-bottom:4px solid #864E04;
}

Change to:

Code:

#page { /* main container */
width:940px;
margin:0 auto;
font-size:1em;
background: url(‘http://www.mmtest1.byethost22.com/brown-gradient.jpg&#8217;) no-repeat #a07950;
padding: 10px 20px 40px 20px;
border-top:4px solid #864E04;
border-bottom:4px solid #864E04;
}

[maaximummedia]

You rock man. It works. So I noticed you inputted two things

1) no repeat

2) you put a color of #a07950;

Which one corrected it? And is the color hexacode of a07950: necessary?

Just want to understand what fixed it and why this code was important.

Thanks a million. The site looks gorgeous now!

Omar

[virtual]

You already had the no-repeat in your code you just weren’t using shorthand for the background element which the Doc did. The colour #a07950 puts a background colour on your div the same colour as the bottom of your gradient. If you delete it you will see what happens.

[Author]

Posts