Hintergrundbild wird nicht angezeigt (HTML)

Ich kann das Hintergrundbild nicht anzeigen. Ich dachte, das Hinzufügen der minimalen Breite könnte das Bild sichtbar machen, falls es wirklich klein ist, aber das hat nicht funktioniert. Ich habe die URL überprüft. Es funktioniert wie ein normales Bild, wenn es direkt in den Körper gelegt wird.Hintergrundbild wird nicht angezeigt (HTML)

HTML:

<!DOCTYPE html> 
<html> 
<head> 
<link rel = stylesheet href = Father.css> 
<title> Very Important Company </title> 
</head> 
<body> 
<div id = backs </div> 
<div class = header> 
<p> 
<img src = http://www.unixstickers.com/image/data/stickers/opensuse/Opensuse-logo-wob.sh.png id = gecko> 
</p> 
<div class = navigation> 
<ul> 
<li> SHOP </li> 
<li> ABOUT US </li> 
<li> RENTALS </li> 
<li> CONTACT </li> 
<li> PARTIES </li> 
</ul> 

</div> 
</div> 
<p> 
<div class = main> 
<p1> Our Eggs 
</p1> 
</div> 
</body>  
</html>

CSS:

* { 
    margin: 0; 
    padding: 0; 
} 

#backs { 
    background: white; 
    } 

#gecko { 
    content:url(http://www.unixstickers.com/image/data/stickers/opensuse/Opensuse-logo-wob.sh.png); 
height: 128px; 
width: 128px; 
position: relative; 
float: left; 
margin-left: 10px; 
} 

ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
display: inline; 
} 

li { 
display: inline; 
padding-left: 50px; 
min-width: 100% 
} 

.navigation { 
color: black; 
letter-spacing: 2px; 
float: right; 
vertical-align: top; 
width: 800px; 
height: 70px; 
margin-top: 47px; 
min-width:800px; 
padding-left: 150px; 
position: absolute; 
} 


.main { 
color: black; 
font-size: 60px; 
position: relative; 
top: 150px; 
background-image: url (http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg); 
min-width: 100%; 
height: 900px; 
border: 2px solid red; 
padding-top: 100px; 
}

Quelle

2017-02-08 jeepers mcface

Sie sollten Zitate um Ihre Attribute, dh verwenden. '' – haxxxton

PS. 'content:' sollte wahrscheinlich nicht mit einem 'img' Tag verwendet werden – haxxxton

Sie haben viele Syntaxfehler. Bitte beheben Sie diese und es wird funktionieren –

Das Format für den Pfad zu einem Bild in background-image ist url(...) nicht url (...)

So sollte Ihre Linie

background-image: url(http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg);

Quelle

2017-02-08 05:06:42

ist dies Ihre css

.main { 
color: black; 
font-size: 60px; 
position: relative; 
top: 150px; 
background-image: url (http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg); 
min-width: 100%; 
height: 900px; 
border: 2px solid red; 
padding-top: 100px; 
}

Sie Raum zwischen url und (http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg); im background-image: haben. Entfernen Sie den Speicherplatz und es sollte funktionieren.

Quelle

2017-02-08 05:31:27 azri

Ich glaube, Sie bakground-image Eigenschaft verwenden sollten, anstatt content

background-image:url(http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg);

Quelle

2017-02-08 05:33:57 shyamm

Hallo entfernen Sie einfach den Raum vor background-image:url und überprüfen Sie es dann (Code wie unten) und schließen Sie die div Tag in <div id=backs> </div>

background-image: url(http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg);

Quelle

2017-02-08 05:39:12

-1

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#backs { 
 
    background: white; 
 
    } 
 

 
#gecko { 
 
    content:url(http://www.unixstickers.com/image/data/stickers/opensuse/Opensuse-logo-wob.sh.png); 
 
height: 128px; 
 
width: 128px; 
 
position: relative; 
 
float: left; 
 
margin-left: 10px; 
 
} 
 

 
ul { 
 
list-style-type: none; 
 
margin: 0; 
 
padding: 0; 
 
display: inline; 
 
} 
 

 
li { 
 
display: inline; 
 
padding-left: 50px; 
 
min-width: 100% 
 
} 
 

 
.navigation { 
 
color: black; 
 
letter-spacing: 2px; 
 
float: right; 
 
vertical-align: top; 
 
width: 800px; 
 
height: 70px; 
 
margin-top: 47px; 
 
min-width:800px; 
 
padding-left: 150px; 
 
position: absolute; 
 
} 
 

 

 
.main { 
 
    background: rgba(0, 0, 0, 0) url("http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg") repeat scroll 0 0; 
 
    border: 2px solid red; 
 
    color: black; 
 
    font-size: 60px; 
 
    height: 900px; 
 
    min-width: 100%; 
 
    padding-top: 100px; 
 
    position: relative; 
 
    top: 150px; 
 
}

<div id ="backs"></div> 
 
<div class ="header"> 
 
<p> 
 
<img src = "http://www.unixstickers.com/image/data/stickers/opensuse/Opensuse-logo-wob.sh.png id = gecko" alt=""> 
 
</p> 
 
<div class ="navigation"> 
 
<ul> 
 
<li> SHOP </li> 
 
<li> ABOUT US </li> 
 
<li> RENTALS </li> 
 
<li> CONTACT </li> 
 
<li> PARTIES </li> 
 
</ul> 
 

 
</div> 
 
</div> 
 

 
<div class ="main"> 
 
<p1> Our Eggs 
 
</p1> 
 

 
</div>

Quelle

2017-02-08 05:41:26

Hintergrundbild wird nicht angezeigt (HTML)

Antwort

Verwandte Themen