# Hintergrundbild an Tabelle anpassen



## Grunge (17. Dezember 2009)

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


----------



## Maik (17. Dezember 2009)

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


----------



## Grunge (17. Dezember 2009)

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


----------



## Maik (17. Dezember 2009)

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


----------



## smyle (15. März 2010)

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  

```
background-size: 100%;
```

und das ist ein Teil meiner Tabelle:

```
<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?


----------



## Maik (15. März 2010)

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:



Maik hat gesagt.:


> 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


----------



## smyle (15. März 2010)

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.


----------



## Maik (15. März 2010)

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


----------



## Maik (15. März 2010)

smyle hat gesagt.:


> 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:


```
<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


----------



## tombe (15. März 2010)

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


```
<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!!


----------



## Maik (15. März 2010)

tombe hat gesagt.:


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


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


----------

