2013-12-07 36 views
8

Ich versuche, Bilder, die auf der Website erscheinen, mithilfe des Tags in ein Hintergrundbild umzuwandeln. MEIN erster Code sah aus wie diesesHintergrundbild wird nicht angezeigt

Html:

<img class= "house" src="images/House-03.png" width="122px" height="118px"/> 

CSS

.house { 
display:block; 
position:absolute; 
float:right; 
bottom:0; 
right:0; 

}

Jetzt es so versuche ich zu ändern:

Html

CSS

.house { 
    display:block; 
    position:absolute; 
    background-image:url(../images/House-03.png); 
    width:122px; 
    height:148px; 
    float:right; 
    bottom:0; 
    right:0; 
} 

Außer dem Bild erscheint nicht! Jede Hilfe wird geschätzt, Danke!

+0

Entfernen Sie den Raum vor dem "Haus". Sie müssen kein absolut positioniertes Element schweben lassen. – Christina

+0

Ihr Code ist in Ordnung, überprüfen Sie einfach die Bild-URL – mdesdev

+0

Können wir Ihren Website-Baum sehen, um sicher zu gehen, dass Ihre Bild-URL korrekt ist? –

Antwort

18

versuchen, die Hintergrundbildgröße-Eigenschaft

.house { 
    display:block; 
    position:absolute; 
    background:url(../images/House-03.png); 
    background-repeat:no-repeat; 
    background-size: 100% 100%; 
    width:122px; 
    height:148px; 
    float:right; 
    bottom:0; 
    right:0; 
} 

hoffe, das hilft?

+0

das hat funktioniert! Vielen Dank! – kduan

2

Put Anführungszeichen um Ihre Bild-URL

background-image:url("../images/House-03.png"); 

ETA: pro Kommentar unten ... Zitate sind in der Tat nicht erforderlich! habe es hier nur erwähnt, um die ursprüngliche Frage zu beheben.

+0

oops Ich habe die Anführungszeichen in meinen Code eingefügt. Ich habe vergessen, sie in meine Frage zu stellen. – kduan

+0

o ja, wenn Sie möchten, dass der Hintergrund vollständig angezeigt wird, müssen Sie die Hintergrundbildgröße einstellen, wie rand0m oben sagt. – user3037493

+1

Zitate sind nicht notwendig – Tom

1

Stellen Sie sicher, dass Ihr Bild zugänglich ist!

Nach einer Menge Frustration stellte sich heraus, dass mein Problem damit zu tun hatte, dass das Bild nicht zugänglich war ... Sie können Ihren Code immer mit einem anderen Bild auf einer anderen Website testen, die sicher zugänglich ist ...

1

Ich persönlich hatte die Pfadnamen und URL-Syntax korrekt. Das einzige Problem war

background-img: url("") 

benötigt geändert werden, um ..

background: url("") 

Und mein Hintergrundmuster zeigte sich triumphierend.

Verwandte Themen