>>
>>
>> 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.
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
______________________________________________________________________
css-discuss [[email protected]]
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/
