1

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 : enter image description here

Mr A
  • 6,448
  • 25
  • 83
  • 137

4 Answers4

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;
}
Zsolt Schäfer
  • 286
  • 1
  • 5
  • The HTML *should* be changed, because [it's invalid](http://validator.w3.org/check?uri=http%3A%2F%2Fjsbin.com%2Felavid&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.2). – thirtydot Dec 12 '11 at 11:23
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)

ptriek
  • 9,040
  • 5
  • 31
  • 29
  • 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 .. – Mr A Dec 12 '11 at 10:44
  • 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... – ptriek Dec 12 '11 at 10:48
  • i tried using another div within div , but image width does not change depending on the text. – Mr A Dec 12 '11 at 10:53
  • even added display block to the h3 tag – Mr A Dec 12 '11 at 10:53
  • 1
    just follow exaclty the instructions of @thirtydot - that will work – ptriek Dec 12 '11 at 10:56
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;
}
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • i just want to add an end image ,u mean should add another class instead of span something like :

    ...

    and then add the styles on it     – Mr A Dec 12 '11 at 10:38
  • 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 – ptriek Dec 12 '11 at 10:40
  • so the correct way is to wrap up everything in divs and then add the styling – Mr A Dec 12 '11 at 10:42
  • but the image width does not change depending on the text, i want to limit the the background image with text. – Mr A Dec 12 '11 at 10:57
  • @MrA: It looks like this with the fixes in my answer applied: http://i.stack.imgur.com/XLbuf.png. If that's not what you want, I give up. – thirtydot Dec 12 '11 at 11:00
  • thanx , it has fixed d 80% of my requirement but the header should not expand till end it should wrap up as the header text ends – Mr A Dec 12 '11 at 11:01
  • 1
    well in that case you should mention that in your question in the first place. – ptriek Dec 12 '11 at 11:04
  • sorry for that , i tried using display:inline-block , it works now , but do inline-block is compatitble with all the versions – Mr A Dec 12 '11 at 11:08
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.

McOffsky
  • 205
  • 3
  • 11