PDA

View Full Version : Background image problem


garybrown
03-22-2010, 05:37 PM
Im a noob to dreamweaver but have been getting along ok up until now. I have a background image i want to use in a div and then write my text on the top. I added it to the div with CSS as is normal. The problem is that the image keeps being reposted everytime the text move down a line (ie every time theres a new <p> in the code) so its not shown in its entirity.

I created the page from a tutorial and there is a CSS rule for "#otherdiv #thisdiv p ". Could it be this that is giving me the issue. I have tried to edit both that rule and #thisdiv to include the background image and neither work.

Theres probably an easy solution ive missed somewhere!

Thanks in advance!

Corrosive
03-22-2010, 05:49 PM
Hi Gary. Please post your code or give us a link to the offending page.

garybrown
03-22-2010, 05:58 PM
This is the code for the page

<body>
<div id="wrapper">
<div id="logo"><a href="fashionhome.html"><img src="images/logo2.jpg" width="150" height="150" /></a><img src="images/fashion banner1.jpg" width="650" height="150" /></div>
<div id="navigation"> | <a href="fashionhome.html">Home</a> | <a href="fashionabout_me.html">About Me</a> | <a href="fashion/fashport/index.html">Gallery</a> | <a href="fashioncontact.html">Contact</a>| <a href="fashpublcations.html">Publications</a> |</div>
<div id="headerImg">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>My name is Gary Brown and I am a photographer based in Manchester.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>My fashion work has covered shoots for 'Didsbury Life' and 'Hale and Bowden' Magazines and shooting competition images for a local hair salon (one of which won a national competition). I am now looking to extend it further afield. My other work covers many music events around the North-West, having shot at events such as The Warehouse Project, Mad Ferret Festival and Leeds Universities Summer Ball. I have shot commissions for DJ Mag and work for the promotors, Metropolis, on a regular basis.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Feel free to browse my portfolio and get in touch, either via the link at the bottom of the page or visit the contact page for more details.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div id="bodyArea">
<p><a href="mailto:djgarybrown@googlemail.com"> <span
class="textColor" id="metadata.contactInfo.value">Email Me</span>
</a></p>
<p>&nbsp;</p>
</div>
</div>
</body>
</html>

And this is the CSS

#wrapper {
background-color: #FFF;
width: 800px;
margin-right: auto;
margin-left: auto;
border-right-width: 2px;
border-left-width: 2px;
border-right-style: solid;
border-left-style: solid;
border-top-color: #999;
border-right-color: #999;
border-bottom-color: #999;
border-left-color: #999;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
font-style: normal;
font-weight: bold;
color: #FFF;
}
#wrapper #logo {
background-color: #FFF;
height: 160px;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
padding-left: 0px;
}
a img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#wrapper #navigation {
height: 35px;
background-color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
color: #333;
font-variant: normal;
padding-right: 10px;
}
#wrapper #navigation a {
font-family: Arial, Helvetica, sans-serif;
color: #333;
background-color: #FFF;
right: 10px;
padding-right: 10px;
padding-left: 10px;
}
#wrapper #bodyArea #left {
height: 400px;
width: 400px;
float: left;
}
#wrapper #bodyArea a {
background-color: #FFF;
color: #333;
}

#wrapper #bodyArea #right {
height: 400px;
width: 400px;
float: right;
}
#wrapper #bodyArea #footer {
clear: both;
height: 40px;
}
#wrapper #headerImg p {
color: #333;
background-image: url(../images/fash%20bckgrnd2.jpg);
}


(apologies if that way more than needed posting!)

edbr
03-23-2010, 02:04 AM
its not too much to post but please use CODE tags as i have edited you post. you will find it in advanced options when you post

Corrosive
03-23-2010, 01:52 PM
Because you have stipulated the background image on p (paragraph) it will start again with each new <p></p>. Try this;

#wrapper #headerImg p{
color: #333;
} //this is to set the font colour on the paragraph

#wrapper #header Img {
background-image: url(../images/fash%20bckgrnd2.jpg);
}//this is to set the image for the whole header.