Author Topic: Bild in CSS einfügen  (Read 50719 times)

Offline daveland

  • Posts: 80
Bild in CSS einfügen
« on: February 06, 2007, 05:03:29 PM »
Hallo,
vielleicht kann mir ja jemand helfen.
Ich möchte in der .css-datei ein Bild im Header einfügen,
so sieht dieser Bereich aus:
Code: [Select]
.header {
background-color: #FA4F24;
background-repeat: repeat-x;
background-position: top;
padding: 35px;
text-align: center;
font-size: 30px;
}

Der main-Bereich ist so eingestellt:
Code: [Select]
.main {
width: 900px;
    overflow: auto;
    margin: auto;
background-color: #FFFFFF;
}

Nun möchte ich im Header ein Bild einfügen, was ja mit diesem Code geht:
Code: [Select]
background-image: url(bild.jpg);
Dieses Bild hat die Größe 468x60,
wie muss ich jetzt diese Größe in der css angeben? Der Header-Bereich ist nämlich größer
als das Bild, und wenn ich im header-code den bild-pfad eingebe, wird das Bild gestreckt,
was ich ja nicht möchte. Möchte das das Bild über der Hintergrundfarbe des Headers
geladen wird.

Danke,
daveland


doc

  • Guest
Re: Bild in CSS einfügen
« Reply #1 on: February 06, 2007, 05:05:47 PM »
Probiers mal mit: background:#06A url(deinbild.jpg) no-repeat 488px 5px;

Gruss Christian

Offline daveland

  • Posts: 80
Re: Bild in CSS einfügen
« Reply #2 on: February 06, 2007, 06:39:30 PM »
Super doc,
das funktioniert super, hab den Code jetzt folgendermaßen geändert:
Code: [Select]
.header {
background: #FA4F24 url(bild.jpg) no-repeat;
background-position: center;
padding: 60px;
text-align: center;
font-size: 30px;
}

Eine Verständnisfrage hätte ich noch, du hast doch angegeben "no-repeat 488px 5px".
Für was waren die Zahlen gedacht? Denn es funktioniert auch ohne.

Gruß,
Markus

doc

  • Guest
Re: Bild in CSS einfügen
« Reply #3 on: February 06, 2007, 07:08:48 PM »
@daveland:
background:#06A url(deinbild.jpg) no-repeat 488px 5px; sollte Dir die Möglichkeiten aufzeigen, die Hintergrundeigensch aften mittles CSS-Kurzschreibweise (Farbe, Bild, repeat, Positionierung) zu setzen.

Für Details siehe hier:
http://standards.webmasterpro.de/index-article-Effizientes+CSS.html
http://www.w3schools.com/css/css_background.asp

Gruss Christian

 

postern-length