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:
middle Image :
End Slice :

Answer 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;
}