CSS: Aligning to images below a flexible height content div
I have a site that has a fairly complicated footer, see http://www.roadsafetyforchildren.co.uk/, not really sure how to attempt to build it:
I've split the image up into two parts, the first part below needs to be horizontally centered but sit below the content:
The second part needs to repeat horizontally but stay in line with the image above.
Therefore the two images needs to look like the first image at the top of the question.
I can match the two images up IF the content div above it has a fixed height. The problem is the content div NEEDS to be flexible to grow/shrink with the content. Therefore the image at the bottom of the content div moves up and down the page depending on the size of it.
How can I keep the two images lined up with a flexible content div above it?
P.s There's a lot of answers but don't think a few of them have understood the question.
Seems straight forward to me, you will need two divs:
<div id="content">
<div id="inner_content">
<!-- Append image to very bottom -->
<img src="city" width="" height="" alt="" />
</div>
<!-- Background image of hills goes here -->
</div>
CSS is straight forward..
#content { width: 100%; background: url('hills.png') repeat center bottom; }
#inner_content { width: xx; margin: auto; }
try this:
html, body { margin:0; padding:0; min-height:100%;}
html { background: #color url(repeteable.jpg) center bottom repeat-x; }
body { background: white url(footer.jpg) center bottom no-repeat;}
Whatever <div> the content is in should be height:auto and have a background image of five or so pixels high by whatever width and should repeat-y in the css, and the <div class="footer"> should be float:left. That way the footer will always be below the content, and whatever height the content is will have a repeating background.
No need to mess with PS, except to create the bg image for the content.
This would be the bg image for content div, and repeat-y so it repeats from the top down:
And the footer image:
And if you make the 'background repeat' image a png, you could make the drop shadow opaque to accommodate the change in the body bg image.
You can position a background inside an element:
div#footer {
background: url('roadpic.jpg') bottom center no-repeat;
}
<div id="content">your content goes here</div>
<div id="footer">...</div>
which will keep the footer div below the content at all times.
You will need a common anchor point for both the backgrounds. Between a horizontally-resizable window and a content area that is less than 100% of the window width, the only point that can remain constant between the two containers is the horizontal centre of the body.
So your hills background will need to be centred on the body or some other container that has 100% of window width. The road image can either be fixed-position inside a fixed-width centred container (shown in the example below), or centred inside a centred variable-width container.
The resulting CSS will be something like this:
div#wrapper {
width: 100%;
background: url(hills.jpg) center bottom repeat-x #fff;
}
div#content {
width: 800px;
margin: 0 auto;
/* background can be offset to the left or right if the width is fixed
if not it must be centred */
background: url(road.png) right bottom no-repeat;
}
And the HTML:
<body>
<div id="wrapper">
<div id="content">
<p>Some content here</p>
</div> <!-- content -->
</div> <!-- wrapper -->
</body>
The backgrounds of both the containers will have same anchor point and they'll move together as the window is resized!
Because #content is a child of #wrapper, they'll remain aligned vertically because #wrapper will get taller as #content gets taller (unless #content is a float, in which case you'll have to use the :after clearing trick; or if #content is position:absolute, you'll need to align them manually or with javascript).
加载中,请稍侯......
精彩评论