beate: Hintergrundbild

SELF-Forum

Hintergrundbild

beate
– Informationen zu den Bewertungsregeln

Hallo und guten Tag,

nachdem ich nun schon tagelang erfolglos im Nebel gestochert habe, hoffe ich nun, dass ich hier Hilfe finden kann.

Ich möchte mein Hintergrundbild auf der Startseite gerne so einbinden wie bei Twitter (https://twitter.com/). Hier ist die Besonderheit, dass das Bild zwar im Maximum immer den ganzen Bildschirm ausfüllt (egal, welches Format), im Minimum aber irgendwann (ca. ab 70%?) aufhört kleiner zu werden und dann halt Teile des Bildes aus dem Blick verschwinden. Mit welcher css-Anweisung kann ich den minimalen Bereich festlegen? Oder spielt hier noch ein Java-Script mit?

Habe mir schon fast komplett den Quellcode der twitter-Seite nachgebaut, schaffe es aber nur, dass das Bild bis ins unendliche immer kleiner wird, aber nicht dass die Skalierung irgendwann stoppt.

Hat da jemand einen Rat für mich?

Schon mal vielen Dank und liebe Grüße
Beate

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Hintergrundbild

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@beate:

    nuqneH

    […] dass die Skalierung irgendwann stoppt.
    Hat da jemand einen Rat für mich?

    Media query.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Hintergrundbild

      Baba
      – Informationen zu den Bewertungsregeln

      media queries sind fast immer die richtige Antwort, gelle?

      In diesem Fall sieht mir das aber fast genau nach diesem Beispiel aus, welches auf css-tricks.com besprochen wird. Auch dieses Beispiel hört irgendwann auf zu skalieren. Erklären kann ich das gerade nicht, weil ich zu dumm bin.

      Cheers,
      Baba

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Hintergrundbild

        Matthias Apsel Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Om nah hoo pez nyeetz, Baba!

        In diesem Fall sieht mir das aber fast genau nach diesem Beispiel [link entfernt] aus,

        Das ist aber kein schönes Beispiel
         - zusätzliche und nicht notwendige Elemente (#bg und img)
         - also kein Hintergrundbild
         - style in body ist auch in HTML5 nicht erlaubt

        Ungetestet (sollte man Gunnar auf keinen Fall widersprechen) könnte aber ein einfaches min-width ausreichend sein.

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Alte und Alternative.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Hintergrundbild

          Baba
          – Informationen zu den Bewertungsregeln

          Das ist aber kein schönes Beispiel

          Ich habe für ein Projekt auch das CSS3 Beispiel aus dem verlinkten Artikel verwendet. Aber twitter arbeitet mit dieser Strategie aus dem CSS2 Beispiel.

          Cheers,
          Baba

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Hintergrundbild

            beate
            – Informationen zu den Bewertungsregeln

            Hallo an alle!

            Vielen herzlichen Dank für die vielen Hinweise, ich glaube, sie haben mir das Leben gerettet! :-)

            Ich habe jetzt die Variante CSS-Only Technique #1 von hier
            http://css-tricks.com/perfect-full-page-background-image/

            verwendet und sie um eine Angabe für min-width unter @media screen ergänzt. Überall noch die Werte ein wenig angepasst und funktioniert einwandfrei. Ist leider noch nicht online, drum kann ich es noch nicht zeigen, aber hier der Code:

              
<head>  
	<meta charset="utf-8">  
	  
	<title>Full Page Background Image | CSS #1</title>  
	  
	<style>  
		  
		img.front-bg {  
			/* Set rules to fill background */  
			min-height: 100%;  
			min-width: 1040px;  
			  
			/* Set up proportionate scaling */  
			width: 100%;  
			height: auto;  
			  
			/* Set up positioning */  
			position: fixed;  
			top: 0;  
			left: 0;  
		}  
		  
		  
		@media screen and (min-width: 900px) screen and (max-width: 1040px){  
			img.front-bg {  
				left: 50%;  
				margin-left: -520px;  
				}  
		}  
		  
		  
		#front-box {  
			position: relative;  
			width: 800px;  
			margin: 50px 15px auto;  
			padding: 20px;  
			background: none;  
			/* Schatten um die Box, hier nicht nötig*/  
			-moz-box-shadow: 0 0 20px black;  
			-webkit-box-shadow: 0 0 20px black;  
			box-shadow: 0 0 20px black; */  
		}  
		  
		.front-slogan {  
			margin-top: 125px;  
			padding-left: 10px;  
		}  
		  
		p {  
			font: 15px/2 Georgia, Serif;  
			margin: 0 0 30px 0;  
			text-indent: 40px;  
		}  
	</style>  
</head>  
  
<body>  
  
<img src="images/background-image_1040.jpg" class="front-bg">  
<div id="front-box">  
	<img class="front-image" src="images/header-object_new.png" />  
	<div class="front-slogan">  
		<div class="front-slogan-text">  
			<h2>Find other artists to collaborate with from all over the world.  
			</h2>  
		</div>  
	</div>  
	<div class="front-login">  
		<p>{loadposition loginhomenew}</p>  
		<h3>New to Community? <a href="index.php?option=com_comprofiler&amp;task=registers">Register here</a></h3>  
	</div>  
	<div class="front-footer">  
		<p>{loadposition loginfooter}</p>  
	</div>  
</div>  
	  
</body>

            Vielen Dank und liebe Grüße
            Beate

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

        2. Hintergrundbild

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          @@Matthias Apsel:

          nuqneH

          Ungetestet (sollte man Gunnar auf keinen Fall widersprechen)

          ;-)

          könnte aber ein einfaches min-width ausreichend sein.

          Ich hatte nur das gelesen, was im OP stand: das Hintergrundbild nicht schmaler werden lassen als $Grenze. Andere Inhalte (body-Element) soll das nicht betreffen.

          So sollte es auch sein, sonst hat man wieder das Problem mit horizontalem Scrolling bei schmalen Viewports.

          Qapla'

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

        3. Hintergrundbild

          MudGuard Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Hi,

          • style in body ist auch in HTML5 nicht erlaubt

          auch?

          in HTML 4.01:

          <!ATTLIST BODY
            %attrs;                              -- %coreattrs, %i18n, %events --

          <!ENTITY % attrs "%coreattrs; %i18n; %events;">

          <!ENTITY % coreattrs
           "id          ID             #IMPLIED  -- document-wide unique id --
            class       CDATA          #IMPLIED  -- space-separated list of classes --
            style       %StyleSheet;   #IMPLIED  -- associated style info --
            title       %Text;         #IMPLIED  -- advisory title --"
            >

          ergibt:  body darf ein style-Attribut haben.

          Ist das in HTML5 geändert worden? Ich dachte, das sollte abwärtskompatibel sein ...

          cu,
          Andreas

          --
          Warum nennt sich Andreas hier MudGuard?
          O o ostern ...
          Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Hintergrundbild

            Matthias Apsel Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Om nah hoo pez nyeetz, MudGuard!

            • style in body ist auch in HTML5 nicht erlaubt

            ergibt:  body darf ein style-Attribut haben.

            In der Seite ist ein style-Element als Kind von body.

            Matthias

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Bus und Bussard.

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Hintergrundbild

              MudGuard Homepage des Autors
              – Informationen zu den Bewertungsregeln

              Hi,

              • style in body ist auch in HTML5 nicht erlaubt
                ergibt:  body darf ein style-Attribut haben.
                In der Seite ist ein style-Element als Kind von body.

              Ach so, Element, nicht Attribut ...

              cu,
              Andreas

              --
              Warum nennt sich Andreas hier MudGuard?
              O o ostern ...
              Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Hintergrundbild

                Gunnar Bittersmann Homepage des Autors
                – Informationen zu den Bewertungsregeln

                @@MudGuard:

                nuqneH

                Ach so, Element, nicht Attribut ...

                Sind schon schwer auseinanderzuhalten, die Begriffe. Hat da nicht mal einer ’ne Grafik zu gemacht? ;-)

                Qapla'

                --
                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

        4. Hintergrundbild

          molily Homepage des Autors
          – Informationen zu den Bewertungsregeln

          style in body ist auch in HTML5 nicht erlaubt

          Wenn es ein scoped-Attribut hat schon:
          http://www.w3.org/TR/html5/document-metadata.html#the-style-element

          Allerdings:
          »The following features are at risk and may be removed due to lack of implementation.«
          http://www.w3.org/TR/html5/#status-of-this-document

          M.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

      2. Hintergrundbild

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Baba:

        nuqneH

        media queries sind fast immer die richtige Antwort, gelle?

        Erinnert mich an meinen Chemielehrer an der Penne. Die richtige Antwort war fast immer »Schrödinger-Gleichung«.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln