CSS Background img auf volle breite

[som3]

Hallo.
Gibt es eine Möglichkeit ein Background img auf die volle breit zu dehnen?
Die höhe wird einfach an die Breite angepasst.

momentan sieht es so aus:

body.home {
background-image: url(images/bg-home.png), url(images/bg.png);
background-position: center top, left top;
background-repeat: no-repeat, repeat;
}

das bild bg-home.png soll auf die volle breite ausgedehnt werden, oben im center liegen und mit nach oben scrollen.

gruß
​Pascal

 

[Reglohln]

Mir ist mittels CSS keine Möglichkeit bekannt. Ich fände es aber auch ehrlich gesagt ziemlich hässlich, wenn etwas gestreckt aussieht.

Tut das wirklich Not?

 

[som3]

Es soll ja nicht gestreckt werden. Die höhe soll dynamisch zur breite vom Monitor angepasst werden.
So würde es lediglich etwas verpixelt aussehen bei zu Größen monitoren.

 

[PCTüftler]

Hallo,

so sollte es mit fast allen Browsern klappen:

body {
background: black url('IMG') no-repeat fixed center;
background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
-khtml-background-size: cover
}

Edit: Die Positionsangaben musst du selbst ergänzen bzw. ändern, hab den Satz glatt überlesen

 

[Daaron]

so sollte es mit fast allen Browsern klappen:

"fast" ist hier der Knackpunkt. Erst der IE9 kann mit background-size umgehen. Wenn man Idioten mit veralteten Browsern durchfüttern muss darf man schön komplexe JavaScript-Fallbacks für IE<=8 schreiben.

 

[som3]

Nein, denn dann scrollt das Bild nicht mehr mit. den das bild soll nur im oberen bereih sichtbar sein.
wenn mann runter scrollt soll es nicht mehr sichtbar sein.

Die Cover Funktion scheidet für mich komplett aus.

 

[Reglohln]

Hier stand Mist.

 

[Daaron]

dann nimm nicht "cover" sondern gib background-size eben eine Breite von 100% und ein Höhe von "auto".

 

[som3]

Dann habe ich aber wieder ein Problem in Wordpress.
Auf jeder Seite ist ein anderes bild.
Mit meinem Framework ist es recht kompliziert auf jeder Seite einen wrapper mit anderer id zu erstellen.
​

Ergänzung (7. April 2013)

dann nimm nicht "cover" sondern gib background-size eben eine Breite von 100% und ein Höhe von "auto".

Dann bug das background pattern.
body.home {
background-image: url(images/bg-home.png), url(images/bg.png);
background-position: center top, left top;
background-repeat: no-repeat, repeat;
}

 

[Daaron]

nochmal:
background-size: 100% auto;

 

[som3]

nochmal:
Er wendet das dann auch auf die Datei bg.png an die nur ein kleines muster ist welches repated werden soll.
Wird dadurch aber auf die volle breit gezogen.

 

[Daaron]

background-size sollte sich verhalten wie -image, -position oder -repeat: gib mehrere mit Komma getrennte Werte an, um mehrere verschiedene Größen für die einzelnen Bilder zu definieren.

Ansonsten: Wrapper-Div.

 

[daley]

Ich mach das ganze immer so:

In der css Datei:

#hintergrund{
margin:0px;
padding:0px;
position:fixed;
z-index:-1;
width:100%;
height:100%;
}

in der .php oder .html datei:

<img id="hintergrund" src="hintergrund.jpg" alt="Hintergrund" />

und schon ist das ganze immer auf 100% und das hintergrundbild skaliert mit.

 

[Daaron]

Der Hintergrund ist aber kein Inhaltselement, sondern Gestaltung. Somit hat er erstens nichts im HTML-Code zu suchen (sondern reines CSS) und zweitens erst recht keinen Text im alt-Attribut zu haben.

 

[daley]

so lange es funzt is mir das scheißegal ob das ein Inhaltselement ist oder nicht.

das ist das Internet. Jeder kann es so machen wie er es will. So lange es W3C konform ist passt alles. und sogar das ist mir sowas von egal.

 

[master2k]

habs auch so wie daley geschrieben hat.. war die einzigste lösung (die funktioniert) die ich gefunden hab... Background einfach einen placeholder wie schwarz 4x4 nehmen und dass ganze als bild einbinden funktioniert so wunderbar auf meiner Homepage www.jeschke-software.at

lg

m2k

 

[Reglohln]

So sieht die Seite dann auch aus. Schön auf Semantik geschi**** und Tabellenlayout FTW.

Ich frage mich, was so ein skalierbares Hintergrundbild für einen Sinn haben soll. Dann lieber für unterschiedliche Auflösungen entsprechende Backgrounds laden lassen. Wenn ich das riesen Bild aufm Smartphone/Tablet anzeigen will, trifft einen evtl. der Schlag. Von mobilem Internet mal ganz abgesehen.

Es wäre es doch vollkommen verschmerzbar, wenn das Bild größer ist und links und rechts abgeschnitten wird, wenn der Client verkleinert wird. Was wäre so schlimm daran?

 

[master2k]

Es wäre es doch vollkommen verschmerzbar, wenn das Bild größer ist und links und rechts abgeschnitten wird, wenn der Client verkleinert wird. Was wäre so schlimm daran?

Dabei gibt's 2 Probleme ... das Bild MUSS eine enorme Auflösung haben damit es nachher (noch) gut aussieht .. und wenn das der Fall ist muss es trotzdem vollständig geladen werden (wenn ich mich nicht irre). Das würde dass ganze am Smartphone also noch langsamer machen.

aber in Sachen webdesign bin ich auch nur ein noob muss ich gestehen ich bin programmierer aber kein webdesigner ^^ ... und wenn man es irgendwie "stretcht" siehts auch blöd aus.:/

 

[Reglohln]

Deswegen würde man für Smartphones, ect pp eigene CSS-Versionen bereitstellen.

Klar muss das Bild vollständig geladen werden. Da könnte man aber unter Umständen versch. Auflösungen nehmen und diese je nach Clientauflösung setzen. Bedingt zwar wieder JS, aber es wäre eine möglichkeit.

Und wieso muss das Bild enorme Ausmaße haben? Reicht theoretisch auch 1024er Auflösung und das Bild wird dann bei größerer Browserbreite halt nicht breiter (ggf. ein Farbverlauf zu schwarz/Hintergrundfarbe) und bei kleinerer Browserbreite wird das Bild abgeschnitten. Oder man nimmt halt ein recht breites Bild, was dann für höhere Auflösungen besser geeignet ist und bei kleineren Browserfenstern dann halt eher abgeschnitten wird. Alles besser, als irgendwelche Experimente mit proprietären CSS-Argumenten oder semantisch falschen Inhaltselementen, wie <img>.

Zudem: solche aufdringlichen Hintergrundbilder, wie bei deiner Seite, finde ich einfach unangebracht. Absolut ablenkend und überflüssig. Zumal die Aufmerksamkeit nochmals mehr auf das Bild gelenkt wird, wenn sich dieses mit dem Browser verkleinert.

Hier sollte man einfach das ganze Design überdenken und nach besseren Möglichkeiten suchen, welche zudem am Besten auch von jedem Browser unterstützt werden.

 

[master2k]

@Reglohn : dass mit den dynamischen Bildern war eigentlich nur ein Experiment aber ich würde gern die dynamischen bilder beibehalten aber nur für die menü Hintergrund Region und den rest statisch .. ich muss dir 100% zustimmen .. aber das Tabellen layout sollte sich eigentlich perfekt an das Smartphone anpassen soweit ich weiß ... hmm