[GastForen Web allgemein HTML und CSS / Stylesheets Porblem mit Hintergrundbild center

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Porblem mit Hintergrundbild center

Tago
Beiträge gesamt: 2

28. Jan 2007, 16:28
Beitrag # 1 von 7
Bewertung:
(3244 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo!

Ich habe ein Layout in dem ein Hintergrundbild ein Teil des Layouts darstellt.
Das Hintergrundbild ist im body angegeben, stellt einen Streifen da, der über 100% Höhe gehen soll.
Leider geht es nicht anders, da divs auf 100% gerade im Firefox nur den Bildschirmbereich als 100% ansehen und dann wenn die Seite nach unten weitergeht das Hintergrundbild nicht mehr angezeit ist.

Das Layout ist zentriert. Das Hintergrundbild ist in der Mitte und darüber bauen sich divs mit Inhalt auf die auch zentriert sind. Soweit passt alles und wir auch alles gut dargestellt.

CSS für den Hintergrund und den Container der auf dem Hintergrundbild liegt, in dem Container sind dann weiter Layoutanordnungen.
Code
html, body { 
background-color: #444444;
background-image: url(../images/bg_main.gif);
background-repeat: repeat-y;
background-position: center top;
margin: 0;
padding: 0;
}
#main_holder {
background-color: transparent;
margin:0 auto;
width: 958px;
}


Jetzt bin ich auf ein Problem gestoßen. Wenn das Browserfenster kleiner als das Layout ist schiebt sich bei einigen Browser das Hintergrundbild weiter(also es bleibt zentriert) bei anderen bleibt es an der linken Seite stehen(so wie das Layout auch).

Meine Frage ist jetzt kann wie kann man die anderen Browser beinflussen, dass das Hintergrundbild auch bei dennen dann an der linken Seite stehen bleibt?

Danke für die Hilfe
X

Porblem mit Hintergrundbild center

SabineP
Beiträge gesamt: 7586

28. Jan 2007, 17:14
Beitrag # 2 von 7
Beitrag ID: #273055
Bewertung:
(3239 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Tago,

probiers mal so:


body {
background-color: #444444;
background-image: url(../images/bg_main.gif);
background-repeat: repeat-y;
background-position:50% 0;
margin: 0;
padding: 0;
}
Gruß Sabine


als Antwort auf: [#273052]

Porblem mit Hintergrundbild center

Corinne
Beiträge gesamt: 111

2. Feb 2010, 14:32
Beitrag # 3 von 7
Beitrag ID: #432443
Bewertung:
(2981 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hi Sabine

Ich habe das genau gleiche Problem. Leider funktionierts mit der background-position:50% 0; wie angegeben nicht. IE 8 und Firefox schieben den Hintergrund trotzdem weiter nach links aus dem Browserfenster hinaus.

Kennst du mittlerweile eine Lösung für dieses Problem? Oder sonst irgend jemand, der eine Lösung weiss?

lg
Corinne


als Antwort auf: [#273055]

Porblem mit Hintergrundbild center

SabineP
Beiträge gesamt: 7586

2. Feb 2010, 15:04
Beitrag # 4 von 7
Beitrag ID: #432448
Bewertung:
(2974 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Corinne,

ohne Deinen Quellcode und Dein Hintergrundbild zu kennen kann man nicht viel dazu sagen.

Hier gibt es einige Beispiele zur Positionierung des Hintergrundbildes:
http://www.w3.org/.../20070302/sec536.htm

Lies am besten auch noch hier nach:
http://de.selfhtml.org/...#background_position
Gruß Sabine


als Antwort auf: [#432443]
(Dieser Beitrag wurde von SabineP am 2. Feb 2010, 15:07 geändert)

Porblem mit Hintergrundbild center

Corinne
Beiträge gesamt: 111

3. Feb 2010, 09:45
Beitrag # 5 von 7
Beitrag ID: #432515
Bewertung:
(2945 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hi Sabine

Danke für die beiden Links. Habs mir angeschaut aber komm trotzdem nicht weiter :-( mein Code sieht so aus:

Code
 
<body>
<div id="block_main">
...hier alle divs und Inhalte...
</div>
</body>


und CSS dazu:

Code
 
body {
margin:0;
padding:0;
background:#ECEFF5 url(/images/default/design_custom/bg_main.jpg);
background-position:50% 0;
background-repeat:repeat-y;
}

div#block_main { /* Zentrierung der Website */
position:relative;
margin:0 auto;
width:1135px;
padding:0 9px 0 9px;
}


Sobald das Fenster kleiner als die Websitebreite wird schiebt es den Hintergrund weiter nach links aussen und der Inhalt bleibt logischerweise stehen. Gemäss Selfhtml gibts dafür glaube ich keine Lösung denn wie soll ich einen Hintergrund zentrieren ohne center oder Prozentangaben zu verwenden?!

Habe auch schon versucht den Hintergrund in block_main zu integrieren, dann krieg ichs aber mit der 100% Höhe nicht hin wenn der Inhalt länger als das Browserfenster wird. http://www.xs4all.nl/...ples/csslayout1.html hier funktionierts auf meiner Page nicht :-(

Gruss
Corinne


als Antwort auf: [#432448]

Porblem mit Hintergrundbild center

SabineP
Beiträge gesamt: 7586

3. Feb 2010, 11:18
Beitrag # 6 von 7
Beitrag ID: #432531
Bewertung:
(2931 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Corinne,

das Hintergrundbild ist zentriert innerhalb des <body>.
Das ist der sichtbare Bereich des Browserfensters.

Du möchtest aber wahrscheinlich das Hintergrundbild zentrieren innerhalb des divs #block_main

Probier das mal aus, dann siehst Du den Unterschied.

body {
margin:0;
padding:0;

}

div#block_main { /* Zentrierung der Website */
position:relative;
margin:0 auto;
width:1135px;
padding:0 9px 0 9px;
background:#ECEFF5 url(/images/default/design_custom/bg_main.jpg);
background-position:50% 0;
background-repeat:repeat-y;
}

>> Habe auch schon versucht den Hintergrund in block_main zu integrieren,
>> dann krieg ichs aber mit der 100% Höhe nicht hin wenn der Inhalt länger als das Browserfenster wird.

Das kann ich an Hand Deines Codes nicht reproduzieren.
Gruß Sabine


als Antwort auf: [#432515]

Porblem mit Hintergrundbild center

Corinne
Beiträge gesamt: 111

4. Feb 2010, 13:59
Beitrag # 7 von 7
Beitrag ID: #432721
Bewertung:
(2896 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hi Sabine

Wie ich Hintergrundbilder zentriere weiss ich schon, aber es schiebt mir das Bild immer links aus dem Browserfenster sobald das Fenster kleiner als die Hintergrundbreite ist.

Ich werde jetzt aber die Website so umstellen, dass der Hintergrund im block_main ist und versuch das mit der 100% Höhe irgendwie hinzukriegen ;-)

Trotzdem danke für deine Hilfe.

lg
Corinne


als Antwort auf: [#432531]
X

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
08.11.2022

Frankfurt, Fraport Conference Center
Dienstag, 08. Nov. 2022, 13.30 - 18.00 Uhr

Seminar

Auf der Enfocus World Tour stellen wir Ihnen gemeinsam mit Enfocus die aktuellen Highlights von Enfocus Switch und dem Impressed Workflow Server (IWS) vor. Wir präsentieren Ihnen anhand typischer Aufgabenstellungen in einem modernen Produktionsbetrieb die Möglichkeiten, die Enfocus Switch für die Automatisierung und Standardisierung von Abläufen bietet. Wir haben sowohl für Produktionsverantwortliche als auch technisch Interessierte ein spannendes Programm vorbereitet, bei dem Sie sicherlich viel Neues erfahren werden, welches Sie in Ihrem eigenen Betrieb umsetzen können. Die Veranstaltung bietet darüber hinaus eine hervorragende Möglichkeit, sich mit anderen Anwendern und Workflow-Spezialisten auszutauschen und Antworten auf konkrete Aufgabenstellungen zu erhalten, welche Sie mit Hilfe von Enfocus Switch/IWS umsetzen möchten.

Wir sind jeweils an 2 Tagen in Frankfurt, Hamburg und München vor Ort. Der erste (halbe) Tag richtet sich in erster Linie an Betriebsleiter und Produktionsverantwortliche in Druckereien - ist also weniger technisch orientiert - sondern gibt einen Überblick zu den heutigen Möglichkeiten einer automatisierten Produktion.

Der zweite Tag (Switch Anwender-Treffen) richtet sich an bestehende Switch-Anwender und Administratoren.

Anmeldung und weitere Infos: https://www.impressed.de/schulung.php?c=sDetail&sid=310

Ja

Organisator: Enfocus/Impressed

Kontaktinformation: Silvia Noack, E-Mailsnoack AT impressed DOT de

https://www.impressed.de/schulung.php?c=sDetail&sid=310

Enfocus World Tour 2022
Veranstaltungen
08.11.2022

Frankfurt, Fraport Conference Center
Dienstag, 08. Nov. 2022, 13.30 - 18.00 Uhr

Seminar

Auf der Enfocus World Tour stellen wir Ihnen gemeinsam mit Enfocus die aktuellen Highlights von Enfocus Switch und dem Impressed Workflow Server (IWS) vor. Wir präsentieren Ihnen anhand typischer Aufgabenstellungen in einem modernen Produktionsbetrieb die Möglichkeiten, die Enfocus Switch für die Automatisierung und Standardisierung von Abläufen bietet. Wir haben sowohl für Produktionsverantwortliche als auch technisch Interessierte ein spannendes Programm vorbereitet, bei dem Sie sicherlich viel Neues erfahren werden, welches Sie in Ihrem eigenen Betrieb umsetzen können. Die Veranstaltung bietet darüber hinaus eine hervorragende Möglichkeit, sich mit anderen Anwendern und Workflow-Spezialisten auszutauschen und Antworten auf konkrete Aufgabenstellungen zu erhalten, welche Sie mit Hilfe von Enfocus Switch/IWS umsetzen möchten.

Wir sind jeweils an 2 Tagen in Frankfurt, Hamburg und München vor Ort. Der erste (halbe) Tag richtet sich in erster Linie an Betriebsleiter und Produktionsverantwortliche in Druckereien - ist also weniger technisch orientiert - sondern gibt einen Überblick zu den heutigen Möglichkeiten einer automatisierten Produktion.

Der zweite Tag (Switch Anwender-Treffen) richtet sich an bestehende Switch-Anwender und Administratoren.

Anmeldung und weitere Infos: https://www.impressed.de/schulung.php?c=sDetail&sid=310

Ja

Organisator: Enfocus/Impressed

Kontaktinformation: Silvia Noack, E-Mailsnoack AT impressed DOT de

https://www.impressed.de/schulung.php?c=sDetail&sid=310

Enfocus World Tour 2022