3

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/

Community
  • 1
  • 1
palAlaa
  • 9,500
  • 33
  • 107
  • 166

5 Answers5

6

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. ​

DNJohnson
  • 776
  • 5
  • 11
  • 1
    That's correct, div's are not specifically a semantic element, they exist primarily to layout a page visually. If your arrow is purely for aesthetic purposes then the div is suitable. If your arrow should convey actual meaning to the user (i.e. a blind user should be aware of it), then a more appropriate solution would be to embed the arrow as an img element with an alt attribute and float the h1 next to it. – DNJohnson Feb 24 '12 at 10:51
1

I don't think you can get your desired result with just one element styling.

You would either need to have the background-image outside of the element, which is not possible.

Or you would need the background-color to not fill all of the element, which is also not possible

The best option IMO, would be to have two elements with a background-image in the first, and background-color in the second

http://jsfiddle.net/xdkwB/11/

Example with text:

http://jsfiddle.net/xdkwB/13/

Example floated right:

http://jsfiddle.net/xdkwB/14/

Curtis
  • 101,612
  • 66
  • 270
  • 352
  • mmm I usually make the background color of the parent element and the background image for child, but this case doesn't need child element! – palAlaa Feb 24 '12 at 10:19
0

try this

background: url(http://s14.postimage.org/nitv9x7ct/top_Arrow.png) no-repeat left center #b21f23;

this will add the background image and everything else will be your background color

clem
  • 3,345
  • 1
  • 22
  • 33
0

You've set the background colour to the same colour as the image. So it's there, you just can't see it because it blends in.

ChrisPatrick
  • 984
  • 7
  • 19
-2

You're arrow is the same color as te background. You can positioning the background with background-position and with a negative left value it become outside the box:

Wouter J
  • 41,455
  • 15
  • 107
  • 112