zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hintergrundgrafik verschieben bei Änderung der Auflösung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.03.2009, 18:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.02.2009
Beiträge: 2
Trixi befindet sich auf einem aufstrebenden Ast
Standard Hintergrundgrafik verschieben bei Änderung der Auflösung

Hallo,

ist es möglich, eine Hintergrundgrafik in den Minusbereich zu schieben, wenn sich die Auflösung verkleinert?

Habe einen Container, der sich in je nach Auflösung immer in der mitte befindet. Optimiert ist dieser Container für eine Auflösung von 1024 x 768. Hinter diesem soll nun eine Grafik liegen, die 1280 Pixel breit ist (genau positioniert rechts und links über den Containerbereich ragend) und immer mit verschoben werden soll, aber immer so, dass ein Bereich immer an einer bestimmten Stelle unter dem Container bleibt. Hoffe, dass ich mich einigermaßen verständlich ausgedrückt habe.

Anbei mein Code:

html, body {
margin: 0;
padding: 0;
height: 100%;
}

body {
overflow-x: auto;
background-image: url('images/body_bg.png');
background-repeat: repeat-x;
top: 0;
background-color: #60aeaf;
text-align: center;
font: normal 12px Arial;
}

#page {
height: 100%;
margin-left: 150px;
width: 917px;
color: #009c95;
}

#header {
background-image: url('images/highlight_bg.png');
background-repeat: no-repeat;
float: left;
width: 917px;
height: 100%;
margin-top: -430px;
}

#back {
left: -50%;
text-align: center;
height: 222px;
background: url('images/back.png');
background-repeat: no-repeat;
float: left;
width: 1280px;
margin-top: 330px;
}


<div id="back" style="z-index:1"></div>
<div id="page" style="z-index:2">
<div id="header">
</div>
</div>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.03.2009, 23:45
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

z-index wirkt nur, wenn Du Container explizit mit :relative oder :absolute positionierst.

Ich halte deinen Ansatz für das Zentrieren für überdenkenswert.
Schau Dich mal hier um:

Vertikales und/oder horizontales Zentrieren

Dann hast Du dein Problem vermutlich nicht mehr, da Du das Hintergrundbild dem zentrierten Container mitgeben könntest und in diesen einen oder mehrere Inhaltscontainer packst.
Apropos Zentrieren des Hintergrundbildes: Ich würde es mit Prozentwerten versuchen:

Code:
background-position: 50% 50%;
Die Prozentwerte sind nur beispielhaft. Evtl. ist eine Anpassung der Grafik erforderlich. Überstehende Ränder müssten bei kleineren Containern abgeschnitten werden ( nur ein Vorschlag, nicht getestet)
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.03.2009, 15:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.02.2009
Beiträge: 2
Trixi befindet sich auf einem aufstrebenden Ast
Standard

Hi,

sorry, hat etwas länger gedauert mit einer Antwort. Habe mich mit Deinen Hinweisen beschäftigt. Für eine Auflösung, die größer wird auch alles kein Problem, aber wenn die Auflösung kleiner 1280 Pixel wird verschiebt sich zwar der Container nach links, aber das Bild eben nicht mehr. Somit sitzt der Container nicht mehr so auf der Hintergrundgrafik, wie er soll. Und das Layout muss leider zwingedn so umgesetzt werden.

Vielleicht fällt mir ja noch etwas ein. Danke erstmal.
Mit Zitat antworten
  #4 (permalink)  
Alt 30.03.2009, 17:38
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Lege doch mal #page in #back.
Dein Code legt nahe, dass die beiden bisher unabhängig voneinander sind und das erleichtert das "gemeinsame" Verschieben nicht unbedingt .
Ein Testcase online wäre auch hilfreich.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hintergrundgrafik per Auflösungsabhänigkeit dynamisch ändern? hajo808 Javascript & Ajax 4 11.11.2010 18:54
Teile der Website verschieben sich bei Auflösung Panamajack (X)HTML 7 19.06.2010 15:53
css-layout geht bei iexplorer6 nicht online CSS 3 31.03.2009 00:53
Positionierung von Bildern bei geringerer Auflösung verschieben sich tetrismaster (X)HTML 4 25.04.2007 13:48
Hintergrund Verschiebung bei änderung der Auflösung mO_on CSS 3 31.08.2006 14:15


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:43 Uhr.