Background Watermark Image

Forum Moderators: not2easy

Message Too Old, No Replies

Background Watermark Image

Placing a b/g Image in center of Page

Css_Novice

12:42 pm on Apr 11, 2006 (gmt 0)

Hi,

I want to place a background image onto the centre of my pages so that its like a watermark below my images and text. I have written the following code without any success...

body {
background-color : #fff;
background-image:url('fade.gif');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
margin : 0;
padding : 0;
border-color : #cc0000;
}

As the image is centred I can actually see it when I remove my content div which has the value of background-color:transparent; and Ive also tried background-color:inherit; but the content div still obstructs the image.

Could someone kindly steer me in the right direction

thanks in advance

Css_Novice

milanmk

1:35 pm on Apr 11, 2006 (gmt 0)

I have this in external CSS and it works perfectly fine for me as a watermark image.

body
{
background: #c8c8c8 url(../pic/logo.gif) center center no-repeat;
}

coopersita

4:32 pm on Apr 11, 2006 (gmt 0)

What's the code for the content div?

Css_Novice

10:35 pm on Apr 11, 2006 (gmt 0)

thanks Milanmk - I tried that also without any luck, perhaps the content div code is the problem

#content {
background-color:inherit;
top : 0px;
margin : 0px 25% 0 240px;
padding : 0 8px 8px 8px;
color : #000000;
width : 60%;
height:100%;
border : 1px solid #ccc;
}

coopersita

1:03 am on Apr 12, 2006 (gmt 0)

have you tried not putting any background at all in the content div, or background: transparent?

Css_Novice

1:25 am on Apr 12, 2006 (gmt 0)

yeah Ive tried background :transparent; with no luck and have also removed any background value from the content div with the same result.

The content div has only a half of content so I can actually see half of the watermark image. Strangely enough, Im able to change the b/g color to whatever I want, but the values; transparent or inherit make no changes at all

coopersita

2:10 am on Apr 12, 2006 (gmt 0)

Is #content a child of body, or is there another container in between?

Child:
<body>
<div id="content">
...
</div>
</body>

Other container:
<body>
<div id="container">
<div id="content">
...
</div></div></body>

If there is another container in between, content could be inheriting the background from it.

Css_Novice

2:37 am on Apr 12, 2006 (gmt 0)

No theres no other div surrounding content, heres the code, it will give you a better idea on what Ive done
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

#header {height:80px; background-color:#000; margin:auto:}

body {
background: #c8c8c8 url(fade.gif) center center no-repeat;
background-color : #fff;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
margin : 0;
padding : 0;
color : #000000;
}
p, ul, ol, li {
font : 8pt verdana,geneva,helvetica;
}
h1 {
font : bold 14pt Arial, Helvetica, geneva;
}
h2 {
font : bold 12pt Arial, Helvetica, geneva;
}
#leftnavigation {
position : absolute;
left : 0;
width : 20%;
margin-left : 10px;
margin-top : 20px;
color : #000000;
padding : 3px;
}
#rightnavigation {
position : absolute;
left : 77%;
top : 80px;
width : 190px;
padding-left : 2px;
z-index : 3;
color : #000000;
padding : 3px;
border-bottom: 1px dashed #ccc;
}
#content {
background-color:transparent;
top : 0px;
margin : 0px 25% 0 240px;
padding : 0 8px 8px 8px;
color : #000000;
width : 60%;
height:100%;
border : 1px solid #ccc;
}
#content h1, #content h2 {
color : #cc0000;
}

div#footer {width:100%; /* makes the div fill its container - usually body */

padding:4px 0; /* pushes the links away from top and bottom of the div */
font-size:.65em; /* sets the font size of all links */
text-align:center; /* centers the ul elements in the div */
background-color:#000080; /* sets the background color of the div */
clear:both;
}

A {
color: #000080;font-size: 7pt;font-style: bold;font-family: verdana;}

A:Hover {
color: #ff6600;
text-decoration:underline;
}

A {text-decoration:none
}
</style>

</head>

<body>

</div>

</div>
<div id="rightnavigation">

</div>

</div>

</body>
</html>

Css_Novice

2:51 am on Apr 12, 2006 (gmt 0)

Damn - I think I know what the problem was; I was using tables within the content div so therefore they must have been overriding the values of the div.

I needed a tabular structure for that specific text within the div and only realised after I had deleted the tables and pasted in other content...

My apologies - Another lesson learnt I guess, thanks for your input guys...