BG-Bild ab Min.-Breite fixieren

[Thomas]

Hallo

Ich habe ein Hintergrundbild welches immer rechts positioniert sein soll. Nun ist es natürlich so, dass bei kleiner Browserbreite das Bild hinter den Textinhalt rutscht. Das möchte ich aber nicht. Gibt es mit JS eine Möglichkeit ab einer bestimmten Min-Breite das Hintergrundbild zu fixieren?

danke für eure Hilfe.

Gruss
Thomas

[suit]

Ich habe ein Hintergrundbild welches immer rechts positioniert sein soll. Nun ist es natürlich so, dass bei kleiner Browserbreite das Bild hinter den Textinhalt rutscht. Das möchte ich aber nicht. Gibt es mit JS eine Möglichkeit ab einer bestimmten Min-Breite das Hintergrundbild zu fixieren?

Warum mit JavaScript wenn du es doch eine Eigenschaft für die "Min-Breite" gibt?

[thomas]

Warum mit JavaScript wenn du es doch eine Eigenschaft für die "Min-Breite" gibt?

weil das mit Min-Breite nicht geht. Der Scrollbar erscheint zwar, doch das Background-Bild verschiebt sich weiter nach links... (nur der eigentliche Inhalt bleibt stehen)

[Matthias Apsel]

Om nah hoo pez nyeetz, thomas!

Das Hintergrundbild des Elements ist beispielsweise 100px breit. Dann setze für das Element padding-right: 110px und für das gesamte Element die gewünschte Minimalbreite.

Matthias

[suit]

weil das mit Min-Breite nicht geht. Der Scrollbar erscheint zwar, doch das Background-Bild verschiebt sich weiter nach links... (nur der eigentliche Inhalt bleibt stehen)

Also ich bin genau bei dieser Anforderung mit min-width immer ziemlich erfolgreich - wie machst du das denn, wenn ich fragen darf?

[thomas]

weil das mit Min-Breite nicht geht. Der Scrollbar erscheint zwar, doch das Background-Bild verschiebt sich weiter nach links... (nur der eigentliche Inhalt bleibt stehen)

Also ich bin genau bei dieser Anforderung mit min-width immer ziemlich erfolgreich - wie machst du das denn, wenn ich fragen darf?

Salut

ich habe das BG Bild auf dem Body-Tag:

body { background: url('...') no-repeat right top }

da es immer ganz rechts des Browserfensters sein muss. Mein Inhaltscontainer ist dann linksbündig mit einer Breite von 980px

[suit]

da es immer ganz rechts des Browserfensters sein muss. Mein Inhaltscontainer ist dann linksbündig mit einer Breite von 980px

Na wie jetzt? Muss es ganz rechts im Browserfenster sein oder ganz rechts im Element, egal wie breit das Browserfenster ist?

[Thomas]

Na wie jetzt? Muss es ganz rechts im Browserfenster sein oder ganz rechts im Element, egal wie breit das Browserfenster ist?

es muss ganz rechts im Browserfenster sein und soll dann bei z.B. Browserbreite 1000px stehenbleiben

[Gunnar Bittersmann]

@@thomas:

nuqneH

ich habe das BG Bild auf dem Body-Tag:

Das hört sich gar nicht gut an.

Mein Inhaltscontainer ist dann linksbündig mit einer Breite von 980px

Und das fühlt sich gar nicht gut an.

Kannst du nicht das Hintergrundbild hinter den Body legen und dem Body einen opaken (nichttransparenten) Hintergrund geben?

html  
{  
  background: url(foo) right top no-repeat;  
}  
  
body  
{  
  background: white;  
  max-width: 980px;  
}

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

ich habe das BG Bild auf dem Body-Tag:

Das hört sich gar nicht gut an.

gibts auch visualisiert.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

gibts auch visualisiert.

Ja, und das auch schon länger.

Qapla'

[Thomas]

Kannst du nicht das Hintergrundbild hinter den Body legen und dem Body einen opaken (nichttransparenten) Hintergrund geben?

html

{
  background: url(foo) right top no-repeat;
}

body
{
  background: white;
  max-width: 980px;
}

>   
  
Merci für den Tipp. Leider läuft das BG-Bild immer noch mit und bleibt nicht stehen. 

[Gunnar Bittersmann]

@@Thomas:

nuqneH

Leider läuft das BG-Bild immer noch mit

Da kann ich dir nicht folgen.

Natürlich ist das Bild immer rechts oben im Viewport, wenn dieser schmal ist allerdings vom Body verdeckt, so dass man es nicht sieht.

Dazu fehlt allerdings noch

body  
{  
  border-top: 1px solid white; /* damit body auch bei margin-top eines enthaltenen Elements ganz oben anfängt */  
  margin-top: 0;  
  min-height: 42px; /* Höhe des Hintergrundbilds */  
}

Qapla'

[heinz]

@@Thomas:

nuqneH

Leider läuft das BG-Bild immer noch mit

Da kann ich dir nicht folgen.

Natürlich ist das Bild immer rechts oben im Viewport, wenn dieser schmal ist allerdings vom Body verdeckt, so dass man es nicht sieht.

Dazu fehlt allerdings noch

body

{
  border-top: 1px solid white; /* damit body auch bei margin-top eines enthaltenen Elements ganz oben anfängt /
  margin-top: 0;
  min-height: 42px; / Höhe des Hintergrundbilds */
}

>   
> Qapla'  
  
Hi Thomas, hi Gunnar,  
  
ich bin hier zu 1. mal und noch nicht so vertraut - nix für ungut ich hätte eine reine css-Lösung, die bei standardkonformen Browsern und beim IE ab 7 (im standardkonformen Modus) funktionieren müsste.  
  
Sodele:  
Nur meine Meinung - nicht im body agieren, ich bervorzuge ein Seiten-Blocklevelelement zu erzeugen, innerhalb dessen der komplette restliche html-Code definiert wird.  
  
Bsp. css  
~~~css
  
   #seite {  
     position:relative;  /*wichtig*/  
     min-width:900px; /*bzw. der Wert damit das Bild nicht in den Content läuft*/  
     min-height:100px; /* optional*/  
     background:#eee; /*optional*/  
   }  
/* jetzt kommts, eine absolut positionierte Bildbox mit dem besagten Hintergrundbild */  
   .bildbox {  
     position:absolute;  
     top:0;  
     right:0; /* positioniert bildbox rechts oben idseite */  
     width:xxpx; /* entsprechend Bildbreite */  
     height:xxpx; /*entsprechend Bildhöhe */  
     background:url(bg-bild.jpg);  
   }  
  
/*noch für deinen Inhalt (Content oder ?) ....*/  
  
     position:relative;  
     width:xxxpx; /*dein Wert*/  
/* kein background oder transparent */  
     border:1px solid blue;  /* zur Kontrolle */  

das html:

  
...  
<body>  
<div id="seite">  
  <div class="bildbox"></div>  
  
    <div id="content">  
      <p>hallole ...</p>  
      ... und was du sonst noch so brauchst ...  
    </div>  
  
</div>  
</body>  
</html>  

IE6 versteht keine min-, oder max-Werte,
wenn man ihn auch bedienen will ... Browser-Hack benutzen oder doch ein Javascript.

So that´s it, viel Spaß beim Fensterln
heinz

[Gunnar Bittersmann]

@@heinz:

nuqneH

Nur meine Meinung - nicht im body agieren

„ist bedauerlich bis ärgerlich.“ [at]

min-width:900px; /*bzw. der Wert damit das Bild nicht in den Content läuft*/

Das ist das schon von suit Besagte, was aber nicht sinnvoll ist.

Qapla'

PS: Zitiere bitte sinnvoll, nicht alles!

[heinz]

@@heinz:

nuqneH

Nur meine Meinung - nicht im body agieren

„ist bedauerlich bis ärgerlich.“ [at]

min-width:900px; /*bzw. der Wert damit das Bild nicht in den Content läuft*/

Das ist das schon von suit Besagte, was aber nicht sinnvoll ist.

Qapla'

PS: Zitiere bitte sinnvoll, nicht alles!

Hi Gunnar,

sorry, ich versteh die Querscroller-Sinnfrage nicht?
Ich denke es kommt darauf an, was man auf einer Webseite an Info unterbringen will bzw. soll und wie die Seite browserunabhängig dargestellet werden sollte.
Bestimmte Kompromisse hinsichtlich einer festen Seiten-Mindestbreite sind deshalb eher nicht sinnlos.

Zu meiner body-Problematik:
1. ich finde es besser mit möglichst wenig body-Definitionen zu arbeiten,
   v.a. was "position: ..." - Definitionen betrifft.
2. hängt mit der obigen Sinnfrage zusammen - nehmen wir an ich gestalte eine
   Webseite mit einer fixen Breite von 1024px und ein User betrachtet sie im Vollbildmodus am 32-Zoll-Bildschirm, dann pose ich die Seite mittig und belege den body mit einem dezenten Hintergrund oder knalle die gewonnene Bildschirmfläche mit ganz viel Scnickschack voll - alles Geschmacksache.

Lange Rede kurzer "Sinn" (schon wieder) - Sinnhaftigkeit liegt im Auge des Betrachters und es ist absolut sinnlos sich deshalb zu stressen.

Gruß auch nach Austria, tschö und bis dann
heinz

[Der Martin]

Hallo,

@@heinz:
[...]
PS: Zitiere bitte sinnvoll, nicht alles!

sorry, ich versteh die Querscroller-Sinnfrage nicht?

und die Bitte, nicht einfach sinnlos alles zu zitieren, auch nicht?

Bestimmte Kompromisse hinsichtlich einer festen Seiten-Mindestbreite sind deshalb eher nicht sinnlos.

Ob etwas sinnvoll ist oder nicht, hängt in der Tat davon ab, was eigentlich das Ziel ist. Ein starres Layout anzustreben, halte ich zum Beispiel nicht für sinnvoll; eine Mindestbreite aber -je nach Inhalt- manchmal schon.
Allerdings kommt man in sehr vielen Fällen auch ohne diese Mindestbreite und das dadurch eventuell nötige und lästige horizontale Scrollen aus, etwa mit einem flexiblen Layout, bei dem die Elemente nebeneinander stehen, wenn genug Platz da ist, und andernfalls untereinander. Klar, wenn ich 5MP-Fotos in voller Auflösung darstellen will, komme ich bei den meisten Bildschirmen wohl nicht mehr ohne horizontales Scrollen aus.

Zu meiner body-Problematik:

1. ich finde es besser mit möglichst wenig body-Definitionen zu arbeiten,
      v.a. was "position: ..." - Definitionen betrifft.

Diese Ansicht sei dir gegönnt - aber kannst du sie auch begründen? Immerhin ist body ein Element wie jedes andere, mit dem einzigen Unterschied, dass es den gesamten Seiteninhalt enthält. Dieses Element dann auch geeignet zu stylen, erscheint mir durchaus vernünftig.

2. hängt mit der obigen Sinnfrage zusammen - nehmen wir an ich gestalte eine
      Webseite mit einer fixen Breite von 1024px und ein User betrachtet sie im Vollbildmodus am 32-Zoll-Bildschirm, dann pose ich die Seite mittig und belege den body mit einem dezenten Hintergrund oder knalle die gewonnene Bildschirmfläche mit ganz viel Scnickschack voll - alles Geschmacksache.

Abgesehen davon, dass ich feste Breiten meide - was spricht dagegen, stattdessen das ohnehin vorhandene body-Element zu positionieren, und dem html-Element den Hintergrund drumherum zu geben?

Ciao,
 Martin

[heinz]

Hi Martin und se others,

wo bi ich denn hier gelandet???

Ich wollte dem Thomas nur zeigen wie er sein Problem lösen kann.

Ich habe nie behauptet, dass man am body nichts definieren darf.
Ich hab lediglich gesagt, dass ich, meine Wenigkeit, auf grund meiner Erfahrungen es möglichst vermeide. Und wenn ihr mich ein bissi verstehen wollt, dann setzt einmal das Hack-Bsp. aus selfhtml um, welches position:fixed; eines beliebigen Elements auch im IE 6 ermöglicht. Am besten mit ganz vielen body-defs.

Ich freue mich, wenn ihr flexible Seiten porgrammiert - gefällt mir auch.
Oh bitte, sei es mir einfach auch vegönnt, dass es die Programmierpraxis eben manchmal erfordert nicht nur mit Mindestbreiten zu agieren sondern mit "fixen", wenn man bestimmte Browser berücksichtigen muss.

Sorry, ich hab leider zu spät bemerkt, dass ich dem Thomas hätte direkt antworten sollen - womöglich hat der meine Lösung gar nicht gelesen, weil ihm seitens meiner Vorbeantworter nicht wirklich geholfen wurde, sondern eine Sinnesfrage über Kochrezepte losgetreten wurde, auf die ich mich in meiner unwissenden Naivität fahrlässig eingelassen habe.

Und mit der Frage - wollt ihr anderen bei Problemen helfen oder sie belehren wie man eine Webseite gefälligst "sinnvoll" zu programmieren hat? - verabschiede ich mich aus diesem Thread.

tschö und alles Gute
heinz - würde nie von sich behaupten "das Unikat" zu sein, welches die Weisheit mit Löffeln gefressen hat - jedoch probably der Einzige, der es schon vor ein paar Jährchen geschafft hat, Elemente mit runden Ecken zu verwirklichen - rein mit css und 4 gleichgroßen Cornerpics und echt flexibel und ohne Schiebetüren (zumindest IE6 und Firefox setzen es ohne Probleme um).

[Gunnar Bittersmann]

@@heinz:

nuqneH

weil ihm seitens meiner Vorbeantworter nicht wirklich geholfen wurde

?? Dir scheint entgangen zu sein, dass meine Lösung mit der Ergänzung das Problem löst. Und zwar ohne Mindestbreite, dafür mit Maximalbreite.

der es schon vor ein paar Jährchen geschafft hat, Elemente mit runden Ecken zu verwirklichen - rein mit css und 4 gleichgroßen Cornerpics

Mit dem Wissen kannst du dich heute nirgendwo mehr sehen lassen; das geht heute gänzlich ohne Bilder. (Und übrigens auch dazumals vermutlich schon mit nur einem Bild, das jeweils um 90° gedreht wird.)

Qapla'

[Gunnar Bittersmann]

@@suit:

nuqneH

Warum mit JavaScript wenn du es doch eine Eigenschaft für die "Min-Breite" gibt?

Und wie sollte die hier _sinnvoll_* zum Einsatz kommen?

Qapla'

* Horizontales Scrollen zu erzwingen ist nicht sinnvoll.

[suit]

Und wie sollte die hier _sinnvoll_* zum Einsatz kommen?

* Horizontales Scrollen zu erzwingen ist nicht sinnvoll.

Um den Sinn oder Unsinn ging es mir garnicht :p