Hallo CSS-Elite,
ich spiele manchmal gern mit Code rum (thihihi) und versuche mich gerade an CSS.
Ich komme eigentlich auch mit allem gut zurecht. Nur habe ich scheinbar ein Problem mit den Pfadangaben für Bilder bei CSS. Wenn ich Bilder via HTML einfüge, is alles gut. Nur bei CSS mache ich irgendwas falsch. Es liegt an meiner Ordnerstruktur oder an meiner Pfadangabe in CSS. Ganz bestimmt.
Hier das Verzeichnis meines Bildes:
C:\Users\Markus\Documents\HTML_CSS\testsite\web\img\strandlosorganos.jpg
Bild ist 960 x 720 px groß
Ordnerstruktur:
Ordner testsite
Unterordner "web" und "dok"
im Unterordner "web": Ordner img, Ordner css, index.html
im Ordner css: style.css
im Ordner img: strandlosorganos.jpg
Zur Veranschaulichung hilft evtl. auch die Verzeichnisangabe oben.
Hier mein Code:
HTML:
<!doctype html>
<html lang="de">
<head> <!-- Seitentitel und Charset -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"> <!-- Sonderzeichen -->
<meta name="viewport" content="width=device=width, initial-scale=1.0">
<title>Website2</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"> <!--- Import CSS-Stylesheet -->
</head>
<body>
<div id="banner">Funny Streetarts</div>
</body>
</html>
CSS:
* {
margin:0 auto;
padding:0;
font-family:arial;
font-size: 20px;
}
#banner {
margin:0 auto;
background-color:grey;
width:1000px;
height:1000px;
background-image: url(img\strandlosorganos.jpg);
}
Ich hoffe, mit diesen Infos könnt Ihr arbeiten und mir helfen. Momentan zeigt es mir das graue Div mit der Schrift in 1000 x 1000 px an.
Das Bild lädt er einfach nicht.
Ich verwende übrigens Visual Studio Code als Entwicklungsumgebung. Könnt Ihr mir was anderes empfehlen (für Beginner. Eclipse oder so wären überdimensioniert für mich). Was haltet Ihr z.B. von Brackets?
Vielen Dank schon mal für Eure Antworten.
ich spiele manchmal gern mit Code rum (thihihi) und versuche mich gerade an CSS.
Ich komme eigentlich auch mit allem gut zurecht. Nur habe ich scheinbar ein Problem mit den Pfadangaben für Bilder bei CSS. Wenn ich Bilder via HTML einfüge, is alles gut. Nur bei CSS mache ich irgendwas falsch. Es liegt an meiner Ordnerstruktur oder an meiner Pfadangabe in CSS. Ganz bestimmt.
Hier das Verzeichnis meines Bildes:
C:\Users\Markus\Documents\HTML_CSS\testsite\web\img\strandlosorganos.jpg
Bild ist 960 x 720 px groß
Ordnerstruktur:
Ordner testsite
Unterordner "web" und "dok"
im Unterordner "web": Ordner img, Ordner css, index.html
im Ordner css: style.css
im Ordner img: strandlosorganos.jpg
Zur Veranschaulichung hilft evtl. auch die Verzeichnisangabe oben.
Hier mein Code:
HTML:
<!doctype html>
<html lang="de">
<head> <!-- Seitentitel und Charset -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"> <!-- Sonderzeichen -->
<meta name="viewport" content="width=device=width, initial-scale=1.0">
<title>Website2</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"> <!--- Import CSS-Stylesheet -->
</head>
<body>
<div id="banner">Funny Streetarts</div>
</body>
</html>
CSS:
* {
margin:0 auto;
padding:0;
font-family:arial;
font-size: 20px;
}
#banner {
margin:0 auto;
background-color:grey;
width:1000px;
height:1000px;
background-image: url(img\strandlosorganos.jpg);
}
Ich hoffe, mit diesen Infos könnt Ihr arbeiten und mir helfen. Momentan zeigt es mir das graue Div mit der Schrift in 1000 x 1000 px an.
Das Bild lädt er einfach nicht.
Ich verwende übrigens Visual Studio Code als Entwicklungsumgebung. Könnt Ihr mir was anderes empfehlen (für Beginner. Eclipse oder so wären überdimensioniert für mich). Was haltet Ihr z.B. von Brackets?
Vielen Dank schon mal für Eure Antworten.
Zuletzt bearbeitet:
