Navigation – background-image wird im Browser nicht angezeigt.

Vansoul · 14.04.2012

Hallo Leute,

ich bin am zweifeln und finde den Fehler nicht. Ich habe schon so viel ausprobiert und nun weiß ich nicht mehr was ich gemacht habe.
Die Navigation, die als Hintergrund aus einer Grafik besteht, wird im Programm da gestellt.
Wenn ich die Seite im Browser anschaue, wird die Hintergrundgrafik nicht angezeigt.

Hat jemand eine Idee? Habe ich irgendwas vergessen?

LG Rogér

Code:

* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 1em;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
body, html { 
font-size: 100.01%; 
background: #000 url(../hp-bilder/back.png) no-repeat fixed right bottom; 
text-align: center; 
width: 100%; 
height: 100%; 
margin: 0; 
padding: 0; 
}
a { 
text-decoration: none; 
}
/*****Schrift*****/
p { 
color: #fff; 
font-size: 0.83em; 
font-family: georgia, helvetica, verdana; 
line-height: 1.375em; 
font-weight: normal; 
font-style: normal; 
text-align: left; 
word-spacing: normal; 
letter-spacing: normal; 
padding: 10px 0 0; 
}
/*Geruest*/
#wrapper { 
position: relative; 
width: 860px; 
height: auto!important; 
height:100%; /* IE6 */ 
z-index: 10; 
min-height: 100%; 
margin: 0 auto 0; 
padding: 0; 
}
#footer { 
position: relative; 
clear: both; 
height: 30px; 
width: 100%; 
z-index: 10; 
padding: 0; 
margin-top: -30px; 
}
#main { 
position: relative; 
width: 860px; 
height: auto; 
z-index: 20; 
margin-bottom: 30px; 
padding: 0; 
}
.nonfoot { 
line-height: 50px; 
width: 860px; 
height: 30px; 
clear: both; 
padding: 0; 
}
/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}
/*****Inhalt*****/
#header { 
background-image: url(../hp-bilder/headback.png); 
background-position: left top; 
position: relative; 
width: 860px; 
height: 200px; 
z-index: 30; 
padding: 0; 
}
#ct { 
position: relative; 
width: 860px; 
height: auto; 
z-index: 30; 
margin-top: 10px; 
padding: 0; 
}
#right { 
background-color: transparent; 
background-image: url(../hp-bilder/rback.png); 
background-repeat: repeat; 
position: relative; 
width: 620px; 
height: auto; 
z-index: 40; 
float: right; 
padding: 0; 
display: inline; 
}
#left { 
position: relative; 
width: 220px; 
height: auto; 
z-index: 40; 
float: left; 
padding: 0; 
}
.caera { 
position: relative; 
width: 600px; 
height: auto; 
z-index: 50; 
float: left; 
margin-top: 10px; 
margin-bottom: 10px; 
margin-left: 10px; 
padding: 0; 
}
/*****clear*****/
div.clear {
clear : both;
height : 0;
font-size : 0;
margin : 0;
padding : 0;
} 
.clearleft {
clear : left;
height : 0;
font-size : 0;
margin : 0;
padding : 0;
}
.clearright {
clear : right;
height : 0;
font-size : 0;
margin : 0;
padding : 0;
}
/* für IE7 */
*:first-child+html .clear { 
min-height: 0; 
}
/* für IE6 */
* html .clear { 
height: 1%; 
}

/*****navigation*****/
#menu { 
width: 220px; 
height: auto; 
z-index: 60; 
float:left; 
margin: 0; 
padding: 0; 
}
#menu ul { 
list-style-type: none; 
margin:0; 
padding:0; 
}
#menu li { 
display: inline; /* for IE5 and IE6 */
margin:0; 
padding:0;
}
#menu a { 
text-decoration: none; 
line-height: 60px;
text-indent: -99999px; 
display: block; 
width: 220px; 
height: 60px; 
margin: 0 0 5px; 
padding: 0; 
}
#menu a:link, #menu a:visited { 
text-decoration: none; 
}

/***Jemenchamälion***/
#menu .1 { 
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: 0 0; 
margin: 0; 
padding: 0; 
}
#menu .1:hover {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px 0; 
margin: 0; 
padding: 0; 
}
#menu .1#aktiv {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px 0; 
margin: 0; 
padding: 0; 
}

/***Helmchamäleon***/
#menu .2 {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: 0 -60px; 
margin: 0; 
padding: 0; 
}
#menu .2:hover {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px -60px; 
margin: 0; 
padding: 0; 
}
#menu .2#aktiv {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px -60px; 
margin: 0; 
padding: 0; 
}

/***Teppichchamäleon***/
#menu .3 {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: 0 -120px; 
margin: 0; 
padding: 0; 
}
#menu .3:hover {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px -120px; 
margin: 0; 
padding: 0; 
}
#menu .3#aktiv {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px -120px; 
margin: 0; 
padding: 0; 
}

/***Martinqiue-Anolis***/
#menu .4 {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: 0 -180px; 
margin: 0; 
padding: 0; 
}
#menu .4:hover {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px -180px; 
margin: 0; 
padding: 0; 
}
#menu .4#aktiv {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px -180px; 
margin: 0; 
padding: 0; 
}

/***Blaukopfanolis***/
#menu .5 {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: 0 -240px; 
margin: 0; 
padding: 0; 
}
#menu .5:hover {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px -240px; 
margin: 0; 
padding: 0; 
}
#menu .5#aktiv {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px -240px; 
margin: 0; 
padding: 0; 
}

/***Smaragdskink***/
#menu .6 {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: 0 -300px; 
margin: 0; 
padding: 0; 
}
#menu .6:hover {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px -300px; 
margin: 0; 
padding: 0; 
}
#menu .6#aktiv {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px -300px; 
margin: 0; 
padding: 0; 
}

/***Blaue-Sägeschwanz***/
#menu .7 {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: 0 -360px; 
margin: 0; 
padding: 0; 
}
#menu .7:hover {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px -360px; 
margin: 0; 
padding: 0; 
}
#menu .7#aktiv {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px -360px; 
margin: 0; 
padding: 0; 
}

metallica1990 · 14.04.2012

AW: Navigation – background-image wird im Browser nicht angezeigt.

EDIT:

Ok Sorry das war es wohl nicht ... welche CSS-Deklaration ist es denn? So viel Code ...

EDIT 2: Also ist es doch so (siehe Schneidfried's Posr unter diesem hier)

Schneidfried · 14.04.2012

AW: Navigation – background-image wird im Browser nicht angezeigt.

Genau,
du mußt die 'übergeordnete Farbe' und das Image trennen.
So etwa:

Code:

...
 background: #0000;
 background-image:url(../../back.png);
....

Das sollte gehen.

[edit]
Is' 'ne Sch..ßidee Posts zu löschen bzw. sinnentstellt zu ändern.

metallica1990 · 14.04.2012

AW: Navigation – background-image wird im Browser nicht angezeigt.

Also doch ... war mir dann nachher so unsicher ... Schande über mein Haupt

Vansoul · 14.04.2012

AW: Navigation – background-image wird im Browser nicht angezeigt.

Hallo und Danke für die schnelle Antwort.

Leider liegt nicht das Problem im Bodybackground sondern in der Navigation. Ich habe mal ein Screenshot gemacht.

So wird die Navigation im Programm angezeigt.

MyBad · 14.04.2012

AW: Navigation – background-image wird im Browser nicht angezeigt.

Hi!

Du darfst Klassen oder auch IDs nicht einfach mit Zahlen beginnen lassen. Ich habe gesehen, das du deine li-Tags mit Klassennamen wie "1, 2 ,3 , etc." versehen hast. Das geht nicht. Benenne deine Klassen zum Beispiel in "menuepunkt1" usw. um (CSS und HTML). Dann sollte es auch mit den Hintergrundbildern klappen.

Edit:
Deine basic.css ist leer. Die brauchst du dann also gar nicht einzubinden.

Vansoul · 14.04.2012

AW: Navigation – background-image wird im Browser nicht angezeigt.

Man lernt nie aus. Danke MyBad, dass war der Fehler.