Question

I want to use background image and color for the same element
but id doens’t work even I use the css like this question

here’s my css
http://jsfiddle.net/xdkwB/

Answer 1

Your CSS is working correctly, both the image and background colour sit within the one container so because they’re the same colour, you can’t actually see the arrow.

The best way to solve this is to use an outer div that wraps your header element, like so:

<div class="outer"><h1></h1>​​​​</div>​​​​​​​​​

And then style with appropriate CSS:

div {
   float: right;
   width: 198px;
   background-image:url(http://s14.postimage.org/nitv9x7ct/top_Arrow.png);        
   background-position: 0px;
   background-repeat: no-repeat;
   margin-top:21px;
}

h1{
    color:white;
    font-size: 170%;
    font-weight: normal;
    font-family: arial;
    width:189px;
    height:33px;
    line-height: 33px;
    background-color: #b21f23;
    float:right;
}

So to clarify, the outer div is slightly larger and contains the background image aligned to the left and then the header fills all remaining space with the background colour. ​