kostenloser Webspace werbefrei: lima-city

CSS: Layout über die ganze Webseite el

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   bluewaterlp

   bluewaterlp hat kostenlosen Webspace.

   13:41, 25.7.2011

   Heyho.
   Css ist nicht so meins deshalb frag ich jetzt mal hier:
   Also das Bild ist 1000x600 groß und füllt nicht die ganze Seite:
   
   
   <style type="text/css">
   body { background-image:url(BILD URL); background-repeat: no-repeat; }
   </style>
   
   So wie schaffe ich es jetzt per Befehl, dass das Bild den Kompletten hintergrund füllt

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. alfr3d

   alfr3d hat kostenlosen Webspace.

   14:07, 25.7.2011

   Soweit ich weiß wird es erst mit CSS 3 möglich sein, das Hintergrundbild (background-image) zu strecken, bzw eine Größe zu verpassen, da aber noch nicht alle Browser CSS 3 unterstützen ist das sicherlich keine gute Lösung...
   
   Evtl erzähl ich dir hier auch gerade Mist und es ist doch irgendwie möglich, falls jemand eine Lösung mit CSS kennen sollte, darf er sie uns gerne mitteilen...
   
   
4. Autor dieses Themas

   bluewaterlp

   bluewaterlp hat kostenlosen Webspace.

   17:31, 25.7.2011

   das bild könnte ich doch theoretisch auch größer machen oder?
   
   Aber wie groß müsste das dann?

5. malia

   Moderator

   malia hat kostenlosen Webspace.

   17:48, 25.7.2011

   bluewaterlp schrieb:
   Heyho.
   Css ist nicht so meins deshalb frag ich jetzt mal hier:
   Also das Bild ist 1000x600 groß und füllt nicht die ganze Seite:
   
   
   <style type="text/css">
   body { background-image:url(BILD URL); background-repeat: no-repeat; }
   </style>
   
   So wie schaffe ich es jetzt per Befehl, dass das Bild den Kompletten hintergrund füllt

   
   
   
   Das geht zumindest hatte ich mal ein Tutorial dazu im Internet gefunden. Das Problem wird aber sein dass dein Bild entweder pixelt oder verzerrt dargestellt wird.
   
   Hier habe ich etwas dazu gefunden:
   
   http://tutsandtipps.the-netbrain.de/tutorials/vollflaechige-hintergrundbilder-nur-mit-css
   
   Einen Versuch wäre es wert ich habe es selber nicht getestet.
   
   Grüsse Malia
6. Autor dieses Themas

   bluewaterlp

   bluewaterlp hat kostenlosen Webspace.

   17:04, 27.7.2011

   Da blick ich nicht durch :D
   
   Wie groß muss denn das Bild für die ganze Seite sein?

7. ole-reglitzki

   

   ole-reglitzki hat kostenlosen Webspace.

   18:26, 27.7.2011

   Also ich denke auch, dass die Erklärung unter malias Link die (z.Zt.) einzige (universelle) Lösung ist.
   Zusammengefasst:
   

   <img src="BILD.jpg" style="position: fixed; left: 0; right: 0; width: 100%; height: 100%;" />

   (ungetestet)
   einfach in den Body einfügen.
   schöner wäre es natürlich, die Styles im Head, oder in einer externen css-Datei zu setzen.
   
   Nachteile dieser Lösung:
   Da es nicht als Hintergrund-Bild gilt, kann man das Bild per Drag&Drop (zumindest in FF) 'anfassen'.
   Außerdem kann man es markieren, was einen unschönen Blauton rein bringt.
   Rechtsklick -> Hintergrundbild anzeigen funktioniert nicht.
   
   Das mit dem Markieren ließe sich laut dem hier folgendermaßen lösen:
   

   <img src="BILD.jpg" style="position: fixed; left: 0; right: 0; width: 100%; height: 100%; -moz-user-select: none; -khtml-user-select: none;" />

   (ungetestet)
   Zu dem 'anfassen' des Bildes fiele mir nur die unsaubere Methode ein, noch ein leeres Div darüber zu legen:
   

   <img src="BILD.jpg" style="position: fixed; left: 0; right: 0; width: 100%; height: 100%; -moz-user-select: none; -khtml-user-select: none;" />
   <div style="position: fixed; left: 0; right: 0; width: 100%; height: 100%;" />

   (ungetestet)
   
   Beitrag zuletzt geändert: 27.7.2011 18:26:42 von ole-reglitzki

8. nemoinho

   

   nemoinho hat kostenlosen Webspace.

   21:17, 27.7.2011

   so jetzt haben wir uns das hier alle mal angesehen und nun kommt die CSS-Lösung, die in Browsern natürlich schon lange funktioniert, aber nicht sehr bekannt ist, weil der Internetexplodierer das erst seit v9 unterstützt…

   body {
       background-image:url('url_zum_bild');
       background-size:100%;
   }

   Eine Alternative ist dazu noch diese:
   HTML

   <!-- head und so -->
   <body>
       <img id="background" src="url_zum_bild" alt="" />
       <!-- hier der Seiteninhalt -->
   </body>
   </html>

   CSS

   body {
       min-height:100%;
   }
   #background {
       width:100%;
       height:100%;
       position:fixed;
       top:0;
       left:0;
       z-index:-1000;
   }

   So und hier noch eine Frage, was willst du damit eigentlich erreichen??? Wenn du auf einem 17" Monitor entwickelst und sich dann jemand die Seite auf einem 22" Monitor ansieht, dann ist alles verpixelt => beschissen. Das selbe passiert auch wenn sich das jemand auf einem sehr kleinen Gerät, wie nem Netbook oder Smartphone ansieht, darum die Frage, wozu willst du das haben, ich wette es gibt eine bessere Lösung!
   
   Mit freundlichen Grüßen
   
   PS.: Anbei noch eine Tabelle, seit wann welcher Browser das background-size kann:

   Browser | aktuelle Version | seit Version | seit Jahren 
   --------+------------------+--------------+------------
   Firefox |              5.0 |          3.6 |        > 1½
   Chrome* |             12.0 |          0.3 |        > 2¾
   Opera   |             11.5 |         10.0 |        > 1¾
   Safari* |              5.1 |          3.1 |        > 3¼
   MS-IE   |          9.0/8.0 |          9.0 |         ~ ¼
   
   * Die Idee Wurde von Webkit erdacht, die Engine welche 
   Safari und Chrome zugrunde liegt, darum beherschten diese 
   beiden Browser das signifikant früher.

   
   
   Beitrag zuletzt geändert: 27.7.2011 21:27:56 von nemoinho

9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?