Welcome, Guest. Please login or register.
Did you miss your activation email?
April 24, 2014, 08:28:12 PM

Login with username, password and session length
Search:     Advanced search
Wollen Sie dem WebsiteBaker Team beitreten?
Nähere Informationen finden Sie unter hier und auf unserer neuen Webseite.
177495 Posts in 24326 Topics by 6879 Members
Latest Member: dorstcom
* Home Help Search Login Register
Pages: [1]   Go Down
Print
Author Topic: Bild in CSS einfügen  (Read 43716 times)
daveland

Offline Offline

Posts: 80


« 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:
.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:
.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:
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

Logged
doc
Guest
« Reply #1 on: February 06, 2007, 05:05:47 PM »

Probiers mal mit: background:#06A url(deinbild.jpg) no-repeat 488px 5px;

Gruss Christian
Logged
daveland

Offline Offline

Posts: 80


« Reply #2 on: February 06, 2007, 06:39:30 PM »

Super doc,
das funktioniert super, hab den Code jetzt folgendermaßen geändert:
Code:
.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
Logged
doc
Guest
« 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
Logged
Pages: [1]   Go Up
Print
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.19 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!