Skip navigation
evetsrelfel
Currently Being Moderated

Background Images in Fluid Grid Layouts

Jan 23, 2013 10:18 AM

Tags: #background #size #images #layout #cs6 #grid #fluid

How can I get the background image that I assign to a fluid grid layout div to fill up 100% of the grid space and at the same time size the background to the fluid boundaries of the div  the same way as if I had placed an image into the div?  Currently, the background image lays in the grid at the pixal size of the background picture with only the portion of the background showing commenserate withthe size of the div contents.  I use CS6.

 

 

Thank you.

 
Replies
  • Currently Being Moderated
    Jan 23, 2013 10:44 AM   in reply to evetsrelfel

    Not sure I understand your question. 

    Are you looking for a scalable background-image for your body selector like this?

    http://alt-web.com/FluidGrid/Fluid.html

     

    CSS code:

    http://alt-web.com/FluidGrid/Content.css

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 23, 2013 11:38 AM   in reply to evetsrelfel

    For your purposes, it would be better to insert image into div foreground instead of background.  Do not apply height & width attributes to the img HTML because your FGL.css  contains this rule.

     

    img, object, embed, video {

    max-width: 100%;

    }

     

    Example (refresh your browser)

    http://alt-web.com/FluidGrid/Fluid.html

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 23, 2013 11:51 AM   in reply to evetsrelfel

    Can you show us a link to your work so far?  Or at a minimum, a design comp of what you're trying to do?

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 23, 2013 2:35 PM   in reply to evetsrelfel
     
    |
    Mark as:
  • Currently Being Moderated
    Jan 23, 2013 3:37 PM   in reply to evetsrelfel

    As an example, refresh your browser.

    http://alt-web.com/FluidGrid/Fluid.html

     

    Trying to make content stick precisely over a large background-image is impossible.  

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 29, 2013 2:52 AM   in reply to evetsrelfel

    In your CSS Styles menu, if you double click on the layout div you are working on or the grid container, you will find that the image will show if you hit the return key. If you create a table bigger than the div tag or grid container, it will automatically resize and you be able to see your image. Thats a couple of cheat ways so you can see your image when you work and when you publish.

     

    It just means you will have several of this code: <p> </p>

     

    The image will only show the width and the height of layout div that you are working in.

     

    I have been able to place one fluid grid layout div tag inside on another, although I find that if I make this a template file, the template tends to break over time. Not sure it that's because I am giving Dreamweaver a headache with multiple fluid grid layout div tags inside each other.

     

    The most I have done: 1st level grid container, 2nd level inside grid container were layout div for spry collapse panel menus, 3rd level inside layout div for spry collapse panel menus were sub menus.

     

    I have tried placing one image in the background of the grid container and then another image over the top in a fluid grid layout div tag. The reason why they move is because of the fixed/scroll option inside the CSS style. I found that when publishing, certain browsers shift both images either up or down. This can be a problem, especially if you create an image with a white box and try to align the second image up inside.

     

    It probably can be done, and I spent months hand coding and playing with the file. IE8 is a problem and I have added extra code which I found online. Firefox tends to move things on Windows platform, but MAC is not as bad. Safari and Chrome tends to work better with fluid grid layouts. There is an option for the early versions of browsers so they can recognise things.

     

    To resize everything when in tablet and mobile, I found tablet grid container/layout div tage size 80-90% and mobile to 40-50% grid container/layout div tage size.

     

    Hope this helps

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 15, 2013 7:59 PM   in reply to evetsrelfel

    I was trying to do some thing similar in the fact that I just wanted a background image that sized to the size of the screen. The best I could come up with was adding a class tag to the body of the index.html file and in the css file set a background image and then used the background-size property and set it to 100%. Sadly this doesn't keep the image inline with the fluid grid tags. Hopefully this might spark an idea of your own or help someone else in the same situation.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 21, 2013 10:10 PM   in reply to evetsrelfel

    Hi everyone, I am looking for a solution to my background image in DW using fluid grid layout. I want the background image covered the entire browser window at all times. so here is css style:

     

    html{

              background-image: url(images/bg-tea%20picking.jpg);

              width: 100%;

              height: 500px;

              max-height: 500px;

              background-repeat: no-repeat;

              background-position: center;

              position: fixed;

              -webkit-background-size: cover;

              -moz-background-size: cover;

              -0-bacground-size: cover;

              background-size: cover;

    }

     

    The problem is it doesn't work when I resize the browser down to tablets & mobile size.

     

    Is somebody has the answere for that, thank you.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 22, 2013 11:41 AM   in reply to tampham71

    Try this instead:

     

     

    body {

    background: #000 url(../Images/your-BG-image.jpg) no-repeat center center fixed;

    /**for Safari,Chrome**/

    -webkit-background-size: cover;

    /**for Firefox**/

      -moz-background-size: cover;

    /**for Opera**/

    -o-background-size: cover;

    /**for other browsers**/

    background-size: cover;

    }

     

    Live example:

    http://alt-web.com/TEST/Resizable-BG.shtml

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 23, 2013 9:49 PM   in reply to Nancy O.

    Thanks Nancy, I'll try it & let you know if it works

    Cheers.

     
    |
    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