CSS rubrique 1 image de fond

Question

J'ai cette image ici, je voudrais avoir comme image de fond pour h1http://inauguralseason.com/wp-content/themes/twentyeleven/images/wehavelaunched.png

Mon problème est de savoir comment puis-je obtenir la partie à gauche à comparaître? Voici mon code actuel CSS

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

J'aurais pensé que l'utilisation margin-left:-50px aurait travaillé, mais il n'a pas fait.

Answer 1

Vous spécifiez height: 36px; mais votre image a une hauteur de 86 pixels. Changez la taille à 86px et vous verrez le tout.

Si 36px est la hauteur correcte, vous pouvez changer la position de l'arrière-plan à la place.

background-position: left bottom;

Answer 2

faire ces changements

.homeBottom { 
position: relative; 
} 

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

Answer 3

Salut maintenant utilisé pour after dans votre css

comme comme celui-ci

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); 

} 

Démo http://tinkerbin.com/QTAO90R0

Answer 4

Vous pouvez également utiliser la propriété Background-size (CSS3). Dans lequel vous pouvez définir les width et height de l'image d'arrière-plan. Dans votre cas, si vous souhaitez définir le height de l'arrière-plan image identique à l'height de l'élément h1 donnent alors:

background-size:100% 36px; 

Voir le violon here.

Vous pouvez vérifier cette link pour que cette propriété fonctionne également dans les anciennes versions d'IE.