Hintergrundbild skalieren

[Ralph]

Ich habe ein Hintergrundbild auf meiner Seite, daß trotz beachtlicher Dateigröße zu klein ist. Nun wollte ich das eigentlich verkleinern und mit sowas wie width:400px skalieren. Klappt im Background-image nicht so ganz. Wie mache ich das?

Andere Möglichkeit wäre ein Bild fest auf die Seite zu legen, nicht als Background. Das wäre dann skalierbar. Aber ich bekomme das mit z-Ebene nicht hin, das im Hintergrund zu halten. Woran kann das liegen?

[Rekire]

Ich habe ein Hintergrundbild auf meiner Seite, daß trotz beachtlicher Dateigröße zu klein ist. Nun wollte ich das eigentlich verkleinern und mit sowas wie width:400px skalieren. Klappt im Background-image nicht so ganz. Wie mache ich das?

Andere Möglichkeit wäre ein Bild fest auf die Seite zu legen, nicht als Background. Das wäre dann skalierbar. Aber ich bekomme das mit z-Ebene nicht hin, das im Hintergrund zu halten. Woran kann das liegen?

Hallo,
das müsste gehen ich habe mal irgendwo etwas gelesen leider ist es aber nicht in SELFHTML dokumentiert (oder ich habe es übersehen) grob müsste es so gehen:

body {
background:url(background1.gif) 400px 300px center center repeat-x;
}

Wenn ich mich jetzt nicht irre müsste damit das Hintergrundbild auf eine Auflösung von 400x300Px gesetzt werden, zusätzlich ist es horizontal wie vertikal zentriert und wird nicht gekachelt.

[Ralph]

Hm, ne, so gehts nicht, hab ich gerade probiert. Das ist der Body Tag, damit skalierst Du den ganzen Body auf 400px, wäre etwas sinnfrei. Müsste irgendwie sowas wie background-size: 400px 400px sein, aber den Befehl scheints nicht zu geben.

[Axel Richter]

Hallo,

Müsste irgendwie sowas wie background-size: 400px 400px sein,

Ja. Es soll mal gehen in CSS3 http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background-size.

aber den Befehl scheints nicht zu geben.

Im aktuell gültigen CSS gibt es diese Eigenschaft noch nicht: http://www.w3.org/TR/CSS21/colors.html#background-properties.

viele Grüße

Axel

[Auge]

Hallo

das müsste gehen ich habe mal irgendwo etwas gelesen leider ist es aber nicht in SELFHTML dokumentiert (oder ich habe es übersehen)

Warum sollte es dokumentiert werden, wenn es diese Möglichkeit nicht gibt? Womit Ralphs Frage, wenn auch negativ, beantwortet wäre.

body {
background:url(background1.gif) 400px 300px center center repeat-x;
}

Wenn ich mich jetzt nicht irre müsste damit das Hintergrundbild auf eine Auflösung von 400x300Px gesetzt werden,

Du irrst dich. Die Angabe von 400px 300px sorgt dafür, dass das Hintergrundbild, von der linken oberen Ecke des Elternelements (hier: body), horizontal um 400px und vertical um 300px verschoben wird. Aber ...

zusätzlich ist es horizontal wie vertikal zentriert

... mit der Angabe von 'center center' hebst du dies wieder auf, womit deine zweite Aussage ('horizontal wie vertikal zentriert') zutrifft.

und wird nicht gekachelt.

Doch, und zwar horizontal. Dafür sorgt die Angabe repeat-x.

Tschö, Auge

[Rekire]

Hallo

das müsste gehen ich habe mal irgendwo etwas gelesen leider ist es aber nicht in SELFHTML dokumentiert (oder ich habe es übersehen)

Warum sollte es dokumentiert werden, wenn es diese Möglichkeit nicht gibt? Womit Ralphs Frage, wenn auch negativ, beantwortet wäre.

Wie Axel Richter eben gepostet hat:
»»»» Müsste irgendwie sowas wie background-size: 400px 400px sein,
»»Ja. Es soll mal gehen in CSS3 »»http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background-size.

body {
background:url(background1.gif) 400px 300px center center repeat-x;
}

Wenn ich mich jetzt nicht irre müsste damit das Hintergrundbild auf eine Auflösung von 400x300Px gesetzt werden,

Du irrst dich. Die Angabe von 400px 300px sorgt dafür, dass das Hintergrundbild, von der linken oberen Ecke des Elternelements (hier: body), horizontal um 400px und vertical um 300px verschoben wird. Aber ...

Ich habe dabei Offentsichtlich an CSS 3 gedacht.

zusätzlich ist es horizontal wie vertikal zentriert

... mit der Angabe von 'center center' hebst du dies wieder auf, womit deine zweite Aussage ('horizontal wie vertikal zentriert') zutrifft.

Wenn man von CSS2 ausgeht ja und somit mein Fehler.

und wird nicht gekachelt.

Doch, und zwar horizontal. Dafür sorgt die Angabe repeat-x.

Stimmt, ein richtig dicker Fehler von mir.

[Auge]

Hallo

das müsste gehen ich habe mal irgendwo etwas gelesen leider ist es aber nicht in SELFHTML dokumentiert (oder ich habe es übersehen)

Warum sollte es dokumentiert werden, wenn es diese Möglichkeit nicht gibt? Womit Ralphs Frage, wenn auch negativ, beantwortet wäre.

Wie Axel Richter eben gepostet hat:
»»»» Müsste irgendwie sowas wie background-size: 400px 400px sein,
»»Ja. Es soll mal gehen in CSS3 »»http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background-size.

Naja, das ist aber noch Zukunftsmusik. Schön, wenn es dort implementiert werden soll, CSS3 ist aber noch kein verabschiedeter Standard. Und solange es die Browser nicht unterstützen, ist es zudem für die Praxis wertlos (leider).

Tschö, Auge

[Axel Richter]

Hallo,

body {
background:url(background1.gif) 400px 300px center center repeat-x;
}
Ich habe dabei Offentsichtlich an CSS 3 gedacht.

*g* Auch da wäre es _so_ nicht gegangen, wenn es denn mal endgültig so verabschiedet wird, wie jetzt geplant, dann wäre die Syntax so:

background:url(background1.gif) (400px 300px) center center repeat-x;

Beachte die Klammern um die background-size. Die sind notwendig, weil man diese Angabe sonst nicht von background-position unterscheiden könnte.

Allerdings ist es meiner Meinung nach sowieso immer besser, die Eigenschaften einzeln anzugeben und keine shorthand propertys zu benutzen.

viele Grüße

Axel

[Rekire]

Hallo,

body {
background:url(background1.gif) 400px 300px center center repeat-x;
}
Ich habe dabei Offentsichtlich an CSS 3 gedacht.
*g* Auch da wäre es _so_ nicht gegangen, wenn es denn mal endgültig so verabschiedet wird, wie jetzt geplant, dann wäre die Syntax so:

background:url(background1.gif) (400px 300px) center center repeat-x;

Schlimm, ich wusst gar nicht das hier alle Antworten perfekt sein müssen. Ich meine ich habe geschreiben so sollte es grob aussehen :-(

[Axel Richter]

Hallo,

Schlimm, ich wusst gar nicht das hier alle Antworten perfekt sein müssen.

Das müssen sie nicht. Im Allgemeinen wird hier solange verbessert und gegebenenfalls diskutiert, bis sie es fast sind ;-) Das ist ja grade das Gute an einem solchen Forum. Man lernt immer wieder dazu bzw. bekommt zumindest Denkanstöße.

Ich meine ich habe geschreiben so sollte es grob aussehen :-(

Es wollte Dich niemand angreifen.

viele Grüße

Axel

[Rekire]

hi,

Ich meine ich habe geschreiben so sollte es grob aussehen :-(
Es wollte Dich niemand angreifen.

Es ist aber frustrierend so häufig korigiert zu werden.

[Auge]

Hallo

Ich meine ich habe geschreiben so sollte es grob aussehen :-(
Es wollte Dich niemand angreifen.

Es ist aber frustrierend so häufig korigiert zu werden.

Auch wenn das gerade hier[1] manchmal sehr ausgiebig erfolgt, gewöhn' dich dran, so ist das Leben.

[1] Wobei das bei technischen Themen geradezu 'notwendigst' ist, da sich ein Erfolg manchmal, wegen scheinbar klitzekleiner Details, nicht einstellt.

Tschö, Auge

[Axel Richter]

Hallo,

Es wollte Dich niemand angreifen.
Es ist aber frustrierend so häufig korigiert zu werden.

Ja, das kenne ich auch und hab da auch schon manchmal überreagiert. Aber auch das gehört dazu. Hier kommunizieren schließlich Menschen, keine Automaten.

viele Grüße

Axel

[Ashura]

Hallo Axel.

Allerdings ist es meiner Meinung nach sowieso immer besser, die Eigenschaften einzeln anzugeben und keine shorthand propertys zu benutzen.

Folgendes empfindest du also nicht als Krampf?

background-color: #000;  
background-image: url(foo.png);  
background-repeat: repeat-y;  
background-position: left center;

Einen schönen Freitag noch.

Gruß, Ashura

[Axel Richter]

Hallo,

Allerdings ist es meiner Meinung nach sowieso immer besser, die Eigenschaften einzeln anzugeben und keine shorthand propertys zu benutzen.

Folgendes empfindest du also nicht als Krampf?

background-color: #000;

background-image: url(foo.png);
background-repeat: repeat-y;
background-position: left center;

  
Nein, warum sollte ich? Die shorthand-propertys haben die unangenehme Eigenschaft, alle nicht angegebenen Eigenschaftswerte auf default zu setzen.  
  
~~~html
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>exact property vs. shorthand property</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
body {  
 background-color: #000;  
 background-image: url(foo.png);  
 background-repeat: repeat-y;  
 background-position: left center;  
}  
.myBody {  
 background: #FFF;  
 /*background-color: #FFF;*/  
}  
</style>  
</head>  
<body class="myBody">  
</body>  
</html>  

Schwups ist das Hintergrundbild weg, wo man doch _nur_ die Hintergrundfarbe ändern wollte.

viele Grüße

Axel

[Ashura]

Hallo Axel.

Nein, warum sollte ich? Die shorthand-propertys haben die unangenehme Eigenschaft, alle nicht angegebenen Eigenschaftswerte auf default zu setzen.

Gut, mag Ansichtssache sein, aber meist bezwecke ich genau das damit.

Schwups ist das Hintergrundbild weg, wo man doch _nur_ die Hintergrundfarbe ändern wollte.

Im Allgemeinen deklariere ich einmalig die Sammeleigenschaft und bei abweichenden Formatierungen auch wirklich nur die Eigenschaften, die sich verändern. Deshalb ist mir ein Fall, indem ich unbeabsichtigt eine Eigenschaft überschreibe, bisher auch noch nie vorgekommen.

Einen schönen Freitag noch.

Gruß, Ashura

[Auge]

Hallo

Andere Möglichkeit wäre ein Bild fest auf die Seite zu legen, nicht als Background. Das wäre dann skalierbar. Aber ich bekomme das mit z-Ebene nicht hin, das im Hintergrund zu halten. Woran kann das liegen?

Das geht ganz einfach mit z-index. Damit wird das damit ausgezeichnete Element in den Vordergrund geholt oder den Hintergrund verschoben. Das heißt aber noch nicht, dass es an der richtigen Stelle steht. Dazu muss es noch über einem anderen Element positioniert werden.

<http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index@title=SELFHTML: z-index>
<http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=SELFHTML: position>

<img src="background.png" alt="" width="" height="" id="hintergrund">  
<div id="inhalt"><!-- Hier kommt der Inhalt der Seite rein. --></div>

  
#hintergrund {  
z-index:-1; /* nach hinten verschieben (beachte die Anmerkungen unter 'Beachten Sie' in der SELFHTML-Beschreibung von z-index */  
position:absolute;  
top:...;  
left:...;  
}  

Tschö, Auge