tiled and fixed image background?

[Kalem]

I am trying to add a fixed image centered behind the text of my page but in front of the tiled background. Is there a way to do this? :confused:

[TheJoshMan]

it would need to be inside another element on the page if you are already using a tiled background for "body". You could use a div as a wrapper for all the content on your site and place the background image in that, or if you knew exactly where you wanted the image to show up then you could just create a div with absolute positioning, specify the "top" and "left" and place the image inside it. Also, when you say "fixed" do you mean an image that will stay within the screen at all times no matter how far down or over the user scrolls? If not, then that is not "fixed", that would just be absolute.

[Kalem]

Yes when I said fixed I meant it would stay in the middle of the screen no matter how much scrolling was done.

The idea was to have a watermark style semi-transparent png in the background and use a tiled image instead of a generic color underneath. I've tried CSS but the static image ends up cropped and in the upper portion of the page instead of in the center.

[TheJoshMan]

Where exactly do you want the image to show up? Here would be a few examples:

Top Right Corner:


<style type="text/css">
.watermark{
height:150px;
width:150px;
background:url('images/watermark.png') no-repeat;
position:fixed;
top:10px;
right:10px;
z-index:0;
}
</style>

<div class="watermark"></div>


Top Left Corner:


<style type="text/css">
.watermark{
height:150px;
width:150px;
background:url('images/watermark.png') no-repeat;
position:fixed;
top:10px;
left:10px;
z-index:0;
}
</style>

<div class="watermark"></div>


Bottom Left Corner:


<style type="text/css">
.watermark{
height:150px;
width:150px;
background:url('images/watermark.png') no-repeat;
position:fixed;
bottom:10px;
left:10px;
z-index:0;
}
</style>

<div class="watermark"></div>


Bottom Right Corner:


<style type="text/css">
.watermark{
height:150px;
width:150px;
background:url('images/watermark.png') no-repeat;
position:fixed;
Bottom:10px;
right:10px;
z-index:0;
}
</style>

<div class="watermark"></div>



Hope this helped