Skip navigation
Currently Being Moderated

With a fluid grid layout, how can I make a background extend all the way across the screen?

May 31, 2012 12:18 PM

Tags: #background #image #content #div #dreamweaver #css #menu #layout #html5 #cs6 #extend #fluid_grid

I currently have a website (http://thetreehousedetectives.com/) which I was wanting to make into a fluid grid layout.

The background for the menu and footer extends all the way across the screen, but the content doesn't.

I'm using the Dreamweaver CS6 template for the fluid grid.

 

Does anyone know how I could achieve the same effect?

 
Replies
  • Currently Being Moderated
    May 31, 2012 3:28 PM   in reply to jacob.21

    Apply multiple background images to the body selector with positioning and repeat-x.

     

    body {

    background: url(bottom.jpg) bottom left repeat-x,

    url(top.jpg) top left repeat-x,

    #FFF;

    }

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 1, 2012 8:49 AM   in reply to jacob.21

    Can you show us what you have so far?

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 1, 2012 1:52 PM   in reply to jacob.21

    Try using background gradients.  My example is a little crude so you'll need to play with it. 

    http://www.colorzilla.com/gradient-editor/

     

    CSS:

     

    html {background: #208FE5}

     

    body {

    background: #FFFFFF; /* Old browsers */

    background: -moz-linear-gradient(top, #000000 0%, #ffffff 28%, #ffffff 71%, #208fe5 100%); /* FF3.6+ */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(28%,#ffffff), color-stop(71%,#ffffff), color-stop(100%,#208fe5)); /* Chrome,Safari4+ */

    background: -webkit-linear-gradient(top, #000000 0%,#ffffff 28%,#ffffff 71%,#208fe5 100%); /* Chrome10+,Safari5.1+ */

    background: -o-linear-gradient(top, #000000 0%,#ffffff 28%,#ffffff 71%,#208fe5 100%); /* Opera 11.10+ */

    background: -ms-linear-gradient(top, #000000 0%,#ffffff 28%,#ffffff 71%,#208fe5 100%); /* IE10+ */

    background: linear-gradient(top, #000000 0%,#ffffff 28%,#ffffff 71%,#208fe5 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#208fe5',GradientType=0 ); /* IE6-9 */

    }

     

    NOTE:  It won't look the same in pre-IE10 so you might want to feed those miserable browsers a background image instead of using IE filters.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 25, 2014 1:46 PM   in reply to jacob.21

    I struggled with this as well.  On the container div tag I added padding then an equal amount of negative margin.  Here is the code:

     

    #coming_soon_1 {

    width: 100%;

    background-color: #483D30;

    height: 450px;

    padding-left: 3000px;

    margin-left: -3000px;

    padding-right: 3000px;

    margin-rght: -3000px;

     

    }

     

    Also read: http://www.sitepoint.com/css-extend-full-width-bars/

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points