Szerintetek miért nem működik a háttérkép css-ben?
<!doctype html>
<html lang="hu-HU">
<head>
<title>Netflix katalógus 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style2.css">
<link rel="shortcut icon" href="image/favicon.png" type="image/x-icon">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<HEader>
<nav>
<input type="checkbox" name="" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Netflix</label>
<ul>
<li><a class="active" href="netflix.index.html">Főoldal</a></li>
<li><a href="https://www.netflix.com/browse">Netflix</a></li>
<li><a href="https://hbogo.hu/">Hbo</a></li>
<li><a href="https://www.hulu.com/welcome?orig_referrer=https%3A%2F%2Fwww.google.com%2F">Hulu</a></li>
<li><a href="https://tv.apple.com/hu?l=en">Apple Tv+</a></li>
</ul>
</nav>
</HEader>
<section>
</section>
</body>
----------------------------------------------------------------------
*{
padding: 0px;
margin: 0px;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
nav{
background-color: red;
height: 70px;
width: 100%;
}
label.logo{
color: white;
font-size: 35px;
line-height: 80px;
padding: 0px 100px;
font-weight: bold;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0px 5px;
}
nav ul li a{
color: white;
font-size: 17px;
text-transform: uppercase;
padding: 7px 13px;
border-radius: 3px;
}
a.active,a:hover{
background-color: black;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
@media (max-width: 952px){
label.logo{
font-size: 30px;
padding-left: 50px;
}
nav ul li a{
font-size: 16px;
}
}
@media (max-width: 858px){
.checkbtn{
display: block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: gray;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0px;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: green;
}
#check:checked ~ ul{
left: 0px;
}
}
section{
background-image: url(css/minion.jpg);
background-size: cover;
width: 1600px;
}
-------------------------------------------------------------------------
mappák:
HTML/ css/ style2.css
minion.jpg
image
netflix2.index.html
válasza:
válasza:A fő probléma az, hogy a webszerver a CSS-en keresztül a háttérképet az oldal css mappájának css almappájában keresi, miközben - ha jól értelmezem - az az oldal css mappájában került elhelyezésre.
Ha jól értelmezem, akkor a
background-image: url(css/minion.jpg);
sor helyére
background-image: url(/css/minion.jpg);
kellene, illetve hogy látszódjon is valami, a <section> elembe tartalmat érdemes rakni.
Mellesleg:
1. Tessék használni a kódmegosztó oldalakat - mint például a pestebin-t:
megtartja az indentálást és ad némi kódszínezést is
2. A <html> lang attribútumának nem kell "huhognia" elég egy szimpla "hu" is:
3. A Javascriptet érdemes az oldal aljára rakni:
4. Ha már van egy image mappa, a képeket érdemes oda rakni, és rá hivatkozni.
válasza:#4: Szívesen, legyen szép estéd!
Kérdező: a probléma továbbra is szerintem a nem megfelelő könyvtárstruktúrában leledzik.
Tegyük fel, hogy az alábbi könyvtárstruktúra adott:
és a webszerver a HTML könyvtárat tekinti gyökérkönyvtárnak.
Ha a CSS-ben a
background-image: url(css/minion.jpg);
sor szerepel, akkor a netflix2.index.html oldal lekérésekor a webszerver az alábbi naplóbejegyzéseket adja:
ugyanez mutatkozik a böngésző webfejlesztő eszköztárában:
a webszerver nem találja a gyökérkönyvtáron belül a css mappa css almappájában a minion.jpg-t.
Ha a CSS-ben kicseréljük a fennt említett sort:
background-image: url(/css/minion.jpg);
akkor a kép már elérhetővé válik:
bár - ha a section elemben nincs semmi - a böngészőben nem fog látszani:
ha már legalább egy nem törhető szóköz ( ) van benne, már mutatkozik benne valami:
válasza:Kapcsolódó kérdések:
Minden jog fenntartva © 2025, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!