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.

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

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.

Nancy O'Shea— Product User & Community Expert
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices