✔ Bild über background: url(..) wird im Div nicht angezeigt

apfelschorle hat gesagt.:
Hab es auskommentiert und bei mir wirds immer noch nicht dargestellt. Welchen Browser verwendest du?
Zum Vergrößern anklicken....
Kann ich mit keinem gängigen Browser bestätigen. Zum Surfen nutze ich Firefox.

jsfiddle-screenshot.jpg

Hast Du zwischendurch den Browsercache geleert?
apfelschorle hat gesagt.:
Was kann man tun wenn man z.B. keine Breite bzw. Höhe angegeben hat und das Bild trotzdem dargestellt werden soll? Z.B. wenn die Breite oder Höhe dynamsich mit dem Inhalt verändert?
Zum Vergrößern anklicken....
Wenn der (dynamische) Inhalt nicht ausreicht, um das vollständige Hintergrundbild anzuzeigen, können hier Mindestbreite (= min-width) u. Mindesthöhe (= min-height) behilflich sein.
 
Im filezilla hab ich gesehen das die nicht dargestellten Bilderdie Endung .PNG statt .png haben.. daran lags.. vielen dank.

Hm mit min-height bin leider nicht weiter gekommen. Hier der Link zur Homepage, damit man sich das besser vorstellen kann:

http://apfelschorle.bplaced.net/

Die grünen Kästchen sollten bis zum Footer nach untern verlängert werden. Das klappt leider nicht. Es sollten jeweils links und rechts "Pfötchen" nach unten repeatet werden

https://jsfiddle.net/#&togetherjs=cjoMxyqwev
 
Auf die grünen Kästchen kannst Du verzichten, und stattdessen den grafischen Rahmen mit Hilfe eines Hintergrundbildes für #mitte erzeugen, in dem der linke und rechte Rahmen enthalten sind.

Andernfalls wäre hier das Flexbox-Modell anstelle der float-Regeln vorzuziehen, um die Höhe der benachbarten Elemente automatisch angleichen zu können.

Siehe zB. http://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align_stretch
 
Zuletzt bearbeitet:
Hi, ich hab es mit flexbox versucht. Irgendwie will er nicht die Hintergrundbilder einfügen, stattdessen sehe ich immer nur die Hintergrundfarbe. Das Ergebnis hier -> http://apfelschorle.bplaced.net/

Auf dieser Testseite funktioniert das Einfügen eines Bilds
http://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align_stretch

HTML:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Website</title>
<meta name="author" content="creme">
<link rel="stylesheet" type="text/css" href="style.css">
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    width: 980px;
    height: auto;
    background-color: lightgrey;
}

.flex-itemLinks {
float: left
    background-image: url("right_header_rand.jpg");
    width: 267px;
    margin: 10px;
}

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

.flex-itemRechts {
    background-image: url("right_header_rand.jpg");
    width: 116px;
    margin: 10px;
}
</style>
</head>
<body>
<p style="text-align:center;">
<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">T1<!-- <div id="rahmen"> -->
  <div id="links">
   <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">Ü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 class="flex-item"></div>  <!--LeftPfoetchenDown"-->
   <!-- <div id="LeftPfoetchenDown">Bis zum Rand des Footers verlängern</div> -->
  </div>
  <div class="flex-itemMitte">T2<!-- <div id="mitte"> --><div id="Inhalt">
  <img id="foto" src="salon_foto.png" width="343" height="255" align="center"><br><br>
  <br><h1>Herzlich Willkommen!!!</h1><br>
  </h2>
  </div>
  </div>
  <div class="flex-itemRechts">T3<br></div>  <!--rechts"-->
  <!-- <div id="rechts">Bis zum Rand des Footers verlängern</div>   -->
</div>

</div>

<div id="footer"><h3>E-Mail: adresse@mail.de</h3></div>
</p>

</body>
</html>

CSS:

Code: 
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("left_header_rand.png") no-repeat;
}

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

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

#rechterRandDown {
float: right;
width: 116px;
height: 169px;
background: url("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("menue_top.png");
clear: both;
}

#Menuepunkt1 {
margin-left:0px;
margin-right: 0px;
background: url("menuepunkt1.png") no-repeat;/*yellow;   */
/*background-attachment: fixed;      */
width: 267px;
height: 97px;
clear: both;
}

#link1 {
margin-left:0px;
margin-right: 0px;
padding-top: 38px;
}

#Menuepunkt2 {
background: url("menuepunkt1.png") no-repeat;
width: 267px;
height: 97px;
clear: both;
}

#link2 {
margin-left:0px;
margin-right: 0px;
padding-top: 38px;
}

#Menuepunkt3 {
background: url("menuepunkt1.png") no-repeat;
width: 267px;
height: 97px;
clear: both;
}

#link3 {
margin-left:0px;
margin-right: 0px;
padding-top: 38px;
}

#Menuepunkt4 {
background: url("menuepunkt1.png") no-repeat;
width: 267px;
height: 97px;
clear: both;
}

#link4 {
margin-left:0px;
margin-right: 0px;
padding-top: 38px;
}

#MenueBottom {
width: 267px;
height: 243px;
background: url("menue_bottom.png");;
clear: both;
}

#LeftPfoetchenDown {
width: 267px;
height: 156px;
background: green repeat-y;
clear: both;
}

#mitte {
float: left;
width: 598px;
height: auto;
background: #FFECF7;
}

#Inhalt {
padding-top: 90px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
}

#Inhalt h1 {
font-size: 18px;
font-weight: bold;
color: black;
font-family: Verdana;
text-align: middle;
}

#Inhalt h2 {
margin-left: 40px;
font-size: 13px;
font-weight: normal;
color: black;
font-family: Verdana;
text-align: left;
}

#rechts {
float: right;
width: 116px;
height: 100px;
background: green repeat-y;
}

#footer {
width: 980px;
height: 40px;
background: #FFECF7;
margin-top: 40px;
clear: both;
}

#footer h3 {
font-size: 13px;
font-weight: bold;
color: black;
font-family: Verdana;
}
 
Der HTML-Code gehört für ein funktionstüchtiges Flexbox-Modell restrukturiert.

Desweiteren sind Dir im Flexbox-CSS diverse Fehler unterlaufen: float:left-Regel (dazu ohne Semikolon am Zeilenende, womit die darauffolgende background-image-Regel vom Browser ignoriert wird) und *.jpg statt *.png.

https://jsfiddle.net/spicelab/rkwjsqva/
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück