you need to check out this site – has a billion and one copy & paste tutorial about inserting images in blogs.
Mandarin Design: Group images & thumbnails
<b>@katie:</b> That’s not what I’m trying to do. I’m trying to use images as the background for my template.
<body>
<center>
<div id=”wrap”>
<div id=”header”>
<div class=”headtext”>
<div class=”alignleft”></div>
<div class=”alignright”></div>
</div><!–closes headtext–>
</div><!–closes header–>
<div id=”content”>
<div id=”footer”></div>
</div><!–closes content–>
</div><!–closes wrap–>
</center>
</body>
</html>
CSS
Tweaked your margins and added height to your images – the rest remains by and large the same:
#wrap {
width: 905px;
margin:0;
padding:0;
}
#header {
background: url(“photoblog_bkg_top.png”) no-repeat bottom;
border: none;
height: 38px;
font-size: x-small;
font-weight: bold;
padding-top: 4px;
padding-left: 3px;
padding-right: 3px;
padding-bottom: 0px;
margin-top:5em;
}
#content {
background: url(“photoblog_bkg_mid.png”) repeat-y top;
border: none;
margin-left: auto;
margin-right: auto;
margin-top:-19px;
margin-bottom:-19px;
padding-top: 0;
padding-bottom: 0;
text-align: center;
}
#footer {
background: url(“photoblog_bkg_bottom.png”) no-repeat bottom;
border: none;
height:60px;
width:900px;
margin: 0 auto 0 auto;
text-align: center;
font-size: x-small;
font-weight: normal;
padding-bottom: 0px;
clear: both;
}
Well, it looks better, anyway.
Removed & Changed some of the css you gave me.
#wrap {
width: 905px;
margin: 0;
padding: 0;
}
/* 1. End Global */
/* 2. header.php */
#header {
background: url("photoblog_bkg_top.png") no-repeat bottom;
border: none;
height: 38px;
font-size: x-small;
font-weight: bold;
padding: 8px 3px 0px 3px;
margin: 0;
}
#header a, #header a:visited {
text-decoration: none;
}
.headtext {
width: 850px;
padding-top: 14px;
}
/* 2. End header.php */
/* 3. index.php */
#content {
background: url("http://photoblog.desk003.com/wp-content/themes/blueblurry/photoblog_bkg_mid.png") repeat-y top;
border: none;
margin: -10px auto -10px auto;
padding-top: 0px;
padding-bottom: 0px;
text-align: center;
}
/* 3. End index.php */
/* 4. footer.php */
#footer {
background: url("http://photoblog.desk003.com/wp-content/themes/blueblurry/photoblog_bkg_bottom.png") no-repeat bottom;
border: none;
height: 60px;
width: 900px;
margin: 0 auto 0 auto;
text-align: center;
font-size: x-small;
font-weight: normal;
padding-bottom: 0px;
clear: both;
}
#footer a, #footer a:visited {
text-decoration: none;
}
#footer img, #footer img a, #footer img a:visited, #footer img a:hover {
border-width: 0px;
padding: 0px;
display: inline;
}
.ftext {
padding-top: 13px;
}
/* 4. End footer.php */
Thanks for the help, without that I would not have had anything!
However I think I see why you had a larger negative top margin, to make it show right in IE. That, however, screwed it up and made it overlap in firefox & safari, which is the audience I care more about. Thanks for your help 🙂
That’s the beauty of wordpress – the software allows us to play with stuff, tweaking themes continually until the page presents the way YOU want it to. Oh, and reading external stuff (websites and tutorials by experts) helps, also.
At the time of posting everything displayed correctly AND beautifully in FF, Moz, Opera, Net AND IE6 using (800×600) & (1024×600) screens, as well as my own 21inch screen which I haven’t the faintest what that converts to in english…
Don’t post long code, pleeease 🙂
use http://pastebin.com or similar services.
