Tabellen Hintergrundbild CSS

pathen

Hallo,

seit drei Tagen versuche ich nun Herr über Hintergrundbilder meiner Tabelle zu werden aber komme leider nicht auf die Lösung. Nach unzähligen Foren, Tutorial-Seiten und Hilfe-Suche im Freundes und Bekanntenkreis hab ich beschlossen hier mal nach zu fragen.

Was will ich machen?
Tabelle (1 Zeile; 3 Spalten) um 3 Boxen zu erstellen die zu weiteren Seiten linken. Damit ich ein Titel über die Box legen kann möchte ich die Bilder als Hintergrund jeder Zelle festlegen. Die Bilder sollen sich beim Verändern der Größe des Browsers proportional anpassen.

Problem
Die Bilder (sind größer als die Zelle) passen sich nicht der Zellengröße an, sondern bleiben immer in der Original-Größe. Wenn ich die Bilder als Inhalt in die Zelle einfüge, funktioniert es wunderbar.

Leider ist meine Website nicht online, weshalb ich den Quellcode hier posten muss.

HTML

<html><head>
<style type="text/css">
img {width: 100%; 
     height: auto;}
background-image {weidth: 33%;
                 height: auto;}
</style>
</head>
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td width="33%" max-height="auto" style="background-image:url(http://farm9.staticflickr.com/8598/16025680094_f1c388d029_b.jpg); background-repeat:no-repeat;">
</td>
<td width="33%" max-height="auto" style="background:url(http://farm9.staticflickr.com/8676/16025680154_a9452ef7c7_b.jpg); background-repeat:no-repeat;">
</td>
<td width="33%" height="auto" style="background:url(http://farm9.staticflickr.com/8655/16646564091_c518f46ec6_b.jpg); background-repeat:no-repeat;">
</td>
</tr>
</table>
</html>

Alles anzeigen

Kann mir jemand helfen?

Besten Dank!!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

m-ra

HTML

<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td width="33%" max-height="auto" style="background:url(http://farm9.staticflickr.com/8598/16025680094_f1c388d029_b.jpg); background-size: 100%; background-repeat:no-repeat;"></td>
<td width="33%" max-height="auto" style="background:url(http://farm9.staticflickr.com/8676/16025680154_a9452ef7c7_b.jpg); background-size: 100%; background-repeat:no-repeat;"></td>
<td width="33%" max-height="auto" style="background:url(http://farm9.staticflickr.com/8655/16646564091_c518f46ec6_b.jpg); background-size: 100%; background-repeat:no-repeat;"></td>
</tr>
</table>

So?

Hab [FONT=courier new]background-size:100%;[/FONT] verwendet.

Ah ja: es gibt kein [FONT=courier new]weidth[FONT=arial].[/FONT][/FONT]

pathen

Danke für die schnelle Antwort. Aber leider funktioniert es bei mir nicht. Habe es wie folgt eingebunden:
(sorry für ggf. kleine Fehler, ich bin selber noch Anfänger was CSS angeht)

HTML

<html><head>
<style type="text/css">
img {width: 100%; 
     height: auto;}
background-image {width: 33%;
                 height: auto;}
</style>
</head>
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td width="33%" max-height="auto" style="background:url(http://farm9.staticflickr.com/8598/16025680094_f1c388d029_b.jpg); background-size: 100%; background-repeat:no-repeat;"></td>
<td width="33%" max-height="auto" style="background:url(http://farm9.staticflickr.com/8676/16025680154_a9452ef7c7_b.jpg); background-size: 100%; background-repeat:no-repeat;"></td>
<td width="33%" max-height="auto" style="background:url(http://farm9.staticflickr.com/8655/16646564091_c518f46ec6_b.jpg); background-size: 100%; background-repeat:no-repeat;"></td>
</tr>
</table>
</html>

Alles anzeigen

m-ra

Kannst Du vielleicht mal einen Screenshot machen oder Dein Beispiel hochladen?

Die Bilder, die Du eingefügt hast, werden als nicht verfügbar angezeigt - und mit diesem "Hinweis" von flickr sieht es eigentlich schon so aus, als ob sich die Bilder der Größe der Zellen anpassen.

Hast Du mal drüber nachgedacht, auf Tabellen zu verzichten - da diese noch nie für ein Layout gedacht waren?

pathen

Die Bilder sollen als Boxen auf eine neue Kategorie verlinken. Gibt es eine schönere Lösungen die Boxen nebeneinander darzustellen mit HTML/ CSS?

Habe derweilen mit einem anderen Kollegen gesprochen der mir mitgeteilt hat, dass sich der Hintergrund nicht der Zellengröße anpassen kann, weil es eben nur ein Hintergrund ist. (Zumindest nicht nur mit HTML und CSS)

NDDT

Heist das das du dein Layout mit Tabellen machst?

Dann gibt es auf jeden Fall schönere Wege. Verwende unbedingt Div-Layer!

pathen

Ja momentan benutze ich eine Tabelle für das Layout. Hast du ein gutes Tutorial für Div-Layer? Muss mich leider noch in alles einarbeiten.

m-ra

Ich versteh es immer noch nicht... Hier mal mein Beispiel auf meinem Server: http://m-ra.de/demo/pathen/test.html

Zellen -> Hintergrundbild -> passt sich an ?

Eine "Tutorial" für DIV-Layer gibt es eigentlich gar nicht - aber zu Grundlagen von Webdesign. Und da gehört der Umgang mit DIV schon dazu.

Kurz die Theorie: Du erstellst drei DIV ([FONT=courier new]<div>[/FONT]....[FONT=courier new]</div>[/FONT]) und kannst diesen Breite und Höhe verpassen (mit CSS und Klassen/IDs) genauso ein Hintergrundbild. Nebeneinander bekommst Du sie mit [FONT=courier new]float[/FONT] (CSS).
Breite/Höhe solltest Du (wenn alle drei gleich sind) mit einer ID lösen, das Hintergrundbild dann mit Klassen jeweils für die drei Boxen.

NDDT

Es ist eine riesen Arbeit das komplette Layout selbst zu machen. Vorallem wenn man möchte das es sich dynmaisch an Bildschrimgröße anpasst. Normalerweise verwendet man dafür Frameworks. Gibt eine ziemlich große Auswahl. Mir persöhnlich gefällt Bootstrap.

Kannst dich ja mal einlesen.

Das Design musst du dann natürlich trotzdem machen: Hintergrundbilder usw.

pathen

Okay schau ich mir mal an. Besten Dank!

m-ra

Ist mein Beispiel nicht das, was Du wolltest?

pathen

doch das müsste es sein. ich probiere es mal über deinen weg aus.

Ich melde mich dann noch einmal!

Besten Dank.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Tabellen Hintergrundbild CSS

Jetzt mitmachen!