|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
April 2nd, 2004, 01:59 AM
|
|||
|
|||
|
Complex backgrounds with css
I would like to do the following on a web page but not sure how. Tried a few things but it didnt display what I was hoping for...
I want essentially a 3 layered background image. The main background is one image that is tiled in all directions The second image is tiled in x but attached to the top of the screen The third image is the same as the second image but attached to the bottom of the screen. Over the top of this I want to use html tables and have the background displayed through the empty table cells. Is this possible? Any help appreciated 
__________________
www.maidenfans.com
|
|
#2
April 2nd, 2004, 03:13 AM
|
||||
|
||||
|
Is the following any help:
Code:
<style type="text/css">
<!--
body {
margin: 0px;
background: url(images/bg1.gif) repeat;
}
#top {
position: absolute;
top: 0px;
left: 0px;
height: 40px;
width: 100%;
background: url(images/bg2.gif) repeat-x;
}
#bottom {
position: absolute;
bottom: 0px;
left: 0px;
height: 40px;
width: 100%;
background: url(images/bg3.gif) repeat-x;
}
#main {
position: absolute;
top: 40px;
left: 40px;
right: 40px;
bottom: 40px;
border: 1px solid #000000;
}
-->
</style>
and:
<body>
<div id="top">
TOP
</div>
<div id="bottom">
BOTTOM
</div>
<div id="main">
MAIN
</div>
</body>
|
|
#3
April 2nd, 2004, 05:12 AM
|
|||
|
|||
|
Apart from the #main div id thats exactly what I had already but the background wasnt showing through the table... in fact I'm not sure the background was showing at all to be honest but I will try that and see what happens
|
|
#4
April 2nd, 2004, 12:22 PM
|
|||
|
|||
|
hey it worked
 Thanks very much
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > Complex backgrounds with css |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
