[css]Hintergrundbild festlegen?

undertaker1988 · 11. Oktober 2005

Ich habe hier ein Code und möchte in dort beim zweiten Kästchen ein Hintergrundbild verwenden. Kann mir jemand dabei helfen?

Code:

<html>

<head>

<style type="text/css">


div
{
font-size:12px;font-family:Verdana;
position:absolute;width:100px;height:200px;
background-color:#efefef;
}
.div1
{
border:1px solid #aaaaaa;
left:10px;top:50px;
-moz-border-radius:30px;
}
.div2
{
border:1px solid #aaaaaa;
left:200px;top:50px;
-moz-border-radius:10px;
}


</style>

<title>Rahmen mit abgerundeten Ecken</title>
</head>
<body>
<div class="div1" style="width: 76; height: 176">Yeah!</div>
<div class="div2" align="center">Beispiel 1</div>


</head>

<body>

Mr. Snoot · 11. Oktober 2005

Das geht z.B. so

HTML:

<div style="background-image:url(bild.jpg);">

Details findest du hier: http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_image

undertaker1988 · 11. Oktober 2005

Jo, danke klappt wunderbar.

undertaker1988 · 11. Oktober 2005

Sry das ich nochmal nerven muss, aber bin in css absoluter anfänger und hab dazu noch ein Frage und zwar schaut meine Zeile wie folgt aus.

Code:

<div class="div1" style="width: 76; height: 176" style="background-image:url('passbild.jpg');""> Yeah!</div>

SO sehe ich aber das Foto nicht. ich nehme mal an, weil ich zwei mal "style"drin habe?

Mr. Snoot · 11. Oktober 2005

Einfach in ein style und mit ";" trennen:

HTML:

<div class="div1" style="width: 76; height: 176; background-image:url('passbild.jpg')"> Yeah!</div>

Übrigens hast du am Ende 2 "" - und das ";" nach dem letzten Element muss man nicht unbedingt machen.

undertaker1988 · 11. Oktober 2005

Jep stimmt. Jetzt sieht das zwar noch etwas unschön aus, weil das Foto über die abgerundeten Ecken hinaus geht, aber das kriegt man mit css nicht hin oder?
Also das, dass Foto auch abgerundet wird in dem Kasten.

Mr. Snoot · 11. Oktober 2005

Es gibt glaub ich möglichkeiten zum Abrunden, aber das geht wohl nicht bei allen Browsern - also sähe es hier und da wieder sch***e aus

Passt das Bild genau in die Box (ist also kein sich wiederholendes Bild)? Dann kannst du die überstehenden Ecken transparent machen, oder in der Farbe, die sonst dort als Hintergrundfarbe ist.

frow · 11. Oktober 2005

Du musst aber unbedingt Quoten. Inline CSS ist allerdings auch zu vermeiden, weil du da Kompatibilitätsprobleme vorallem mit dem IE bekommst wegen Doublequotes im HTML Tag, der ja schon gequotet ist. Escapen hilft da, aber ist nicht immer möglich

(Hoffe das war nicht zu viel Fachchinesisch)

Der hat manchmal sogar Probleme mit Single und Double Quotes. Wenn wir dann noch den IE 5.2 auf dem Mac nimmst, den ja noch viele nutzen, musst du Doublequotes benutzen. Die gehen meines Wissens nach auf allen gängigen Browsern.

undertaker1988 · 11. Oktober 2005

Gauder schrieb:
Passt das Bild genau in die Box (ist also kein sich wiederholendes Bild)? Dann kannst du die überstehenden Ecken transparent machen, oder in der Farbe, die sonst dort als Hintergrundfarbe ist.

Ja aber so wäre es natürlich praktischer und wenn man jpg hat die man auch als jpg behalten möchte.

Mr. Snoot · 11. Oktober 2005

Ja, aber du kannst ja bei nem JPG die Ecken "anmalen"

Übrigens seh ich grad, das runde Ecken wohl beim Internet Explorer und Opera nicht dargestellt werden können.

undertaker1988 · 11. Oktober 2005

Jep das stimmt, aber die werden ja bald nachziehen. Sonst gehen denen ja noch mehr Leute flöten.

frow · 11. Oktober 2005

undertaker1988 schrieb:
Jep das stimmt, aber die werden ja bald nachziehen. Sonst gehen denen ja noch mehr Leute flöten.

Das hilft den Leuten mit den älteren Versionen auch nicht

PuppetMaster · 11. Oktober 2005

Gauder schrieb:
Einfach in ein style und mit ";" trennen:

HTML:

<div class="div1" style="width: 76; height: 176; background-image:url('passbild.jpg')"> Yeah!</div>

Übrigens hast du am Ende 2 "" - und das ";" nach dem letzten Element muss man nicht unbedingt machen.

Werte ohne Maßangabe sind ungültig und können Probleme verursachen. Daher (z. B.) width: 76px; angeben.

Suche

[css]Hintergrundbild festlegen?

undertaker1988

Lt. Junior Grade

Mr. Snoot

Gast

undertaker1988

Lt. Junior Grade

undertaker1988

Lt. Junior Grade

Mr. Snoot

Gast

undertaker1988

Lt. Junior Grade

Mr. Snoot

Gast

frow

Lt. Commander

undertaker1988

Lt. Junior Grade

Mr. Snoot

Gast

undertaker1988

Lt. Junior Grade

frow

Lt. Commander

PuppetMaster

Admiral Pro

Ähnliche Themen