• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Background Images in Fluid Grid Layouts

Explorer ,
Jan 23, 2013 Jan 23, 2013

Copy link to clipboard

Copied

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.

Views

21.2K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 23, 2013 Jan 23, 2013

Copy link to clipboard

Copied

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 23, 2013 Jan 23, 2013

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 23, 2013 Jan 23, 2013

Copy link to clipboard

Copied

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 23, 2013 Jan 23, 2013

Copy link to clipboard

Copied

I wanted to insert a background in order to overlay buttons over the background.  If I insert an image into the foreground, I cannot (as far as i know) insert a buttons over a portion of the image.

Steve

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 23, 2013 Jan 23, 2013

Copy link to clipboard

Copied

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.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 23, 2013 Jan 23, 2013

Copy link to clipboard

Copied

Nancy:

The page is http://pharmacure.businesscatalyst.com.  I want the large image to be a background and that way I can create various content and button/links within the background instead of having to put below the image as I have it now.

Thank you

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 23, 2013 Jan 23, 2013

Copy link to clipboard

Copied

You mean this background?

http://pharmacure.businesscatalyst.com/Images/Index_Picture_Desktop_Cropped.jpg

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 23, 2013 Jan 23, 2013

Copy link to clipboard

Copied

Nancy

Yes, however it is an image placed within a fluid grid layout div currently, however I would like to make it a background that show up like the image and resizes with the div like the image.

Thank you.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 23, 2013 Jan 23, 2013

Copy link to clipboard

Copied

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.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 23, 2013 Jan 23, 2013

Copy link to clipboard

Copied

Nancy:

Thank you Nancy.  I guess it is not an easy task and perhaps my idea is not really feasable.  But I thank you anyway for your effort.

Steve

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 29, 2013 Jan 29, 2013

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 29, 2013 Jan 29, 2013

Copy link to clipboard

Copied

Thanks you for the suggestions.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 15, 2013 Mar 15, 2013

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 21, 2013 Sep 21, 2013

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 22, 2013 Sep 22, 2013

Copy link to clipboard

Copied

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 23, 2013 Sep 23, 2013

Copy link to clipboard

Copied

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

Cheers.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 01, 2014 Nov 01, 2014

Copy link to clipboard

Copied

anyone know of any reason why this code would cause my monitor to go to sleep while preview a page using it in firefox from dreamweaver? I'm running windows 7. It could be a coincidence of some sort. & I'll try it again later, but here is what happened. I hit the preview in firefox button, my background image showed up very awesomely. I start to drag the window smaller, when I got to maybe 40% my monitor lost its signal & went to sleep.I was watching a DVD with VLAN & it went into a few second loop.

I had to turn my machine off & restart it, & now here I am.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 01, 2014 Nov 01, 2014

Copy link to clipboard

Copied

p.s.

the live example you linked works just fine

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 01, 2014 Nov 01, 2014

Copy link to clipboard

Copied

OK, I just tried it again, & no issues.

I will now see if running VLC simultaneously causes it.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 01, 2014 Nov 01, 2014

Copy link to clipboard

Copied

OK it didn't happen again. very odd. oh well.

thanks for tip / code.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Dec 26, 2014 Dec 26, 2014

Copy link to clipboard

Copied

LATEST

Worked for me. Thanks very much

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines