tutorials.de - Bild über background: url(...) wird im Div nicht angezeigt | Demo #2

by SpiceLab

HTML

<link rel="stylesheet" href="http://apfelschorle.bplaced.net/style.css">
<div id="header">
  <div id="linkerRand"></div>
  <div id="logo"></div>
  <div id="rechterRand"></div>
  <div id="rechterRandDown"></div>
</div>
<div class="flex-container">  
  <div class="flex-itemLinks">
    <div id="MenueTop"></div>
    <div id="Menuepunkt1"><div id="link1"><a href="#" style="text-decoration:none"><font color="black">Preise</font></a></div></div>
    <div id="Menuepunkt2"><div id="link2"><a href="#" style="text-decoration:none"><font color="black">&Uuml;ber mich</font></a></div></div>
    <div id="Menuepunkt3"><div id="link3"><a href="#" style="text-decoration:none"><font color="black">Wissen</font></a></div></div>
    <div id="Menuepunkt4"><div id="link4"><a href="#" style="text-decoration:none"><font color="black">Bilder</font></a></div></div>
    <div id="MenueBottom"></div>
  </div>
  <div class="flex-itemMitte">T2
    <div id="Inhalt">
      <img id="foto" src="http://apfelschorle.bplaced.net/img/salon_foto.png" width="343" height="255" align="center"><br><br>
      <br><h1>Herzlich Willkommen!!!</h1><br>
      <p class="justify"><h2>Guten Tag, mein Name ist ... und ich freue mich sehr, dass Sie<br>
      zu mir gefunden haben!<br><br>
      Auf dieser Homepage habe ich eines an Informationen &uuml;ber mich<br>
      und meinen Salon f&uuml;r Sie zusammengetragen, damit Sie sich vorab<br>
      schon einmal ein Bild von meinem Salon machen k&ouml;nnen.</p>
      <p align="center">Nun zu mir:</p>
      <p class="justify">Ich bin Baujahr 89, lebe seit meiner Geburt in ... und bin<br>
      auch soweit ich zur&uuml;ckdenken kann ein absoluter Tierliebhaber.<br><br>
      <ul>
        <li> 2013 Er&ouml;ffnung meines kleinen Hobbysalons zu Hause</li>
        <li> 2015 Profigroomer Ausbildung in Heilbad Heiligenstadt in<br>renomierten Salon wo das Wohl des Tieres noch gro&szlig;geschrieben wird</li>
        <li> 2015 Er&ouml;ffnung Salon Doggy Style in der Stettiner...

CSS

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    width: 980px;
    height: auto;
    background-color: lightgrey;
    margin:auto;
}
.flex-itemLinks {
    background-image: url("http://apfelschorle.bplaced.net/img/left_header_rand.png");
    width: 267px;
    margin: 10px;
}

.flex-itemMitte {
    background-color: #FFECF7;
    width: 598px;
    margin: 10px;
}

.flex-itemRechts {
    background-image: url("http://apfelschorle.bplaced.net/img/right_header_rand.png");
    width: 116px;
    margin: 10px;
}
/* **** style.css *** */
body {
   background-color: #FFECF7;/*rgb(255, 236, 247);*/
   text-align: center;
   width: 980px;
   margin: 0 auto;
}

#header {
 width: 980px;
 height: 169px;
 margin: 0 auto;
 background: #FFECF7;/*url{"left_header_rand.png"} no-repeat;*/
}

#linkerRand {
 float: left;
 width:  45px;
 height: 169px;
 background: url("http://apfelschorle.bplaced.net/img/left_header_rand.png") no-repeat;
}

#logo {
 float: left;
 width: 221px;/*221px;*/
 height: 169px;
 background: url("http://apfelschorle.bplaced.net/img/logo.PNG") no-repeat;
}

#rechterRand {
 background: url("http://apfelschorle.bplaced.net/img/pfoetchen.PNG") repeat-x;
 float: left;
 height: 169px;
 width: 580px;
}

#rechterRandDown {
 float: right;
 width: 116px;
 height: 169px;
 background: url("http://apfelschorle.bplaced.net/img/right_header_rand.png"); ;
}

#rahmen {
/*
float: both;
width:980px;
background: white;
*/
width:980px;

margin: 0 auto;
/*background: url("left_pfoetchen_down.png") repeat-y 50% 0;*/
/*background: white repeat-y 50% 0;*/
}

#links {
float: left;
width: 266px;
background: #FFECF7;
}

#MenueTop {
width: 266px;
height: 259px;
background: url("http://apfelschorle.bplaced.net/img/menue_top.png");
clear: both;
}

#Menuepunkt1 {
margin-left:0px;
margin-right: 0px;
background: url("http://apfelschorle.bplaced.net/img/menuepunkt1.png") no-repeat;/*yellow;  ...