CSS Fragen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

David 234567

Neues Mitglied
20 Mai 2021
2
0
1
21
Guten Tag, ich hätte da eine Frage ich will ein Hintergrundbild mit Css auf meiner Webseite einbinden aber es funktioniert nicht. Ich versuche schon seit mehreren Tagen es zu beheben aber der CSS Editor zeigt nur dass an. Meine Css Datei ist folgendermaßen aufgebaut:
<html>
<head>
<title>Bild auf ganzen Hintergrund aufspannen</title>

<style type="text/css">
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
}

body {
font-family:sans-serif;
}

#hintergrund {
position:absolute;
width:100%;
height:100%;
z-index:1;
}

#scrollbereich {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:auto;
z-index:2;
}

#inhalt {
padding:20px 100px 30px 200px;
z-index:2;
}

</style>

</head>
<body>
<div>
<img id="hintergrund" src="file:///E:/Schulordner%202/HTML%20Essentials/Programmierformeln/Firma/images/Fließen.jpg" alt="" title="" />
</div>

<div id="scrollbereich">
<div id="inhalt">
<h1>Bild auf ganzen Hintergrund aufspannen</h1>

<p>Eine Variante, um ein Bild auf den kompletten Hintergrund aufzuspannen. Jetzt die Fenstergröße im Browser varrieren!</p>

<p>Für das wie einfach in den Quellcode sehen :)</p>

<p>zurück zum <a href="https://www.html-seminar.de">HTML-Seminar</a></p>

</div>
</div>

</body>
</html>
Schon mal vielen Dank für eure Antworten.
 

Anhänge

  • Css Datei.PNG
    Css Datei.PNG
    20,5 KB · Aufrufe: 5

basti1012

Senior HTML'ler
26 November 2017
1.593
173
63
Minden
basti1012.de
Meine Css Datei ist folgendermaßen aufgebaut:
Das ist eine HTML Datei und keine CSS Datei.
Laut deiner Fehler hast du wahrscheinlich alles in der CSS eingebunden.
In der CSS soll nur das zwischen <style type="text/css"> und </style> rein.( das type="text/css" kann auch gelöscht werden )
Außerdem funktioniert dein Bild auch nur auf deinen Rechner , sobald du das Online stellst funktioniert dein Pfad nicht mehr
 

David 234567

Neues Mitglied
20 Mai 2021
2
0
1
21
Meinst du ich soll diese Zeile <img id="hintergrund" src="file:///E:/Schulordner%202/HTML%20Essentials/Programmierformeln/Firma/images/Fließen.jpg" zwischen <style type="text/css"> und </style> reinschreiben?
 

basti1012

Senior HTML'ler
26 November 2017
1.593
173
63
Minden
basti1012.de
Nein.
Du erstellst eine HTML Datei und nennst sie z. B. index.html mit dem Inhalt
HTML:
<!doctype html>
<html lang="de">
<head>
<title>Bild auf ganzen Hintergrund aufspannen</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<img id="hintergrund" src="Fliessen.jpg" alt="" title="" />
</div>
<div id="scrollbereich">
<div id="inhalt">
<h1>Bild auf ganzen Hintergrund aufspannen</h1>
<p>Eine Variante, um ein Bild auf den kompletten Hintergrund aufzuspannen. Jetzt die Fenstergröße im Browser variieren!</p>
<p>Für das wie einfach in den Quellcode sehen :)</p>
<p>zurück zum <a href="[URL='https://www.html-seminar.de/']https://www.html-seminar.de[/URL]">HTML-Seminar</a></p>

</div>
</div>

</body>
</html>
Dann erstellst du eine CSS Datei mit den Namen style.css mit dem Inhalt
CSS:
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
}

body {
font-family:sans-serif;
}

#hintergrund {
position:absolute;
width:100%;
height:100%;
z-index:1;
}

#scrollbereich {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:auto;
z-index:2;
}

#inhalt {
padding:20px 100px 30px 200px;
z-index:2;
}
Die beiden Dateien und das Bild (mit den Namen Fliessen.jpg) lädst du auf deiner Homepage hoch (alles in ein Ordner).

Dann rufst du die Indexdatei über den Browse auf und du solltest das alles sehen.
Danach kannst du versuchen das Bild, als Hintergrund einzubinden.
Ich denke aber erstmal sollte das klappen, weil ich denke, dass du da was komplett falsch machst, mit den ganzen einbinden.
Also versuche es erstmal so wie ich schrieb.
Wenn es nicht klappt, poste den Link zur Seite.
 
Zuletzt bearbeitet:
Werbung:

Neueste Beiträge