Skip to main content
E
evetsrelfel
Participating Frequently
January 23, 2013
Question

Background Images in Fluid Grid Layouts

  • January 23, 2013
  • 3 replies
  • 22066 views

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.

This topic has been closed for replies.

3 replies

C
Curtis Shrecengost
Participant
December 26, 2014

Worked for me. Thanks very much

T
tampham71
Participant
September 22, 2013

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.

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
September 22, 2013

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.

Nancy O'Shea— Product User & Community Expert
T
tampham71
Participant
September 24, 2013

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

Cheers.

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
January 23, 2013

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.

Nancy O'Shea— Product User & Community Expert
E
evetsrelfelAuthor
Participating Frequently
January 23, 2013

Nancy:

Thank you for the reply.

I'm lookin to place the background image into a fluid grid div within the body, so that the background image scales to the flexible div size (as would an image) and shows up as if it were an image without any content within the div.  Currently the image will not show unless the div contains content and when it does show, it is not scaled to the confines of the flexible div size.

I hope I clarified this for you.

E
evetsrelfelAuthor
Participating Frequently
January 29, 2013

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


Thanks you for the suggestions.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices