Le 13 févr. 2014 à 11:02, Debbie Campbell <d...@redkitecreative.com> a écrit :
>>>> http://redkitecreative.com/dev/gardensweet/farmers-markets/ >>> >>> >>> I'd like to have the large image that's currently in #footer-container slide >>> up so that it's >>> >>> 1) on top of #container and #body-container >>> >>> 2) 'underlapping' the bottom of the page content a bit so some of the color >>> shows behind the content. >>> > > Yes - here's an example of what I'd like to have: > >> http://redkitecreative.com/dev/gardensweet/ex1.jpg > > See how the bottom image is moved up behind/under the main content area so > some of the blue/grey shows behind the text? > > But this is what I don't want: > >> http://redkitecreative.com/dev/gardensweet/ex2.jpg > > When the browser's at full width, the background image rides up too far and > the top is cut off. This is Chrome. > > > > > 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 ______________________________________________________________________ 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/
