ne rend pas

Question

Je suis en train de créer un bloc de citation comme dans l'image ci-dessous:

http://www.norrislakevillas.com/images/block-quote-sample.png

Les guillemets sont assis dans le coin en bas à droite d'un 50 X 45 px transparent Image PNG avec 10 pixels d'espacement en haut et à gauche.

L'élément est rendu correctement à l'exception de l'image d'arrière-plan, il n'apparaîtra tout simplement pas.

Code CSS:

#block_quote{ 
    float:left; 
    width:400px; 
    background:#f7f7f7; 
    background-image:url(images/quote-top.png) left top no-repeat; 
    margin:50px 0 100px 53px; 
    border:1px solid #ccc; 
} 

#block_quote p{ 
    font:italic 14px segoe ui, arial, sans-serif; 
    color:#5f5f5f; 
    line-height:1.4em; 
    margin:0; 
    padding:20px 15px 20px 60px; 
} 

Toutes les idées pourquoi l'image est rendu?

Merci

Answer 1

Votre chemin de l'image doit être par rapport au fichier CSS. De plus, il ne s'agit que d'un arrière-plan et non d'une image de fond si vous utilisez toutes les déclarations sur une ligne et que l'ordre à la fin est no-repeat top left.

arrière-plan: url (images/quote-top.png) non-répétition en haut à gauche;

Answer 2

background est une "propriété raccourcie" qui définit toutes les propriétés d'arrière-plan, y compris l'URL de l'image. La façon dont vous l'écrivez, il ne spécifie pas une image, seulement une couleur.

Donc, ne confondez pas background et les propriétés d'arrière-plan individuelles comme background-image. Il devrait être soit

background:#f7f7f7 url(images/quote-top.png) no-repeat left top; 

ou

background-color:#f7f7f7; 
background-image:url(images/quote-top.png); 
background-repeat:no-repeat; 
background-position:left top; 

mais pas une combinaison de ces; cela va confondre le navigateur.