View Full Version : Image background heading issue. Not sure what I'm doing wrong...

Nov 15th, 2009, 05:11 AM
So the idea is, I have three images. I want one image to the left of the text, one image to the right of the text, and one image as a background to the text. I really didn't think this would be that difficult, but I'm having issues. I can't get the text in the right place, and the background image resizes and does... I don't even know what it's doing. Here's what a basically want:


With the background part resizing to the width of the text.

Here's what I'm working with:

<div id="header">
<img src="http://jfinner1.co.cc/images/scrollleft.gif" />
<span class="head">Jessyca's Bio</span>
<img src="http://jfinner1.co.cc/images/scrollright.gif" />


height: 100px;
position: absolute;
top: 20px;
left: 210px;
float: right;
#header .head{
background: url("http://jfinner1.co.cc/images/scrollbg.gif");

Can anyone tell me what I'm doing wrong? Am I going about this all the wrong way, or is it just something small that I'm missing?

Nov 15th, 2009, 08:22 AM
Use 2 background images instead of 3 maybe? One long one as the text background that gets revealed more as more text is added. Have it be the left side of the scroll and the long parchment. Then the second background would just be the right side of the scroll.


<div class="container">
<p>Text Here<span class="endpiece">&nbsp;</span></p>


.container {height:100px; width:auto; display:block; position:relative; background-color:#0C9;}
.container p {line-height:100px; display:block; float:left; text-align:center; margin:0px; padding:0px 0px 0px 36px; background-color:#F90;}
.endpiece {height:100px; width:30px; display:block; float:right; background-color:#69F; margin:0px 0px 0px 6px; padding:0px;}

Of course replace background colors with your images and adjust the sizes accordingly. Put the long center image and the left image together as one image as the BG for .container p and use just the right image as the BG for .endpiece.

There are so many ways to do this, it kind of depends on how you want to use it. The container div could be anything but you could also use it to center the element or position it to the left or right. If you try to put additional elements in the same container, then you would have to contend with those other elements for positioning and the simple float method I gave could break down (depending on how the additional elements are positioned).

Nov 15th, 2009, 11:31 AM

background:#C9BA8F url(http://jfinner1.co.cc/images/scrollbg.gif);

<div id="header">
<img src="http://jfinner1.co.cc/images/scrollleft.gif" class="left"/>
<img src="http://jfinner1.co.cc/images/scrollright.gif" class="right"/>
Text goes here

PS: You'd need to make the edges of the side images opaque

Nov 15th, 2009, 01:31 PM
It just makes more sense to use background images instead of including 2 images as content. They are after all background images. Granted, the method I gave still added a useless span, but that won't really show up when viewed semantically like images will. I think I prefer my technique because instead of adding multiple images for each heading I could just paste the same span right after the heading text on any given heading. Plus you only need 2 pics instead of 3.

It would be better to do it purely through CSS and very well you could with after and content but you would run into even more compatibility issues.