Fullscreen Background

11. Januar 2015 -13:11 0 Lydia

Einmal wollte ich ein Fullscreen Background Layout für Abermals erstellen. Damals hatte ich mit einen JS-Plugin das Problem gelöst. Aber das ganze geht auch viel einfacher. Und zwar hab ich den Code bei CSS-Tricks gesehen. Dort wird das ganze ganz einfach mit einem CSS-Code geregelt. Ich möchte hiermit einfach nur dieses Methode verbreiten. Hinzukommt das ich noch einen Decker erstellt habe, der sozusagen das Bild wie gewünscht abschwächt, bzw. einfärbt. Damit muss man nicht unbedingt Photoshop öffnen wenn man mal die Deckkraft bzw. Sättigung ändern will wie man möchte.

Demo anschaun
DEMO 1 // HTML Code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dein Title</title>
    <!-- DEINE CSS DATEIEN -->
</head>

<body>
    <section>
    <!-- Hier kommt dein Text hin -->
    </section>
</body>
</html>

DEMO 1 // CSS Code
html{
	background-image: url(../img/fullscreenbackground-bild.png);
	background-position:center;
	background-repeat:no-repeat;
	background-attachment:fixed;
	
	-webkit-background-size: cover;
  	-moz-background-size: cover;
 	-o-background-size: cover;
 	background-size: cover;
	
		
	/*
	Background Eigenschaften in einer Zeile
	background: url(demo5-bild.png) no-repeat center center fixed;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
 	-o-background-size: cover;
 	background-size: cover;*/
}
DEMO 2 // HTML Code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dein Title</title>
    <!-- DEINE CSS DATEIEN -->
</head>
<body>
    <div class="intro">
        <header>
              <!-- Hier kommt dein Introbereich hin -->
        </header>
    </div>
    <section>
    <!-- Hier kommt dein Text hin -->
    </section>
</body>
</html>

DEMO 2 // CSS Code
html, body, .intro{
	height: 100%; 
	min-height: 100%; 
	
}

.intro{
	background: url(../img/fullscreenbackground-bild-2.png) no-repeat center center;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
 	-o-background-size: cover;
 	background-size: cover;
	margin:0;
	padding:0;

}

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.