bitterpants
Programmer
im having trouble making a background image appear on my page using an external CSS file.
heres my css:
body {
background-color: #cccccc;
color: #333333;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
margin: 6px 6px 6px 6px;
padding: 0px 0px 0px 0px;
}
h3 {
font-family: arial, helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}
img {
border-width: 0px 0px 0px 0px;
padding-top: 0px;
padding-bottom: 8px;
}
#main {
background-image: url(BWILDlogo-bg.gif);
background-position: 15px 15px;
}
#main #text {
width: 225;
float: left;
position: relative;
top: 10;
margin-top: 20px;
}
#main #pic {
float: left;
padding-left: 20px;
}
and heres my html:
<body>
<div id="head">
<img src="Blogo.gif" width="136" height="38" alt="B">
<h3>Permanent Color</h3>
</div>
<div id="main">
<div id="text"><p>This is a bunch of text about that stuff. IGive Me Content!</p>
<p>Colors:<br>
Fire Red<br>
Jet Black<br>
Burgundy<br>
Dark Plum</p></div>
<div id="pic"><img src="bwildphc.jpg" alt="Permanent Hair Color"></div>
</div>
</body>
heres my css:
body {
background-color: #cccccc;
color: #333333;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
margin: 6px 6px 6px 6px;
padding: 0px 0px 0px 0px;
}
h3 {
font-family: arial, helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}
img {
border-width: 0px 0px 0px 0px;
padding-top: 0px;
padding-bottom: 8px;
}
#main {
background-image: url(BWILDlogo-bg.gif);
background-position: 15px 15px;
}
#main #text {
width: 225;
float: left;
position: relative;
top: 10;
margin-top: 20px;
}
#main #pic {
float: left;
padding-left: 20px;
}
and heres my html:
<body>
<div id="head">
<img src="Blogo.gif" width="136" height="38" alt="B">
<h3>Permanent Color</h3>
</div>
<div id="main">
<div id="text"><p>This is a bunch of text about that stuff. IGive Me Content!</p>
<p>Colors:<br>
Fire Red<br>
Jet Black<br>
Burgundy<br>
Dark Plum</p></div>
<div id="pic"><img src="bwildphc.jpg" alt="Permanent Hair Color"></div>
</div>
</body>