Geek Answers Handbook

Fill the border with a picture or image?

I have a list of enterprises divided by categories. Next to the name of each category, starting at about 20 pixels, I would like to have a 3px height stretched to the end of the div. I would like this border to be filled with a template or image. At first I tried to just use the image, but since the name of each category is different from the other, it turned out to be impractical.

I'm sure there is a relatively easy way to do this, I'm just not sure how this happened. Ideas?

Thanks.

ideal

updated image enter image description here

+6
source share
2 answers

here I use <div> to show the border behind the category <h1> , where both <body> and <h1> have corresponding background images (which are also lined up)

jsfiddle example

CSS

 body { background:url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/gray_jean.png'); font-family:helvetica,arial,sans-serif; } #container { margin:0 20px; position:relative; } h1 { position:relative; float:left; padding-top:6px; padding-right:20px; font-size:2em; background:url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/gray_jean.png') } .border { background:url('http://s3.amazonaws.com/creattica/uploaded-images/0016/6142/patterns_009_blue-hexagon-pattern_crop-iphone_web_for-creattica.jpg') repeat-x -10px 0; position:absolute; top:20px; width:100%; height:3px; } .listings { clear:both; }​

HTML

 <div id="container"> <div class="border"></div> <h1>Catering</h1> <div class="listings"> <ul> <li> Catering Company 1 </li> <li> ... </li> </ul> </div> </div>​
+2
source

If extra markup is enabled (and your parent has a solid background), you can do this as follows:

 h1 { background: red; /* replace with background-image */ } h1 span { background: white; /* replace with color of parent element bg */ } <h1><span>Test Headline</span></h1>

http://jsfiddle.net/358Gg/

0
source

More articles:


All Articles