beate: Hintergrundbild

Beitrag lesen

SELF-Forum

Hintergrundbild

beate
– Informationen zu den Bewertungsregeln

Hallo an alle!

Vielen herzlichen Dank für die vielen Hinweise, ich glaube, sie haben mir das Leben gerettet! :-)

Ich habe jetzt die Variante CSS-Only Technique #1 von hier
http://css-tricks.com/perfect-full-page-background-image/

verwendet und sie um eine Angabe für min-width unter @media screen ergänzt. Überall noch die Werte ein wenig angepasst und funktioniert einwandfrei. Ist leider noch nicht online, drum kann ich es noch nicht zeigen, aber hier der Code:

  
<head>  
	<meta charset="utf-8">  
	  
	<title>Full Page Background Image | CSS #1</title>  
	  
	<style>  
		  
		img.front-bg {  
			/* Set rules to fill background */  
			min-height: 100%;  
			min-width: 1040px;  
			  
			/* Set up proportionate scaling */  
			width: 100%;  
			height: auto;  
			  
			/* Set up positioning */  
			position: fixed;  
			top: 0;  
			left: 0;  
		}  
		  
		  
		@media screen and (min-width: 900px) screen and (max-width: 1040px){  
			img.front-bg {  
				left: 50%;  
				margin-left: -520px;  
				}  
		}  
		  
		  
		#front-box {  
			position: relative;  
			width: 800px;  
			margin: 50px 15px auto;  
			padding: 20px;  
			background: none;  
			/* Schatten um die Box, hier nicht nötig*/  
			-moz-box-shadow: 0 0 20px black;  
			-webkit-box-shadow: 0 0 20px black;  
			box-shadow: 0 0 20px black; */  
		}  
		  
		.front-slogan {  
			margin-top: 125px;  
			padding-left: 10px;  
		}  
		  
		p {  
			font: 15px/2 Georgia, Serif;  
			margin: 0 0 30px 0;  
			text-indent: 40px;  
		}  
	</style>  
</head>  
  
<body>  
  
<img src="images/background-image_1040.jpg" class="front-bg">  
<div id="front-box">  
	<img class="front-image" src="images/header-object_new.png" />  
	<div class="front-slogan">  
		<div class="front-slogan-text">  
			<h2>Find other artists to collaborate with from all over the world.  
			</h2>  
		</div>  
	</div>  
	<div class="front-login">  
		<p>{loadposition loginhomenew}</p>  
		<h3>New to Community? <a href="index.php?option=com_comprofiler&amp;task=registers">Register here</a></h3>  
	</div>  
	<div class="front-footer">  
		<p>{loadposition loginfooter}</p>  
	</div>  
</div>  
	  
</body>

Vielen Dank und liebe Grüße
Beate

Beitrag melden
–
Informationen zu den Bewertungsregeln