wake-up-neo.com

Hintergrundbild wird nicht angezeigt

Ich versuche, Bilder, die auf der Website mit dem Tag angezeigt werden, in ein Hintergrundbild umzuwandeln. Mein erster Code sah so aus

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 versuche ich es so zu ändern:

Html

<p class= "house"> </p>

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 das Bild erscheint nicht! Jede Hilfe wird dankbar sein, Danke!

htmlcssbackgroundbackground-image
11
kduan

stellen Sie die Eigenschaft für die Hintergrundbildgröße ein

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

22
rand0m

setzen Sie Anführungszeichen um Ihre Bild-URL

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

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

2
user3037493

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

background-img: url("")

muss geändert werden in ..

background: url("")

Und mein Hintergrundmuster zeigte sich triumphierend.

2
haej

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

Nach viel Frustration stellte sich heraus, dass mein Problem damit zusammenhängt, dass das Bild nicht zugänglich ist ... Sie können Ihren Code immer mit einem anderen Bild auf einer anderen Website testen, auf die Sie sicherlich zugreifen können.

1
Damian Green