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.
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.
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.
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.
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
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.
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
Copy link to clipboard
Copied
You mean this background?
http://pharmacure.businesscatalyst.com/Images/Index_Picture_Desktop_Cropped.jpg
Nancy O.
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.
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.
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
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
Copy link to clipboard
Copied
Thanks you for the suggestions.
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.
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.
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.
Copy link to clipboard
Copied
Thanks Nancy, I'll try it & let you know if it works
Cheers.
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.
Copy link to clipboard
Copied
p.s.
the live example you linked works just fine
Copy link to clipboard
Copied
OK, I just tried it again, & no issues.
I will now see if running VLC simultaneously causes it.
Copy link to clipboard
Copied
OK it didn't happen again. very odd. oh well.
thanks for tip / code.
Copy link to clipboard
Copied
Worked for me. Thanks very much