✔ Background-image verschiebt sich bei kleiner Fenstergröße

L

lolhonk

Mitglied
Hi,

kann mir jemand sagen, warum sich das background-image bei kleiner Fenstergröße verschiebt?

zu sehen hier (Achtet auf die Noten im Hintergrund des Sliders): http://lolhonk.aquarius.uberspace.de/drupal/mgv/

der Code hierfür:

HTML: 
#slideshow-wrapper:before {
    background: url("../images/noten2.gif") no-repeat scroll 0 0 transparent;
    content: "";
    height: 100%;
    left: 388px;
    opacity: 0.5;
    position: absolute;
    top: -26%;
    transform: rotate(-10deg);
    width: 100%;
    z-index: -1;

was kann ich dagegen tun? :-(

LG
 
Liegt offensichtlich an den absoluten Positionsangaben gegenüber der übrigen horizontalen Seitenzentrierung.

Lösung: Das Hintergrundbild für ein übergeordnetes <div> (z.B. <div id="page"> ohne absolute Positionierung vorsehen.
 
Hi,
cool Danke!
habs nun mal in #page:before reingemacht allerdings wird das Bild nur angezeigt, wenn ich position: absolut verwende. Wie kann ich das umgehen?

LG
 
Ohne das Pseudoelement :before.

CSS: 
#page {
 background: url("../images/noten2.gif") no-repeat scroll 0 0 transparent;
}
 
lolhonk hat gesagt.:
ohne before dreht sich halt leider meine gesamte "page"-Region
Zum Vergrößern anklicken....
Wie darf/soll das verstanden werden?

Bliebe noch das <html>- oder <body>-Element:

CSS: 
html {
 background: url("../images/noten2.gif") no-repeat scroll 0 0 transparent;
}
bzw.
CSS: 
body {
 background: url("../images/noten2.gif") no-repeat scroll 0 0 transparent;
}
 
spicelab hat gesagt.:
Wie darf/soll das verstanden werden?

Bliebe noch das <html>- oder <body>-Element:

CSS: 
html {
 background: url("../images/noten2.gif") no-repeat scroll 0 0 transparent;
}
bzw.
CSS: 
body {
 background: url("../images/noten2.gif") no-repeat scroll 0 0 transparent;
}
Zum Vergrößern anklicken....


Hi,

habs sowohl im html sowie im body-element getestet. Auch da verschiebt sich das Bild wenn ich die Fenstergröße ändere, sobald ich das background-image mit scroll an die gewünschte Position verschiebe. Das dürfte eigentlich nicht passieren oder? Werds gleich nochmal testen kann auch sein ich hab mich getäuscht.

eigentlich wollte ich ja mit css das background-image drehen sprich:
HTML: 
transform: rotate(-10deg);
um zu verhindern, dass sich die gesamte region z.B. #page, block etc. dreht habe ich mit dem :before gearbeitet. Habe jetzt aber einfach das Background-image mit PS gedreht....

LG
 
Das Hintergrundbild verschiebt sich jetzt beim horizontalen Fensterskalieren durch die erstgenannte Hintergrundposition background-position:center top, womit die Bildmitte immer zur Fenstermitte hin ausgerichtet wird ;)

Vielleicht solltest du hier auch besser mal die Grafikdimension (Breite) verkleinern, also die leeren Flächen links und rechts vom Motiv abschneiden - aus derzeit 1920px werden dann effektiv 1085px :)
 
Zuletzt bearbeitet:
:) leider hab ichs immer noch nicht hinbekommen... hab es so zugeschnitten wie du meintest, jedoch muss ich das bild ja irgendwie an die passende stelle hinbekommen und sobald ich dies mit scroll X Y mache, verschiebt es sich wieder bei kleiner Fenstergröße...

wie bekomme ich das hin, dass es an Ort und Stelle bleibt egal was für eine Fenstergröße...

LG
 
Da nach deiner eigenen Aussage transform:rotate(-10deg) jetzt nicht mehr zum Einsatz kommt, und mit meiner zuletzt empfohlenen verkleinerten Grafikbreite, wäre dies die technische Umsetzung deiner Wunschvorstellung:

CSS: 
#page {
width:1085px; /* entspricht der (Hintergrund-)Grafikbreite */
margin:0 auto; /* sorgt für die horizontale Zentrierung im Fenster */
background:url(../images/noten2.gif) no-repeat scroll 0 0 transparent; /* Hintergrundbildregeln */
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück