Grow your CSS skills. Land your dream job.

[Solved] Extend Background to fill entire div

  • # May 25, 2010 at 11:07 am

    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

    # May 25, 2010 at 12:29 pm
    Code:
    #page { /* main container */
    width:940px;
    margin:0 auto;
    font-size:1em;

    background: url(‘http://www.mmtest1.byethost22.com/brown-gradient.jpg’);
    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’) no-repeat #a07950;
    padding: 10px 20px 40px 20px;
    border-top:4px solid #864E04;
    border-bottom:4px solid #864E04;
    }
    # May 25, 2010 at 1:54 pm

    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

    # May 25, 2010 at 3:11 pm

    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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".