Background-color

DerSaboteur · 09/05/2015, 15:02

Hey Epvper

Hab da ein kleines problem ich möchte das mein Background auf der seite halb schwarz und halb weiß ist.. das habe ich soweit hin bekommen mit..

Code:

body {
    background: linear-gradient(90deg, white 50%, black 50%);
}

so dies sollte eig nur die height von 150px haben und danach wieder komplett weiß..

Mfg DerSaboteur

€dit: HTML und CSS code bisher

HTML :

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Thomas-Photography</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head><body>
<div id="wrapperarea">
    <div id="header">
        <a href="index.htm"><img src="img/header.png" alt="img_header" /></a>
    </div>
</div>
</body></html>

CSS:

Code:

@charset "utf-8";
* {
    margin: 0px;
	padding: 0px;
	font-family: Georgia;
	font-size: 12px;
	line-height: 1.5;
}
body {
    background: linear-gradient(90deg, white 50%, black 50%);
}

#wrapperarea {
	width: 1017px;
	margin-right: auto;
	margin-left: auto;
}
#wrapperarea #header {
 height: 750px;
}

sven12345 · 09/05/2015, 15:28

im Moment gibts du ja deinem Body den gradient als Eigenschaft, der Body umschließt den gesamten Content weshalb die komplette Seite den Hintergrund bekommt. Außerdem ist auch noch gar keine Höhe in deinem css definiert, am besten du versuchst mal den background auf den header zu legen und eine Höhe zu definieren.

DerSaboteur · 09/05/2015, 15:34

Das problem ist das ich den header in dem #wrapperarea habe damit die seite quasi immer auf 1017px bleibt.. setze ich den header aus dem div container #wrapperarea schiebt sich das bild nach links und wenn ich es mittig ausrichte muss ich es einem width geben.. und dann bekomme ich trz. nicht das was ich will.. habe auch schon mind. 2 jahre nichts mehr mit html und css allgemein homepages gemacht..

sven12345 · 09/05/2015, 16:41

dann mach einfach ein div drüber außerhalb von der wrapperare mit width: 100% (position: absolut), dem gradient und der höhe, dann sollte das gehen - falls nicht kann sein das du ein bisschen mit dem z-index rumspielen musst

DerSaboteur · 09/05/2015, 18:17

also ich hab das jetzt so wie ich es haben wollte.. hab jetzt einfach um das img. ein <center> gesetzt was ich eig vermeiden wollte..

.SkyneT. · 09/05/2015, 19:38

Quote:

Originally Posted by DerSaboteur

also ich hab das jetzt so wie ich es haben wollte.. hab jetzt einfach um das img. ein <center> gesetzt was ich eig vermeiden wollte..

Nur zur Beruhigung, die seite "google.com" verwendet auch <center> tags