Thank you both *very* much for your help!
Philippe's idea did indeed work, but was still not quite what I wanted
for the interaction between the bottom of the content and the top of the
image.
It occurred to me that the problem was really the resizing. I went back
to the original image and made a wider version, then set it to *not*
resize with the window. This is much better, it's keeping it in the same
place no matter the window size.
What I wound up doing:
1) Moved the image out of the #footer-container and to the
#body-container as Tom suggested, and not resizing with the window.
2) Shortened the #footer-container so more of the image would slide up
toward the content.
Now working in IE, FF, Chrome...
http://redkitecreative.com/dev/gardensweet/farm-stand/
I'll go in and fade out the sides of the image, which will only show in
wider views, and that should be it. Thank you again!
--
Debbie
On 2/12/2014 7:40 PM, Tom Livingston wrote:
I hope that makes sense - I don't want a big gap between the content and bottom
image, I want them to overlap just a bit but not too much.
Does it do what you want if you change the background-image alignment from
“bottom” to “top” beyond a certain viewport width ?
Currently you have
@media only screen and (min-width: 960px) {
#footer-container {
background: #fff url(images/body-bg.jpg) center bottom no-repeat;
background-size: 100% auto;
you could add
@media only screen and (min-width: 1160px) {
#footer-container {
background: #fff url(images/body-bg.jpg) center top no-repeat; /*
<—- change to top here */
background-size: 100% auto;
I made a wild guess as for the value of the MQ – it could be a little more or
a little less. Test… :=)
Philippe
--
Philippe Wittenbergh
http://l-c-n.com
I think Philippe's suggestion is worth a try, but to me you have some
things working against you. Since you are scaling the image
proportionally it's relation to the content is going to change. On a
really wide monitor (1600x900 for example) you run out of image top
that blends with the rest of the page and you end up with a visible
hard line. Narrower, and you have a lot of room below the content.
Is it worth a try having the image in an overall page wrapper instead
of the footer? So you have a background color on body (or html)
element and in the page wrap you have the image. This will prevent the
top of the image from getting cropped by footer-wrapper and you may
get more of the image peeking up behind your content.
Just a thought. HTH.
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
