Responsives Webdesign

JeffDavis · 27. Juni 2017

Hallo Leute,

ich habe ein kleines Problem mit meinem Hintergrundbild.
Es hat zuvor schon einmal geklappt, nur habe ich dann die Dateien versehentlich überschrieben (ich Tollpatsch :D).
Nun habe ich das Problem, dass das Hintergrundbild nicht angezeigt wird, obwohl in Adobe Dreamwaver alles richtig angezeigt wird, der Stylesheet mit meiner html Datei verknüpft ist und das Bild auch aufgrerufen wird

Hier die Codes:

HTML

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Robada County-Roleplay</title>
<link href="css/background.css" rel="stylesheet">
</head>


<body>
<div class="backgroundimg">
</div>
<div class="header">
	<h1>Willkommen auf <b style="color: #b97027">Robada County</b> - Roleplay!</h1>
	<p>
		Unser Forum wurde vom Entwickler in den Wartungsmodus gesetzt.<br>
		Grund:<br>
		Bitte habe etwas Geduld, das Forum steht bald wieder zur Verfügung.<br><br>
		Weitere Informationen kannst du bei uns im Teamspeak unter ip abholen<br>
		DEIN <b style="color: #b97027">Robada County</b>-Rroleplay Team!
	</p>
</div>
</body>
</html>

Alles anzeigen

CSS

@charset "utf-8";
/* CSS Document */


.backgroundimg{
	background: url(background.jpg) no-repeat;
	background-size: auto;
}

Dateipfade:

..\css\background.jpg
..\css\background.css

Mein Background image: http://fanaru.com/gta-v/image/…-v-gta-v-wallpaper-19.jpg

Kommt da einer drauf, was ich falsch gemacht habe? Weil ich habe mir gerade 2 Stunden den Kopf zerbrochen, was ich falsch gemacht habe, aber finde nichts.

Fancy · 27. Juni 2017

Verlinkung ist eventuell falsch? Guck mal mit Firebug nach.

Dazu für ein Responsive Design fehlt noch das wichtigste

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">

JeffDavis · 27. Juni 2017

Danke,

Zitat von Fancy

Dazu für ein Responsive Design fehlt noch das wichtigste

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Danke, sehr nett, wird jetzt immer in meinem HTML Code dabei sein

Verlinkung ist nicht falsch, habe nun den ursprünglichen Link verwendet, alles mit Firebug überprüft, aber es wird kein Fehler angezeigt o.0
Das Witzige ist, dass Firebug bei meiner Bildverlinkung einen Fehler anzeigt aber Adobe DW nicht

Fancy · 27. Juni 2017

Adobe DW ist eh nichts gutes vilt fürn Anfang aber sonst ist das dreck meiner Meinung nach

Hast du vilt Teamviewer? so könnte ich den Fehler mir besser beheben.

JeffDavis · 27. Juni 2017

Hätte ich, ja

update:

Wenn ich im div <div class=""backgroundimg> </div>

etwas reinschreibe, wie z.B. <br><br>.....

dann wird das Bild langsam sichtbar o.0 was ich irgendwie nicht verstehe. Normalerweise sollte es sich auf der ganzen Website anzeigen und zwar als Hintergrundbild, aber derzeitig zeigt es sich als normales Bild an.

Headscracher · 27. Juni 2017

Zitat von Aktin

Wenn ich im div <div class=""backgroundimg> </div>

etwas reinschreibe, wie z.B. <br><br>.....

dann wird das Bild langsam sichtbar o.0 was ich irgendwie nicht verstehe. Normalerweise sollte es sich auf der ganzen Website anzeigen und zwar als Hintergrundbild, aber derzeitig zeigt es sich als normales Bild an.

wieso sollte ein Hintergrundbild, welches du einem Div ohne Inhalt zuweist über die gesamte Seite angezeigt werden.
Du kannst entweder das Bild dem Body zuweisen

Code

@charset "utf-8";
/* CSS Document */
body{
background: url(background.jpg) no-repeat;
background-size: auto;
}

oder dem entsprechenden Div auch wirklich einen Inhalt geben

Code

<body>
<div class="backgroundimg">
<div class="header">
	<h1>Willkommen auf <b style="color: #b97027">Robada County</b> - Roleplay!</h1>
	<p>
		Unser Forum wurde vom Entwickler in den Wartungsmodus gesetzt.<br>
		Grund:<br>
		Bitte habe etwas Geduld, das Forum steht bald wieder zur Verfügung.<br><br>
		Weitere Informationen kannst du bei uns im Teamspeak unter ip abholen<br>
		DEIN <b style="color: #b97027">Robada County</b>-Rroleplay Team!
	</p>
</div>
<div class="content">
 Nur als Beispiel
</div>
</div>
</body>

Alles anzeigen

JeffDavis · 27. Juni 2017

Habs nun gelöst bekommen.

Code

body{
	background-image: url(bg.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-color: burlywood
}

Danke für die Antworten.

LG Aktin

breadfish.de 12. März 2022