CSS heading 1 background image

Question

I have this image here I would like to have as my background image for h1 http://inauguralseason.com/wp-content/themes/twentyeleven/images/wehavelaunched.png

My problem is how do I get the part to the left to appear? Here is my current CSS code

.homeBottom h1 {
    background-image: url("http://inauguralseason.com/wp-content/themes/twentyeleven/images/wehavelaunched.png");
    color: #FFFFFF;
    height: 36px;
    margin-left: -50px;
    width: 589px;
}

I would have thought use margin-left:-50px would have worked, but it did not.

Answer 1

You specify height: 36px; but your image is 86px high. Change height to 86px and you'll see the whole thing.

If 36px is the correct height, you can change the background position instead.

background-position: left bottom;

Answer 2

make these changes

.homeBottom {
position: relative;
}

.homeBottom h1 {
position: absolute;
left: -50px;
top: /* give as per required */
}

Answer 3

Hi now used to after in your css

as like this

HTML

<h1>Hello testing page </h1>

Css

h1{
background:red;
  padding-left:20px;
  position:relative;
  height:40px;
  line-height:40px;
}
h1:after{
content:'';
  position:absolute;
  left:6px;
  top:18px;
  background:green;
  width:30px;
  height:30px;
z-index:-1;
/* Firefox */
-moz-transform: rotate(-65deg);
/* Safari */
-webkit-transform: rotate(-65deg);

/* IE */
-ms-transform: rotate(-65deg);

/* Opera */
-o-transform: rotate(-65deg);

}

demo http://tinkerbin.com/QTAO90R0

Answer 4

You can also use Background-size property (CSS3). In which you can set the width and height of the background-image. In your case, if you want to set the height of the background-image same as the height of the h1 element then give:

background-size:100% 36px;

See the fiddle here.

You can check this link for making this property work in older versions of IE too.