Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Need help creating a full width background for footer & header.

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #37472
    BryGuy
    Member

    I using http://www.notjustagird.com to create a 1500px wide website.

    The html for the grid is pretty straight forward:



    Masthead

    Left Column

    Content Area

    Right Column

    Footer


    Is there a way to create a full width (page) background for the header “Masthead” & the footer via CSS ?

    If I need to provide more info let me know.

    #100548
    TheDoc
    Member

    You’ll need to wrap each of them in a separate wrapper (eg, ‘header-wrap’, ‘footer-wrap’) and apply a width of 100% to each of them, you’ll apply your background to that.

    #100552
    BryGuy
    Member

    I created the following CSS:


    .header-wrap {
    background-size: cover;
    background: orange;
    }

    I then tried the following html (with a closing div tag):



    I tried wrapping both the footer & the “Masthead” individually and it didn’t work. I also tried wrapping the whole “Container” and it didn’t work either.

    The “Container” CSS is as follows:


    #container {width:1500px;position:relative; margin:auto;}

    I’m not sure what I’m doing wrong.

    #100564
    xrmer
    Participant

    HTML Code



    Masthead

    Left Column

    Content Area

    Right Column

    Footer




    CSS code



    body { width: 1520px; width: auto; background: #e2e2e2; text-align: center;}

    .container, .full {width: 1500px; margin: auto;}

    .quarter { width:375px; float:left;}

    .half {width: 750px; float:left; }


    CMIIW

    #101828
    BryGuy
    Member

    In the end I had to make a ton of changes…. too many to list, but it now works. Thanks for the help guys.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.