Warum wird ein Hintergrundbild nicht in einem Div-Container angezeigt?

-1

Ich versuche, einen Div-Container zu erstellen. Ich muss ein transparentes Bild als Hintergrund verwenden, ein getrenntes Bild im Div und etwas Text einschließen. Ich bin doind wie folgt zusammen:Warum wird ein Hintergrundbild nicht in einem Div-Container angezeigt?

div { 
 
    width: 500px; 
 
    height: 500px; 
 
    background-image: url('explore_block.png'); 
 
}

<div> 
 
    <img src="img_girl.jpg" alt="icon"> 
 
    <p>This paragraph has its own background color.</p> 
 
</div>

Ich bin mir bewusst, wie Sie den Hintergrund setzen, weil ich schon exisitng quesion geprüft. Das Problem hier ist, dass selbst ich denke, ich mache es richtig, der Hintergrund erscheint nicht. Der Pfad des Bildes ist korrekt, ich habe das schon getestet. Könnten Sie mir helfen? Danke! :)

Quelle

2017-11-24 Vanina Yordanova

die ' '' zuerst entfernen und versuchen, wenn nicht 'entfernen -img' –

auch Was? Du hast den Beitrag vor 27 Minuten bearbeitet und @sutemeny Andras hat vor 24 Minuten geantwortet .. aber dein Code funktioniert gut ... kein Fehler .. warum hast du seine Antwort akzeptiert ... ?? –

Was soll ich machen? –

Es ist einfach. Sie haben nach dem Hintergrundbild einen doppelten Doppelpunkt hinterlassen. ;) Es funktioniert jetzt.

<head> 
    <style> 
    div { 
     width:500px; 
     height:500px; 
     background-image: url('explore_block.png'); 
    } 
    </style> 
    </head> 


<body> 
<div> 
<img src="img_girl.jpg" alt="icon"> 
<p>This paragraph has its own background color.</p> 
</div> 
</body> 


</html>

Quelle

2017-11-24 11:57:44

was? @Vanina Yordanova hat den Beitrag vor 27 Minuten bearbeitet und du hast vor 24 Minuten geantwortet .. aber Vanina Yordanova Code funktioniert gut .. nichts zu korrigieren .. er hat deinen Antwortpartner akzeptiert !! lol: O :( –

Frage ist die Antwort! lol: '( –

:) yeah. du hast Recht! –

Tricky ein, könnten Sie versuchen

background-size: cover

Siehe verwenden, wie das geht, ist es schwer, ohne eine visuelle Darstellung zu sehen :)

Quelle

2017-11-24 11:58:28

Ger los ' innen url auch -img

div { 
    width: 500px; 
    height: 500px; 
    background: url(explore_block.png); 
}

Arbeits Geige: https://jsfiddle.net/9acajpkk/2/

Quelle

2017-11-24 11:59:59

mit/ohne (Apostroph)' 'auch funktioniert .. weißt du das nicht? –

Versuchen Sie, die folgende CSS zu Ihrem div hinzufügen.

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

div { 
 
    width: 500px; 
 
    height: 500px; 
 
    background-image: url("explore_block.png"); 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
}

<div> 
 
    <img src="img_girl.jpg" alt="icon"> 
 
    <p>This paragraph has its own background color.</p> 
 
</div>

Quelle

2017-11-24 12:00:47 Granny

Ihre HTML und CSS funktioniert .. geben Pfad rechts Bild und erneut überprüfen.

mit/ohne (Apostroph) ' ' auch funktioniert es ..

Arbeits Jsfiddle

https://jsfiddle.net/klakshman318/koh7dx5z/1/

Quelle

2017-11-24 12:01:37

Frage lesen er tat in 'css' –

https://jsfiddle.net/klakshman318/koh7dx5z/1/ –

Try this: 
<html> 
<head> 
<style type="text/css"> 
div { 
    width: 500px; 
    height: 500px; 
    background-image: url('backgroundimg.jpg'); 
} 
</style> 
</head> 
<body> 
<div> 
    <img src="logo.jpg" alt="icon"> 
    <p>This paragraph has its own background color.</p> 
</div> 
</body> 
</html>

Quelle

2017-11-24 12:08:19

Warum wird ein Hintergrundbild nicht in einem Div-Container angezeigt?

Antwort

Verwandte Themen