Grafik per css einfügen!?

Mich@el · 04.09.2006, 10:33

Wenn ich eine Grafik in FW erstellt habe und diese dann in DW in meiner Website einfügen möchte... kann es ja unter Umständen sein, dass das Laden der Grafik wegen der Größe doch sehr lange dauert.
Wie kann ich es hinbekommen, dass ich z.B. per css die Grafik per Stylesheet? einfügen kann. Geht man so vor?
Grds. kann man ja schon so einfach ein farbliche Hintergrundbild per css vorgeben. Allerdings soll da ein Verlauf rein. Und das geht wohl nicht mit css!?

Grüße
Michael

Jupp · 04.09.2006, 10:39

In CSS kann man Hintergrundfarben und eben auch -bilder definieren:

Code:

body {
   background: #fff url("img/bild.jpg") 0 0 no-repeat;
}

Aber was hat das mit den Ladezeiten zu tun?
Geladen werden muss das Bild natürlich so oder so.

Mich@el · 04.09.2006, 11:05

Zitat:

Aber was hat das mit den Ladezeiten zu tun?
Geladen werden muss das Bild natürlich so oder so.

da gebe ich Dir natürlich recht. Ich habe nur vor kurzem eine Seite gesehen, die eine Grafik sehr schnell geladen hat und ich aber keinerlei Hinweise im Quelltext gefunden habe, wie diese Grafik bezeichnet wird. Grds. ist es doch so, dass es sich um ein *.jpg; *.gif; etc. handelt. Aber hier habe ich nichts gefunden.

Jupp · 04.09.2006, 13:15

Irgendwie kommt man immer an den Pfad der Grafik, denn dem Browser muss selbiger ja bekannt sein, damit er die Grafik anzeigen kann. Ich verstehe immer noch nicht so ganz, worum es geht. Auch bei der von dir genannten Seite wird der Pfad zum Bild irgendwo im Quelltext vermerkt sein.

designfanatiker · 04.09.2006, 13:48

Zitat:

Zitat von Jupp

Auch bei der von dir genannten Seite wird der Pfad zum Bild irgendwo im Quelltext vermerkt sein.

... oder eben im Stylesheet.

Jupp · 04.09.2006, 19:35

Zitat:

Zitat von DukeXP

... oder eben im Stylesheet.

Das Stylesheet zähle ich zum Quelltext, schließlich ist es zusammen mit der HTML die Quelle der Darstellung

Rinaldo · 05.09.2006, 00:35

Das sehe ich wie Jupp. Und das eine Grafik per CSS schneller geladen wird, hab ich noch nicht gehört...

Mich@el · 05.09.2006, 08:22

Gut, da ich wohl etwas für "Verwirrung" sorgte. Hier habe ich mal zwei Beispielseiten: 1x die http://www.weboff.de/index.html

täuscht es, dass der Hintergrund einen linearen Verlauf hat? Dann müßte man den doch dann jedenfalls als externen Hintergrund auswählen.

Die andere Seite, die ich sehr interessant finde ist: http://www.platinpower.com/
Hier ist im Logo der Verlauf, die Schrift und der Falter zu sehen. Ist das ein *.jpg? Wenn ich bei der Seite einen Ladezeiten-Check mache, werden lediglich die kleinen Bildchen (Links) erkannt. Aber was ist mit dem Logo?
Vielleicht kann ja auch der Designer etwas dazu sagen?

Grüße
Michael

steff11 · 05.09.2006, 08:48

wie die Vorposter bereits anmerkten: Grafiken können per img-Tag im html-Code ODER per Background im CSS-Stylesheet eingebunden werden. Und davon wird hier heftigGebrauch gemacht, schau einfach mal rein:

Zitat:

html, body {
width:693px;
margin:0 auto;
background:url(images/bg.gif);
}

#box {
position:relative;
width:693px;
margin-bottom:10px;
background:url(images/bg_box.png);
}

h1 {
height:210px;
width:693px;
margin-top:43px;
text-indent:-9999px;
letter-spacing:-9999px;
background:url(images/header.png) no-repeat;
}

..... und so weiter und so fort

... und der Ladezeitencheck hat halt einen etwas beschränkten Horizont, der ist evtl. im letzten Jahrtausend konzipiert worden ...

grüssle, Steff

Mich@el · 05.09.2006, 09:02

Aha!

Danke!