CSS question...

Miscellaneous Forums/General Discussion/CSS question...

Is it possible to overlay a whole website with a image... but tiled?

for example, take bb.com and put yellow wire ontop of the website(IE the topmost layer) -- is this possible?

i'm fairly intermediate with css, (i've done websites before, but never something that requires this)

here's the css...

#yellowwire {
width: 100%;
height: 100%;
background: url(images/wire.png) repeat;
}

and this is how I call it in the webpage... but it doesnt work apparently:

..
.
.Insert whole website here
.
<div id="yellowwire"></div>
</body>
</html>

I'm not expert, but I would imagine you should nest the <div> elements. The below example probably will not give the effect you are looking for, I'm afraid I don't have a great deal of working experience of the DOM.

You should pick up the Browser Book from Visibone.com ;)

      <div id="yellowwire">
         <div> 
            ... whole website
         </div>
      </div>
   </body>
</html>

Perturbatio

FYI, if you put an element over the whole of a site, nothing underneath it will be clickable.

Indiepath

#yellowwire {
	position:absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	background: url(images/wire.png) repeat;
	z-index:200;
}

Does that work for you?

FlameDuck

Yes. But like Perturbatio said, it's not particularly practical.

Yahfree

hmm, I suppose that putting the wire behind the website wouldn't hurt.

Yahfree

alright, now i'm trying to basicly put the barbwire ontop of the background... therefore it's behind the clickable website (this is a single column website)

but the problem is the wire only repeats up to the full screen length... after you scroll it stops... How do I get it to repeat forever like the background?

here's the code:

#barbwire {
position:absolute;
top:0px;
left:0px;
width: 100%;
height: 100%;
background: url(images/barbwire.png) repeat;
z-index:-1;
}

the div is called right after the <body>tag ... (beginning of the website)

Perturbatio

body {
background: url('images/barbwire.png') scroll left top repeat;
}

Indiepath

This guy should google css and not blitzbasic. Google is your friend and it helped us learn.

Yahfree

#10

Got it to work by setting a width and not a height then placing the whole website inside that div.. Thanks for all the help everyone

@Indiepath,
I thought this forum was for generic coding/generic technology talking - sometimes I have really specific problems that google cant easily provide. And besides, I enjoy talking with the folks here.

FlameDuck

#11

Also take a look at w3schools.