Hallo Leute,

dieses Thema ist wahrscheinlich ein leidiges Thema. Und ich hab auch gegoogelt, und diese Seite gefunden:

http://www.cssplay.co.uk/layouts/background.html

doch das steht wasvon alice im wunderland, nichts was zur lösung meines problems beitragen könnte.

Es geht sich um folgendes:
Ich will für ein Cafe eine Seite machen, mit 360 Grad option. Also quasi nen panorama des ladens, und man kann nen virtuellen rundgang machen. Je nachdem wie groß mein Monitor ist, bzw welche auflösnug dieser nutzt, sollen die Bilder (die ne hohe Auflösung haben, das sie mit ner Spiegelreflex aufgenommen wurden) die entsprechenden Tabellenspalten ausfüllen, so dass die Tabelle den ganzen Bildschirm ausfüllt. Wie realisier ich das nun am geschicktesten?
Hat jemand nen Beispiel? Ich danke euch im Vorraus

LG

Ben

Hi,

in CSS3 ist background-size vorgesehen, womit sich Hintergrundbilder skalieren lassen.

Bis aber diese Eigenschaft in allen Browsern implementiert sein wird, wirst du auf den genannten "Workaround" von Stu Nicholls zurückgreifen müssen, um ein <img>-Grafikelement, das sich in der unteren Schichtposition befindet, und der Seiteninhalt mit einem höheren z-index-Wert darüber gelegt wird, der Größe des Viewports anzugleichen.

mfg Maik

kannst du mir dafür vielleicht ein Beispiel geben? Auf der Seite steht da nämlich nichts mehr irgendwie ,. . Wäre sehr nett

Deine gefundene Seite ist das Beispiel. Und darin ging es "inhaltlich" schon immer um "Alice im Wunderland" mit dem skalierbaren Kaninchen im Browserfenster

Einzig oben links diese Info vom Autor Stu Nicholls (http://www.cssplay.co.uk/):

The background image is always 100% x 100% (body size). But it only works with a 100% x 100% html/body

Werf mal einen Blick in den Seitenquelltext. Dort steht alles, was du bei Stus CSS-Beispielen wissen möchtest

mfg Maik

Hallo, ich habe eine Tablle mit verschiedennen Hintergrund bilder.

Wie kann ich einem Hintergrundbild sagen das er 100% hoch sein muss?
Bei google habe ich diesen Code gefunden. Jedoch funktioniert es bei mir werder im IE 8 noch im FI

Code css:

1	background-size: 100%;

und das ist ein Teil meiner Tabelle:

HTML-Code:

		<td width="224" height="767" style="background-image: url(Bilder/Links.jpg); background-repeat: no-repeat; vertical-align:top; background-size:100%;">
		<div style="vertical-align:top; margin:5px; margin-top:20px;">
		Text
		</div>
		</td>

Weis jemand wie ich die ändern kann?

Hi,

background-size ist Bestandteil der CSS3-Spezifikation, und daher zum heutigen Zeitpunkt noch nicht in allen Browsern implementiert.

Darauf hatte ich in diesem Thema aber auch schon in Post #2 hingeweisen, und seither hat sich in den vergangenen drei Monaten daran auch nichts geändert, womit du bis dahin den hier ebenfalls genannten Workaround nutzen müsstest:

Zitat von Maik

in CSS3 ist background-size vorgesehen, womit sich Hintergrundbilder skalieren lassen.

Bis aber diese Eigenschaft in allen Browsern implementiert sein wird, wirst du auf den genannten "Workaround" von Stu Nicholls zurückgreifen müssen, um ein <img>-Grafikelement, das sich in der unteren Schichtposition befindet, und der Seiteninhalt mit einem höheren z-index-Wert darüber gelegt wird, der Größe des Viewports anzugleichen.

mfg Maik

Und was für eine Möglichkeit gibt es um es ohne diese "size" zu machen? Oder kann man das garnicht?

Mit dem Z-Index geht das auch nicht. Aussert ich muss das aners verwenden.

Hast du die vorangegangen Beiträge nicht gelesen, und den eingangs genannten Link besucht, wenn du dich in einem bestehenden Thema zu Wort meldest?

Diese Technik ist derzeit die einzige Möglichkeit, browserübergreifend ein Bild in seiner Höhe zu strecken.

mfg Maik

Zitat von smyle

Mit dem Z-Index geht das auch nicht. Aussert ich muss das aners verwenden.

Der portierte "Workaround" in deinen vorgestellten Code funktioniert bei mir tadellos:

HTML-Code:

<table>
  <tr>
    <td width="224" height="767" style="vertical-align:top;">
      <img src="Bilder/Links.jpg" width="224" height="767" alt="">
      <div style="position:relative; z-index:2; margin:-747px 5px 5px 5px;">Text</div>
    </td>
  </tr>
</table>

mfg Maik

@Grunge: Ich glaube Maik will besonders auf diesen Teil der Seite hinweisen.

HTML-Code:

<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;} 
#content {padding:5px 300px 20px 200px;}
p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
#fixed {position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000; padding:10px;}
</style>
</head>
<body>
<div>
<img id="background" src="rabbit.jpg" alt="" title="" /> 
</div>

Im CSS Abschnitt ist das mit der Größe des Bildes geregelt.

Allerdings sieht das arme Häschen irgendwie verschoben aus. Wenn man die Seite nicht im Vollbild anzeigt, stimmen die Proportionen. Bei Vollbild ist er irgendwie breiter als er sein soll!!

Zitat von tombe

@Grunge: Ich glaube Maik will besonders auf diesen Teil der Seite hinweisen.

HTML-Code:

<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;} 
#content {padding:5px 300px 20px 200px;}
p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
#fixed {position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000; padding:10px;}
</style>
</head>
<body>
<div>
<img id="background" src="rabbit.jpg" alt="" title="" /> 
</div>

Im CSS Abschnitt ist das mit der Größe des Bildes geregelt.

Allerdings sieht das arme Häschen irgendwie verschoben aus. Wenn man die Seite nicht im Vollbild anzeigt, stimmen die Proportionen. Bei Vollbild ist er irgendwie breiter als er sein soll!!

Jo, das ist der relevante Code aus Stus Beispiel

Und dass das Bildmotiv (Hase) beim Skalieren der Fenstergröße "verschoben" erscheint, ist letztlich den relativen Breiten- und Höhenangaben für das Grafikelement geschuldet.

mfg Maik