Forum Moderators: not2easy
Im new to css and currently struggling with a problem regarding background images.
What Im trying to do is to post a message across my website ("Open all weekend" -- "or merry christmas to all our visitors") by inserting a bg image into css file.
Ive tried the standard body { background-image: url(..) etc but because my actual background is an image itself - rather than a color, it seems to conflict with the message image.
Is there a way to insert the image containing a message - position it at the top center of the page and avoid any conflicts with the original bg image (which incidentally is not formatted by the css file)
Thanks
C
If I understand you correctly, your html contains a line like this..
<body background="image1.gif">
and your CSS has a line like..
body {
background-image: url(image2.gif);
}
These represent two different ways to refer to the same thing: the background image of your <body> and since <body> can only have one background image then only one of these will work.
Firstly I suggest you ditch the background="" attribute. This attribute is long since deprecated and you'd be better off handling the styling in CSS.
Next I would introduce an empty <div> in your html that you will use for your message. So your html will now look something like..
<body>
<div id="messagearea"></div>
<p>
blah blah blah...
</p>
and your CSS will look like..
body {
background-image: url(image1.gif);
}
#messagearea {
background: url(image2.gif) #fff no-repeat center center;
height: 50px;
width: 300px;
margin: 0 auto;
}
This will display your message at the top of the page in the middle of a box with a white background.
GrahamS
