Hintergrundbild wird nicht angezeigt

Ede · 1. November 2013

Hallo seit geraumer Zeit sitze ich nun vor diesem Problem um komme einfach nicht weiter.
Ich versuche in den links und rechts neben meinem Content einen anderen Hintergrund einfließen zulassen aber alle Versuche scheiterten und endeten darin das ich dann nur den neuen Hintergrund gesehnen habe.
Kann mir wer weiterhelfen und mir sagen wo mein Denkfehler ist?

index.html
[HTML]<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>restaurant schwan</title>

</head>

<body>

<ul>
<li><a href="#" class="current">MAIN PAGE</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">MENUS</a></li>
<li><a href="#">DRINKS</a></li>
<li><a href="#">LOCATIONS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>

</div>

<div id="schwan_topsection">RESTAURANT SCHWAN</div>

<h1>WELCOME TO OUR RESTAURANT</h1>

<h2>Today's SPECIAL!</h2>

</div>
<div id="schwan_footer"> © </div>
</div>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js'></script>
</body>
</html>[/HTML]

schwan_style.css

CSS

html {




	background: url(images/schwan_html_bg.jpg) repeat;




}




body {




	margin: 0;




	padding:0;




	font-family: "Times New Roman", Times, serif;




	font-size: 16px;




	line-height: 1.5em;




	color: #b48842;




	background: url(images/schwan_body_bg.jpg) repeat-x center top;




	width: 100%;




	display: table;




}




a:link, a:visited { color: #c89d59; text-decoration: none; } 




a:active, a:hover { color: #FFFF00; text-decoration: none }







h1 {




	font-size: 24px;




	font-weight: bold;




	text-decoration: underline;




	color: #c89d59;




	background-position: left;




	padding-top: 20px;




}




h2 {




	margin-top: 40px;




	font-size: 20px;




	font-weight: bold;




	text-decoration: underline;




	color: #c89d59;




}







#schwan_container {




	width: 806px;




	margin: auto;




}




.schwan_topmenu{




	margin: auto;




	width: 700px;

	position:relative;




}







.schwan_topmenu ul {




	list-style: none;




	padding: 0px;




	margin: 0px;




}




.schwan_topmenu li{




	display: inline;




}




.schwan_topmenu li a{




	float: left;




	font-family: Arial, Helvetica, sans-serif;




	font-size: 12px;




	font-weight: bold;




	text-align: center;




	color: #beb052;




	width: 103px;




	height: 30px;




	margin-left: 5px;




	margin-right: 5px;




	padding-top: 14px;




}




.schwan_topmenu li a:hover, .schwan_topmenu li .current{




	color: #beb052;




	background: url(images/schwan_button_hover.jpg) no-repeat;




}




#schwan_topsection {




	float: left;




	margin-top: 40px;




	width: 806px;




	height: 48px;




	color: #c1b25d;




	font-size: 24px;




	font-weight: bold;




	padding-top: 50px;




	line-height: 1.6em;




	text-align: center;




	background: url(images/schwan_title_bg.jpg) no-repeat;




}




#schwan_headersection {




	float: left;




	width: 806px;




	height: 252px;




}




#schwan_content_section {




	float: left;




	width: 750px;




	text-align: justify;




	padding-left: 30px;




}




#schwan_content_section img {




	float: left;




	padding-right: 20px;




}




.topmenu_about {
	width:30px;
	height:30px;
	cursor:default;
	text-indent:-9999px;
	position:absolute;
	right:0px;
	top:10px;
}




#schwan_footer {




	float: left;




	margin: auto;




	margin-top: 20px;




	text-align: center;




	padding-top: 35px;




	width: 744px;




	height: 50px;




	background: url(images/schwan_footer.jpg) no-repeat;




	background-position: top;




}

Alles anzeigen

Wie gesagt ich möchte eigentlich lediglich um die mittlere Box einen zusätzlichen Hintergrund legen der das ganze abrundet.

Das ist etwas verwirrend ohne mein versuch zu Posten.

ich habe es dann so versucht was leider scheiterte

CSS

html {




	background: url(images/bg.jpg) repeat;




}




#schwan_container {




	width: 806px;




	margin: auto;




background: url(images/schwan_body_bg.jpg) repeat-x center top;
}

Alles anzeigen

So dachte ich mir das, aber lag da leider falsch. Hoffe das es so verständlich dargestellt ist ich versteh es beim lesen zum teil selber nicht.

Lg Ede

wolf · 2. November 2013

Also ich hoffe ich hab Teile richtig verstanden..
Seitenaufbau:

HTML

html
  body
	all
  	schwan_container
  	schwan_topmenu
  	schwan_topsection
  	schwan_headersection
  	schwan_content_section
  	schwan_footer
   /all
 /body
/html

Alles anzeigen

du hast:

CSS

html {
background: url(images/schwan_html_bg.jpg) repeat;
}




body {
background: url(images/schwan_body_bg.jpg) repeat-x center top;
}

In deinem Beispiel wird der Bg des <html> überschrieben duch den <body> Bg, da, wenn nicht anders definiert <body> genau so groß wie <html> ist!!

Welchem Element wilst du jetzt den anderen Hintergrund geben und willst du Links einen anderen Bg haben als Rechts oder ist es ein breites bild?

meinst du es so? : http://wolf.wolfgang-m.de/beispiele/bsp-7.html

HTML

<!DOCTYPE html>
<html>
  <head>
	<title>Beispiel</title>
	<link href="bsp-7.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
	<div id="content">
  	<h1>Überschrift</h1>
	</div>
  </body>
</html>

Alles anzeigen

CSS

body {
  background-color: #666666;
  background-image: url(http://wallike.com/wp-content/uploads/2013/04/free-background-640x400.jpg);
  background-repeat: repeat-x;
  background-position: center;
  margin: 0;
  padding: 0;
  }




#content {
  background: url(http://wallike.com/wp-content/uploads/2013/07/Brick-Wall-Background-640x400.jpg);
  width: 80%;
  height: 500px;
  margin: auto;
  color: #fff;
  }




h1{
  margin: 0;
  padding: 20px;
  }

Alles anzeigen

Hoffe das hilft dir
Oder meinst du es so: http://wolf.wolfgang-m.de/beispiele/bsp-8.html

HTML

<!DOCTYPE html>
<html>
  <head>
	<title>Beispiel</title>
	<link href="bsp-8.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
	<div id="links" class="backgrounds">
	</div>
	<div id="content">
  	<h1>Überschrift</h1>
	</div>
	<div id="rechts" class="backgrounds">
	</div>
	<div class="stopfloat">
	<div id="footer">
	</div>
  </body>
</html>

Alles anzeigen

CSS

body {
  background-color: #666666;




  margin: 0;
  padding: 0;
  }




.backgrounds {
  /* der Hintergrund soll NUR horizontal wiederholt werden*/
  background-repeat: repeat-x;
  /* der Hintergrund soll so breit sein wie das Element selber und die höhe von 500px haben [:width height;] */
  background-size: auto 500px;
  /* der Hintergrund wird vertikal und horizontal mittig ausgerichtet [:center center;]
  (das zweite center wird vom Browser automatisch hinzugefügt, wenn nicht anders angegeben.
  Möglichkeiten: vertikal- left/center/right horizontal- top/center/bottom)  [:vertikal horizontal;] */
  background-position: center center;
  /* dieses Element wird nach Links hintereinander gereiht. Diese Angabe wird neutralisiert durch
  die Angabe [clear: both;] (hier in .stopfloat )*/
  float: left;
  /* Breite des Elements */
  width: 10%;
  /*Höhe des Elements */
  height: 500px;
  }




#links{
  /* einbinden des Hintergrundbildes*/
  background-image: url(http://www.android-hilfe.de/attachments/root-hacking-modding-htc-magic/8446d1274809921-suche-hintergrundbild-hintergrundbilder-cyanogenmod-4-2-15-1-geloest-wallpaper_grass_night.jpg);
  }




#content {
  background: url(http://wallike.com/wp-content/uploads/2013/07/Brick-Wall-Background-640x400.jpg);
  width: 80%;
  height: 500px;
  margin: auto;
  color: #fff;
  float: left;
  }




h1{
  margin: 0;
  padding: 20px;
  }




#rechts{
  background-image: url(http://www.desktop-bilder.com/images/wallpapers/24-aurora-river.jpg);
  }




.stopfloat {
  clear: both;
  color:transparent;
  height: 0px;
  border-width: 0px;
  }




#footer{
  background-image: url(http://www.nxtdsktp.com/wp-content/uploads/2013/07/Background-Pics.jpg);
  background-repeat: repeat-y;
  background-size: 100% 50px;
  width: 100%;
  height: 50px;
  }

Alles anzeigen

Hintergrundbild wird nicht angezeigt

Jetzt mitmachen!

Teilen