...

View Full Version : Div and background repeat



HIPPY
05-17-2009, 12:33 AM
<style>
#bottombar{
background-color: #0ff000;
position:fixed;
top:92%;
left:0;
width:100%;
z-index:10;
}
#topbar {
background-color: #0ff000;
position:fixed;
bottom:93%;
top:0;
left:5px;
width:100%;
z-index:10;
}
#loading {
position:fixed;
top:50%;
left:25%;
width:100%;
z-index:10;
}

</style>
<div id="topbar"><img align="middle" src="top.jpg" /></div>
<div id="bottombar"><img align="middle" src="bottom.jpg"/></div>
<div id="loading"><img align="middle" src="loading.gif"></div>

Right now I have the above to create a bar at the top and a bar at the bottom of the screen. However my bar currently is a jpg that is 400px long and doesnt go across the top from left to right fully on all screens.

What I want instead is a 1px jpg that is repeated in the x direction across the screen at the top and bottom of the screen.

How owuld I go about this using divs. I've tried the usual backround image and background repeat code but it doesnt seem to work.

HELP!

Excavator
05-17-2009, 01:33 AM
Hello HIPPY,
Right now your images are not background images so you would not be able to repeat them.

Try one like this instead -

#bottombar{
background: #0ff000 url(bottom.jpg) repeat-x;
position:fixed;
top:92%;
left:0;
width:100%;
z-index:10;
}

and

<div id="bottombar"></div>

HIPPY
05-17-2009, 04:31 PM
I tried that, nothing shows up at all.

abduraooft
05-17-2009, 04:35 PM
You'd need to set some height values in CSS for your empty divs!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum