Wie kann ich ein Bild mit automatischer Skalierung auf Bildschirmbreite einfügen?

[pom]

Hallo zusammen,

bei der Seite http://cms.wattec.de/ sollte unter den Spruch "Tropfen für Tropfen zu Ihrem Vorteil" noch ein Bild eingefügt werden. Dies sollte sich aber - wie der Slider auch - automatisch auf die gesamte Bildschirmbreite skalieren.

Wie kann ich das am Besten umsetzen? Ich habe schon mehreres probiert: Als Background-Image, als normales Image, mit CSS-Anweisungen wie (width 100% etc.), aber es funktioniert einfach nicht. Was mache ich falsch?

Viele Grüße

[Spooky]

Wo genau meinst du nun? Den von dir erwähnten Spruch sehe ich nur auf der Plane des Anhängers in einem der Bilder im Slider.

Aber damit ein Bild mit folgendem Markup:

<figure>
    <img src="..." />
</figure> 

immer die volle verfügbare Breite des Elternelements einnimmt, brauchst du bspw. folgendes CSS:

figure {
    margin:0;
    max-width:100%;
    display:block;
}

figure img {
    width:100%;
    height:auto;
    display:block;
} 

[pom]

Ich habe das Bild um welches es geht nochmal eingeblendet und einen Screenshot mit Markierung erstellt.
Um das gelb markierte Bild handelt es sich. Da hilft mir ja kein PHP, sondern nur CSS oder?
wattec_screen.JPG

[Spooky]

Naja, ginge auch mit PHP, aber es geht auch ganz einfach mit CSS. Eben mit bspw. der von mir erwähnten Variante.

Da du das Bild wieder ausgeblendet hast, können wir dir auch nicht sagen, was du falsch gemacht hast

[pom]

Hallo nochmal,

ich habe das Bild nicht ausgeblendet, es kommt nur so weit unten, dass man etwas scrollen muss ;-)
Das mit dem CSS funktioniert jetzt an sich, aber das Bild ist immer im DIV "inside", welches das Ganze begrenzt. Ich habe im Layout auch probiert das Bild als Copyright (so wie das graue Feld ganz unten) zu definieren, anstatt als Footer - das geht aber leider nicht.
Wie gesagt, wenn ich es mit dem Firebug anschaue, ist das Bild im DIV "inside". Wie bekomme ich es da raus???

Viele Grüße

[Spooky]

Auf welcher Seite soll das Bild jetzt sein? Auf der Startseite sehe ich nichts.

[pom]

Hallo nochmal,

also das Bild (Wassertropfen mit Welle) ist immer noch auf der Startseite weiter unten, oberhalb vom grauen Footerstreifen.
Siehe Screen:
screen.JPG

[Spooky]

Ah, sorry - hatte immer nur die Englische Startseite angesehen.

Wie hast du das Bild nun überhaupt eingefügt?

Prinzipiell solltest du das Bild in eine eigene Section geben, ähnlich wie bei der "Copyrightsection" bspw., oder "Informationsection" etc.

Oder - falls sich im <footer> sonst nichts befindet - den "footer .inside" Selektor aus folgender Definition entfernen:

header .inside, footer .inside, .container_inside, .custom .inside, .custom #Informationsection .inside {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
} 

und zusätzlich auch noch

#footer .inside {
    padding: 2% 3%;
} 

entfernen.

[tab]

Das mit dem CSS funktioniert jetzt an sich, aber das Bild ist immer im DIV "inside", welches das Ganze begrenzt. Ich habe im Layout auch probiert das Bild als Copyright (so wie das graue Feld ganz unten) zu definieren, anstatt als Footer - das geht aber leider nicht.
Wie gesagt, wenn ich es mit dem Firebug anschaue, ist das Bild im DIV "inside". Wie bekomme ich es da raus???

Wie ist das denn eingebunden? Über einen normalen Artikel, der auf jeder Seite einzeln angelegt wird oder ist das ein Modul?
Was heißt "das geht aber leider nicht." Sowohl ein Modul als ein Artikel sollte sich doch in jedem Layoutbereich ausgeben lassen. Wenn es ein normaler Artikel ist, dann muss dazu eben das Artikelmodul in den Layoutbereich rein.

[pom]

Vielen Dank für die Hilfe, jetzt passt das mit dem Bild.
Logo und Navigation "kleben" jetzt zwar auch am äußeren Rand, aber es hat ja auch nicht jeder so einen großen Bildschirm, dass in der Mitte ein großes Loch entsteht ;-)
Ich denke das ist ok und werde es dem Kunden mal so vorschlagen :-)