HTML , CSS Frage

.SleY · 18. November 2012

Hallo, ich wollte meine Enterpage machen, aber habe folgenden fehler... Der Hintergrund wird nicht Angezeigt.
Hier mal Code:

index.html

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="/css/core.css" rel="stylesheet" />	
        <title>[DRP]Enterpage</title>
    </head>
	<body background="/images/background.png">
	</body>



</html>

Alles anzeigen

core.css

Code

/* CORE.CSS */
	.background{
		background-image:url('/images/background.png');
		background-repeat:no-repeat;
		border: none;
	}

maddin · 18. November 2012

Du musst in der CSS Datei den Pfad zum Bild relativ zur CSS Datei setzen. Also vermutlich erst aus dem CSS ordner raus, und dann in images.

CSS

background-image:url('../images/background.png');

//Edit: verdammt, garnich gesehn
da Du den hintergrund für die Klasse "background" setzt, musst du diese natürlich auch nutzen. Also entweder du machst es so, wie TutNichts sagt und setzt den Hintergrund direkt aufn body, oder aber du fügst deinem body-tag noch class="background" hinzu.

TutNichts · 18. November 2012

öhdödö?

mach folgendes in der CSS-Datei:

Code

body {
	background-image:url('/images/background.png');
	background-repeat:no-repeat;
	border: none;
}

und lass den Bodytag in der HTML Datei leer.

.SleY · 18. November 2012

Okay Klappt. Nur is unten an dem Bild jetzt ein 5 cm dicker breiter Rand, den ich in Photoshop nicht gemacht habe..
Wie schaffe ich das ?

LeijaT · 18. November 2012

im body { } deiner css noch

padding : 0px;
margin : 0px;

.SleY · 18. November 2012

Immernoch der Rand..
Hier mal ein Screenshot:

Das gelb makierte is der Rand

TutNichts · 18. November 2012

width & height auf 100% setzen würde ich sagen.

.SleY · 18. November 2012

Habe ich schon

LeijaT · 18. November 2012

Ich behaupte einfach mal, das Bild ist nicht groß genug um den kompletten Schirm zu füllen?

Jony · 18. November 2012

Zitat von TutNichts

width & height auf 100% setzen würde ich sagen.

Bitte diesem Ratschlag nicht folgen! Lass die Breite und die Höhe einfach leer, so passt es sich immer Dynamisch dem Browserfenster an.

Das Problem wird sein, dass Dein Bild zu klein ist. Du hast jetzt zwei Möglichkeiten dieses "Problem" zu lösen.

Du lässt das Bild mit einer angemessenen Farbe auslaufen
oder Du nimmst ein größeres Bild

.SleY · 18. November 2012

kay

Jony · 18. November 2012

Das Problem ist einfach, dass Du niemals ein Bild für alle Auflösungen von 1024x7... bis FULL HD für alle schön Anpassen kannst. Deswegen musst Du immer (im Idealfall) vom kleinstmöglichen Bildschirm ausgehen und die Website an diese Anpassen. So hast/wirst Du nie Probleme bekommen
(Du kannst natürlich auch für jede Auflösung eine spezielle Stile.css laden, wovon ich Dir aber wegen dem Aufwand abraten würde ;-))

TutNichts · 18. November 2012

ich dachte es handelt sich um mehrere Bilder, hab ich nicht drauf geachtet. Weil sonst hättest du das "bepunktete" Bild repeaten können.

breadfish.de 11. März 2022