Backround wird abgeschnitten und Verschiebung bei kleinerem Browserfenster

MainAngler · 19.05.2012

Hi all,

als erstes möchte ich mich vorab entschuldigen, weil ich euch leider keinen link und keinen Screenshot zeigen kann.:rot:

Es geht um eine persönliche Webseite die ich von Grund auf erst aufbauen möchte.

Irgendwie habe ich wohl, bei folgendem Vorgehen, ein gedankliches "Verständnis"-Problem. :rolleyes:

Ich wollte für eine größere (Bildschrim-)Auflösung eine Hintergrundgrafik erstellen.
Sobald ich mit dem HTML & CSS anfange und diese Grafik dem Hintergrund zuweise, wird ein Teil der Grafik im Browser (Firefox 12.0) rechts abgeschnitten.:uhm:

Das sieht man so, aber noch besser wenn man dem Div einen Rahmen verpasst, weil das Div hat genau die Größe (Breite) des Hintergrundbildes.

Die ganze Seite sollte zentriert angezeigt werden.
Für Benutzer mit einer Auflösung von z.B. 1024 x 768 Pixel sollte dann rechts und links ein Teil der Hintergrundgrafik fehlen, aber der Content bleibt trotzdem sichtbar.
Soweit die Theorie.

Ich persönlich verwende eine größere Auflösung als das Hintergrundbild breit ist!

Warum wird das also abgeschnitten angezeigt?:?:
Woran könnte das liegen?:?:
______

Nächtes Problem:
Beim Verkleinern des Browserfensters wandert das per auto 0 zentrierte Div (Wrapper) automatisch mit und verschiebt den kompletten Inhalt, so dass selbst mein mittigiger Hintergrund vom Content zum Teil nicht mehr sichtbar ist und sich dann auch verkleinert (schmälert).:uhm:

Ich habe daher den ganzen Code verworfen!!!

ADcosmos · 19.05.2012

AW: Backround wird abgeschnitten und Verschiebung bei kleinerem Browserfenster

Hi,

1. Du kannst doch deinen Code hier hineinstellen. Also den, den Du selbst geschrieben hast.

2. Du kannst doch einen Screenshot machen (das geht mit Bordmitteln in Win und MacOS) und ihn z.B. bei abload.de hochladen.

3. Ohne irgendetwas davon, können wir Dir schlecht helfen.

4. Hast Du deine Seite auch mit anderen Browser probiert?

MFg ADcosmos

simonpicos · 19.05.2012

AW: Backround wird abgeschnitten und Verschiebung bei kleinerem Browserfenster

Also ohne Beispiel kann ich mir das grad nicht wirklich vorstellen :uhm:

Vielleicht nen Link per pm, oder du bastelst mal schnell ein beispiel, was das problem verdeutlicht?

@ADcosmos: Ich glaube er möchte keinen Link oder screenshot einstellen

MainAngler · 19.05.2012

AW: Backround wird abgeschnitten und Verschiebung bei kleinerem Browserfenster

simonpicos hat es auf den Punkt gebracht.

Gut, Code kann ich, nachdem ich ihn nochmals schnell getippt habe, zeigen.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
body {
    margin: 0;
    padding: 0;
}

#wrapper {
    background-attachment: fixed;
    background-image: url(bg1.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    display: block;
    height: 1200px;
    width: 1200px;
    margin: 0 auto;
    border: 1px solid blue;
}
#content-wrapper {
    height: 1200px;
    width: 814px;
    margin: 0 auto;
    display: block;
    border: 1px solid red;
    position: relative;
}
#content {
    background-attachment: fixed;
    background-image: url(middle.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    height: 1200px;
    width: 814px;
}
</style>
</head>

<body>
<div id="wrapper">
  <div id="content-wrapper">
    <div id="content">Content for  id "content" Goes Here</div>
  </div>
</div>
</body>
</html>

Es ist so, dass wenn ich das Browserfenster verkleinere, das innere Div (content-Div) nach links immer noch einen gewissen gleichbleibenden Abstand zum Fensterrand hat, aber sich das Hintergrundbild des content-Div mit nach links verschiebt und der Teil, um den es sich verschoben hat, nicht sichtbar ist.

In anderen Browsern nicht getestet, da FF meinen Vorrang hat!

Edit:

Folgendermaßen wäre es richtig wie ich es mir wünsche würde, dass sich eben nichts verschiebt - allerdings sitzt dann halt alles links weil der body ja nicht zentriert werden kann.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
body {
    background-attachment: scroll;
    background-image: url(bg1.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    height: 1200px;
    width: 1200px;
    margin: 0;
    padding: 0;
}


#content-wrapper {
    height: 1200px;
    width: 814px;
    margin: 0 auto;
    display: block;
    border: 1px solid red;
    position: relative;
}
#content {
    background-attachment: scroll;
    background-image: url(middle.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    height: 1200px;
    width: 814px;
}
</style>
</head>

<body>
<div id="wrapper">
  <div id="content-wrapper">
    <div id="content">Content for  id "content" Goes Here</div>
  </div>
</div>
</body>
</html>

ADcosmos · 19.05.2012

AW: Backround wird abgeschnitten und Verschiebung bei kleinerem Browserfenster

Hi,

hast Du mal ohne "background-attachment: fixed;" probiert?

MFg ADcosmos

MainAngler · 19.05.2012

AW: Backround wird abgeschnitten und Verschiebung bei kleinerem Browserfenster

Siehste ja im 1. Beispiel und da funktionierte es ja nicht wie es soll.

MyBad · 19.05.2012

AW: Backround wird abgeschnitten und Verschiebung bei kleinerem Browserfenster

Du kannst die Background-Grafik aber zentrieren. Schau dir mal die Möglichkeiten bei Background-Position an.

MainAngler · 19.05.2012

AW: Backround wird abgeschnitten und Verschiebung bei kleinerem Browserfenster

Stimmt zwar

, aber bei einer größeren Auflösung ist es dann so, dass mein eigentlich zentrierter Content eben nicht mehr zentriert ist.

Es verschiebt sich also nur der Hintergrund des body.
Links ist das Hintergrundbild des body dann kleiner als auf der rechten Seite.

Das liegt aber an der größeren Auflösung die ich habe.
Habe nämlich mal das Browserfenster verkleinert und dann ein bisschen die Größe des Fensters manuell verändert, sieht eigetnlich damit dann doch ok aus.

Warum kam ich nicht auf background-position:center;?!:uhm: