PDA

Click to See Complete Forum and Search --> : Background

TiGGi
04-04-2006, 10:36 AM
Is there a way to set 200 px of the bottom of the page with one background and the rest of the page with another?
the tree
04-04-2006, 10:58 AM
If you mean with two different images then yes but you'd need an extra div to house the "front" background image.
TiGGi
04-04-2006, 11:18 AM
can it be alligned to the bottom of the page, the front backround?
the tree
04-04-2006, 11:35 AM
This'll do it.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Some page</title>
<style type="text/css">
<!--
body{
margin: 0;
padding: 0;
color: #fff;
background: url(http://www.pbs.org/producers/images/Oct23/background.jpg) center center repeat #00f;
height: 100%;
}
div#container{
background: url(http://www.dominicos.org/HROSARY/spanish/mision/images/dragon.gif) bottom right no-repeat;
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
-->
</style>
</head>
<body>
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla lacinia, magna dignissim fermentum luctus, felis elit imperdiet nibh, non cursus ipsum dolor at mauris. Quisque a massa ac tortor feugiat euismod. Mauris interdum vehicula enim. Aenean hendrerit dolor quis ipsum. Nam adipiscing lacinia mi. Nunc at dolor et leo semper molestie. Maecenas orci lectus, aliquet non, mattis vestibulum, consequat sed, ante. Proin sit amet sapien. Vestibulum viverra ligula sed augue. Mauris ut enim quis quam accumsan viverra.</p>
<p>Ut id ipsum eu pede rutrum gravida. Maecenas pretium tempor dolor. Vestibulum quis nisl eu orci dignissim sodales. Proin vulputate turpis a velit. Aliquam feugiat. Phasellus dapibus, nunc sit amet feugiat vulputate, augue orci congue tortor, vitae faucibus elit sapien ac enim. Nulla in velit quis tellus molestie pretium. Donec pede nibh, varius vel, nonummy et, adipiscing vitae, magna. Fusce iaculis, ligula sit amet varius semper, velit lectus egestas enim, et rhoncus pede eros a dui. Vestibulum in nulla at eros cursus convallis. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam pulvinar eros et diam. Quisque velit. Aliquam dictum mi ut odio.</p>
<p>Quisque condimentum pretium nulla. Maecenas urna nisi, euismod vitae, eleifend non, tristique ac, arcu. Sed venenatis mauris. Aliquam ullamcorper malesuada eros. Quisque odio. Morbi iaculis ultrices quam. In hac habitasse platea dictumst. Maecenas turpis. Suspendisse potenti. Donec non dui at metus lacinia laoreet. Etiam neque nunc, pellentesque quis, fermentum a, viverra eget, elit. Suspendisse egestas dapibus velit. Cras dictum consectetuer enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ullamcorper libero a ipsum.</p>
</div>
</body>
</html>
TiGGi
04-04-2006, 12:04 PM
It wasn't working for IE, front bck was moving around with text so I added height: 100%; to body style and it's good now. One prob thou, is there a way to tile the front bck accross the bottom?
the tree
04-04-2006, 12:22 PM
Thanks for the reminder.
Replace no-repeat; with repeat-x;.
TiGGi
04-04-2006, 01:31 PM
Works great, thanks alot!