Hintergrundbild funktioniert nicht

Pearl1 · 12. April 2011

Hallo,

als vollkommener Neuling zunächst ein Lob, da das Tutorial bei Null beginnt und ich als blutiger Laie schon einiges gelernt habe. Nun bin ich bei "CSS - Bilder und Hintergrundbilder" angelangt und komme nicht weiter, denn genau das, was ich brauche, soll man "im Quellcode nachsehen und selber erarbeiten" . Ich habe ein Bild aus meinen Dateien eingefügt, es wird auch angezeigt, aber NICHT als Hintergrundbild, um Text darauf positionieren zu können. Ich habe alle Übungen durchgemacht, nun will ich das Design in einer eigenen Datei mit CSS machen. Muss ich den Bereich für das HG-Bild in HTML oder in CSS definieren? Ich glaub, ich hab es doch nicht sooooo gut verstanden...

Liebe Grüße
Pearl1

Sarkkan · 12. April 2011

Huhu Pearl1,

das Hintergrundbild wird in CSS, mit der Eigenschaft background-image: url(relativer/pfad/zum.bild); definiert.
Es gibt auch noch die möglichkeit einige Feinheiten einzustellen, da ich gerade aber etwasa kurz angebunden bin hier nur ein Link:
<a class="postlink" href="http://de.selfhtml.org/navigation/css.htm#hintergrund">http://de.selfhtml.org/navigation/css.htm#hintergrund</a>

Lg
Dustin, alias Sarkkan

Pearl1 · 12. April 2011

Hi,

danke für die schnelle Antwort, ich probier's mal und melde mich dann.

Gruß
Lisa alias Pearl1

Pearl1 · 13. April 2011

Hi,
das mit dem Hintergrundbild hat super geklappt. DANKE. Habe noch eine Frage: Kann ich die Start-Datei mit einem separaten Hintergrundbild versehen? Alle anderen Seiten hätten dann jeweils den gleichen Hintergrund. Ich denke ich müsste die Seite in HTML als Bereich definieren und in CSS das Bild definieren, oder?

Liebe Grüße
Pearl1

Sarkkan · 13. April 2011

Klar geht das
Ich empfehle dir da mit Klassen zu arbeiten (schon von gehört?):

Code

html {
    background-image: url(...);
    ...
}




html.index {
    background-image: url(...);
    ...
}

Alles anzeigen

Wenn <html> keine Klasse hat, bekommt es das normale Hintergrundbild. Wenn wir aber stattdessen <html class="index"> haben, wird das Hintergrundbild verwendet, welches wir bei html.index definiert haben

Pearl1 · 14. April 2011

Danke, das hat mir sehr geholfen. Habe erst letzte Woche mit dem Gedanken gespielt, HTML und CSS zu lernen und habe ein bisschen Druck (von anderen), Webseiten (man beachte den Plural!) fertig zu stellen. Zeitintensiv - aber es macht Spaß!

Liebe Grüße
Pearl1

Pearl1 · 14. April 2011

Sorry, aber ich kriegs nicht hin. Das folgende habe ich in der index.html stehen:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" class="index" >
  <head>
    <title>WILLKOMMEN</title>
<!--
    <meta charset="ISO-8859-1"/>
    <meta name="description" content=""/>
    <meta name="author" content="Lisa M&Ouml;rsdorf"/>
    <meta name="keywords" content=""/>
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)"/>  -->
    <link href="design.css" type="text/css" rel="stylesheet" media="screen"/>
 <!--   <link href="favicon.ico" type="image/x-icon" rel="shortcut icon"/>  -->
  </head>




  <body>
   <p class="index"></p>




<!-- Menüzeile -->
    <div id="menu1">
    <a href="home.html"> <b>WILLKOMMEN...</b></a>
    </div>




<!-- Gruppenbild -->
    <div id="bild">
        <img src="D:/A-MOERSDORF/BANDS/D_VOCAL PEARLS/Web/images/Band_alle zeigen1_fb.jpg" height="250" />
    </div>










  </body>
</html>

Alles anzeigen

class wird mir als Fehler angezeigt.
In der design.css habe ich:

Code

body
{
   background:url(images/VP_Sample.jpg) no-repeat center;
   font: 80% Arial, Verdana, Arial sans-serif;
  color: #000000;
}
.index {
    background-image:url(images/VP_Sample-Start.jpg);
}




/* Gestaltung Menue Startseite */




#menu1 {
  font-family: Verdana Tahoma Arial sans-serif;
  font-style: normal; font-size: medium;
  margin-top: 103px;margin-left: 140px;text-decoration: none;
}
#menu1 a:link    { color:black;  text-decoration:none; }
#menu1 a:visited { color:black;  text-decoration:none; }
#menu1 a:focus   { color:black;  text-decoration:none; }
#menu1 a:hover   { color: #000000;  text-decoration:underline; }
#menu1 a:active  { color:#990000;  text-decoration:none; }




/*<!-- Bild Startseite -->*/
#bild {
   margin-top: 17px; margin-left: 300px;
}










/*<!-- Gestaltung Menue Restseiten --> */




#menu2 ul{
  list-style:none;
  font-family: Verdana Tahoma Arial sans-serif;
  font-style: normal; font-size: medium;
  color: #808080;
  margin-top: 212px;margin-left: 125px;text-decoration: none;
}
#menu2 li {
    float: left;margin-left: 20px;
}
#menu2 a:link    { color:#990000;text-decoration:none; }
#menu2 a:visited { color:#990000;  text-decoration:none; }
#menu2 a:focus   { color:black;  text-decoration:none; }
#menu2 a:hover   { color:#000000; text-decoration:underline;}
#menu2 a:active  { color:#990000;  text-decoration:none; }







body

Alles anzeigen

Das ist bisher alles. Ansonsten klappt alles, die Links und so, alles super.
Gruß
Pearl

Sarkkan · 14. April 2011

Dann ändere bitte deinen CSS-Code so um, dass du die Klasse dem <body> gibst^^
Dann ist es 100%ig valide und macht an für sich keinen Unterschied

Pearl1 · 15. April 2011

Danke für Deine Hilfe.
Gruß
Pearl

Pearl1 · 15. April 2011

JETZT hat's gefunzt!!!!! Viiiiieeelen Dank! Ich glaub ich muss noch mal von vorne anfangen zu lernen! :oops:
Gruß
Pearl

Hintergrundbild funktioniert nicht

Jetzt mitmachen!

Teilen