using background image for headers

Question

I have got an image which i have to used for my headers , I cant use fixed image as the header width changes depending on the header text, therefore i did 3 slices of an image , starting which wont repeat , middle slice which will repeat with the text and end slice image which should close the header, i have included the image , and the css which i am using , the end slice doesnt works , can anyone tell me what i am doing wrong :

<div class="product-item">
<div class="product-title">

<span><h3>@Model.Name</h3></span>

</div>

</div>

CSS:

.product-grid .product-item .product-title
{
background-image: url('images/first-slice.png');
background-repeat: no-repeat;
background-position: 0% 0%;
height:37px;
 }
.product-grid .product-item .product-title span
{
background-image: url('images/last-slice.png');
background-repeat: no-repeat;
background-position: 100% 50%;
 height:37px;
 }

.product-grid .product-item .product-title h3
{
background-position: 50%;
background-image: url('images/middle-slice.png');
background-repeat: repeat-x;
 height:37px;
 margin-left:5px;
 }

Live test Website:Website

First Image: First-slice middle Image : enter image description here End Slice :

Zsolt Schäfer · Accepted Answer · 2011-12-13 09:01:08Z

3

The main problem was that the h3 element has the same width as the containing span. This span has also be set to display:block, in order for background-position to function.

However, as said in the comments, in order for the HTML also to be valid, this span must be changed to a div.

Then, I just added a margin-right:5px to the h3 element as well.

Finally, in order to have the text vertically centered, use line-height instead of height.

.product-grid.product-item.product-title
{
    background-image: url('images/last-slice.png');
    background-repeat: no-repeat;
    background-position: 100%;
    line-height:37px;
}

.product-grid.product-item.product-title h3
{
    background-position: 50%;
    background-image: url('images/middle-slice.png');
    background-repeat: repeat-x;
    line-height:height:37px;
    margin-left:5px;
    margin-right:5px;
}

.product-grid.product-item.product-title div {
    background-image: url('images/first-slice.png');
    background-repeat: no-repeat;
    background-position: 0%;
    line-height:37px;
}

edited Dec 13, 2011 at 9:01

answered Dec 12, 2011 at 11:08

Zsolt Schäfer

2861 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

thirtydot Over a year ago

The HTML should be changed, because it's invalid.

ptriek · Accepted Answer · 2011-12-12 10:39:01Z

2

The h3 (containing the repeated middle image) sits on top of the span, containing your right image.

Set the right image on the h3, and the repeated image on the span - that should fix it.

And better change the span to a div, since a span can't contain block elements like h3 (semantically incorrect)

answered Dec 12, 2011 at 10:39

ptriek

9,2965 gold badges34 silver badges29 bronze badges

5 Comments

Mr A Over a year ago

but using div the new block-level element will be created , i was avoiding that , by including span just to change the style and the last image ..

ptriek Over a year ago

what would be worse about adding a block-level element instead of an inline element? html rules state that an inline element (like span) cannot contain block-level elements (like h3). your code works, but it's just not correct...

Mr A Over a year ago

i tried using another div within div , but image width does not change depending on the text.

Mr A Over a year ago

even added display block to the h3 tag

ptriek Over a year ago

just follow exaclty the instructions of @thirtydot - that will work

thirtydot · Accepted Answer · 2011-12-12 10:49:16Z

1

You should change:

<span><h3>@Model.Name</h3></span>

to:

<div><h3>@Model.Name</h3></div>

The problem is that span is an inline element, on which setting a height will not work.

<span><h3>@Model.Name</h3></span> is also invalid HTML.

As pointed out by @ptriek, you also need to swap the order of backgrounds between elements.

This is the CSS that you need (assuming that you changed the span to a div):

.product-grid .product-item .product-title
{
    background-image: url('images/middle-slice.png');
    background-repeat: repeat-x;
}
.product-grid .product-item .product-title div
{
    background-image: url('images/first-slice.png');
    background-repeat: no-repeat;
    background-position: left;
}
.product-grid .product-item .product-title h3
{
    background-image: url('images/last-slice.png');
    background-repeat: no-repeat;
    background-position: right;
    height: 37px;
    margin-left: 5px;
}

edited Dec 12, 2011 at 10:49

answered Dec 12, 2011 at 10:36

thirtydot

229k51 gold badges393 silver badges354 bronze badges

8 Comments

Mr A Over a year ago

i just want to add an end image ,u mean should add another class instead of span something like :<div class"something"><h1>...</h1></div> and then add the styles on it

ptriek Over a year ago

though it's semantically incorrect to have a h3 in a span, this is not the cause of the problem - the height of h3 makes the span take over the 37px height

Mr A Over a year ago

so the correct way is to wrap up everything in divs and then add the styling

Mr A Over a year ago

but the image width does not change depending on the text, i want to limit the the background image with text.

ptriek Over a year ago

well in that case you should mention that in your question in the first place.

|

McOffsky · Accepted Answer · 2011-12-12 10:43:46Z

1

Add more divs, it would be easier:

<div id=wrapper>
 <div id="bg_header">&nbsp;</div>
  <div id="content">
  &nbsp;
  </div>
 <div id="bg_footer">&nbsp;</div>
</div>

I've done this in many projects and this works in every major browser.

answered Dec 12, 2011 at 10:43

McOffsky

3053 silver badges11 bronze badges

Collectives™ on Stack Overflow

using background image for headers

4 Answers 4

1 Comment

5 Comments

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

5 Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related