Wie erzeuge einen skalierbaren Hintergrund?

muplo

muplo

Aktives Mitglied
Thread Starter
Dabei seit
19.12.2007
Beiträge
1.167
Reaktionspunkte
37
Hallo,

also ich habe schon den Anfang gemacht und auf meinem Computer (15"Mbp), dem Computer (13"Mbp) meines Mitbewohners und dem Computer (27" iMac) meines Nachbars wird die Seite korrekt dargestellt. Also vorgesehen war, dass sich das Hintergrundbild an die Größe des Browserfensters anpassen soll. Nun meint mein Auftraggeber, dass die Seite bei Ihm nicht korrekt dargestellt wird , also oben und unten der Hintergrund abgeschnitten wird (Anhang)
Hinzu meinte er noch "…das Bild sollte eher so hoch wie das Browserfenster sein, und ggf. an den Seiten beschnitten werden.
Beim Internetexplorer 9.0.8 sieht man gar nichts…"

Der Link zur Seite lautet www.plakartive.de

und der Quelltest sieht wie folgt aus:

HTML: 
<html>
<head>
<title>Plakartive Bielefeld 2012</title>
<style>

html {
	background: url(img/bewegung-4.gif) repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

</style>
</head>
<body>

<link rel="shortcut icon" href="http://plakartive.de/img/icon.ico" />
</body>
</html>

Wie behebe ich nun diesen Fehler, denn die Seite wird bei mir völlig korrekt dargestellt. Habe ich was nicht beachtet?

Ich würde mich auf Hilfestellungen sehr freuen!
Lieben Gruß
Morten
 

Anhänge

  • screenshot.jpg
    screenshot.jpg
    76,2 KB · Aufrufe: 123
Hey danke. jQuery ist immer wieder super nützlich!
Nun frage ich mich, wie ich den Inhalt mit skalieren lasse. Also ich möchte ein paar Elemente einfügen, die eine feste Position auf dem Hintergrund haben und sie dürfen sich nicht verändern. Geht das mit jQuery auch?
 
ich hab das mal so gelöst:

#bg {
position:absolute;
width:100%;
height:100%;
}


#bg img {
min-height:100%;
height:auto !important;
height:100%;
min-width:100%;
width:auto !important;
width:100%;
margin:0 auto;
display:block;
position:absolute;
bottom:0;
right:0;
}

und dann im body:
<div id="bg"><img alt="background" src="Dein Bild.jpg" /></div>

DAs funktioniert ganz gut, und da drauf kannst Du dann ja positionieren was und wie du willst
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten