Background-Image

flo96

Hallo Leute,

ich hab bei meiner neuen Site an der ich bastle ein Hintergrund-Bild eingefügt und will dass das insgesamt nur 1x auftaucht... bei Betrachtung über ein mobiles Endgerät wird es jedoch 2x angezeigt...

hier mein code

CSS

/* CSS-Layout */
*
{
	margin: 0px;
	padding: 0px;
}




header, nav, section, footer
{
    display: block;
}




body
{
	background-color: #FFFFF0;
	text-align: center;
	background-attachment: scroll;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
}




header 
{
	background-image: url(head.png);
	height: 201px;
	width: 851px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2px;
}




section
{
	width: 841px;
	background-color: #FFFFF0;
	margin: 0 auto;
	padding: 5px;
	height: auto;
}




section h3
{
	text-align: center;
	text-decoration: underline;
}




section h4, p, .impressum
{
	text-align: center;
}




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




section a:hover
{
	color: #B88428;
	text-decoration: underline;
}




footer
{
	width: 841px;
	background-color: #EDD09E;
	color: #888888;
	clear: both;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	padding: 5px;
}




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




footer a:hover
{
	text-decoration: underline;
	color: #B88428;
}




table
{
	padding: 1px;
	margin: 0 auto;
}




table td
{
	padding: 2px;
}




table thead, tbody, tfoot
{
	text-align: center;
}




table thead th.erkl, tbody td span.ht
{
	font-size: small;
	font-weight: normal;
	font-style: oblique;
}




table thead th span.pf, tbody td span.pf
{
	color: #FF0000;
	vertical-align: sub;
}




table tfoot td.right
{
	text-align: right;
}




table tfoot td.left
{
	text-align: left;
}




#senden, #reset, #weiter
{
	padding: 1px;
}




#wrapper
{
	background-image: url(background.png);
	background-attachment: fixed;
	width: 1300px;
	margin: 0 auto;
	text-align: left;
}




#nav
{
	width: 851px;
	margin: 0 auto;
	text-align: center;
}




#nav ul
{
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 9px;
	margin: 0px;
	background-color: ivory;
}




#nav ul:after
{
	clear: both;
	content: " ";
	display: block;
	font-size: 0;
	height: 0;
	visibility: hidden;
}




#nav ul li
{
	list-style: none;
	float: left;
	background-color: ivory;
}




#nav ul li a
{
	text-decoration: none;
	display: block;
	color: #B88428;
	padding: 6px 9px 6px 8.5px;
	transition: background 0.3s ease-out; /* explorer 10 */
	-webkit-transition: background 0.3s ease-out; /* chrome & safari */
	-moz-transition: background 0.3 ease-out; /* firefox */
	-o-transition: background 0.3 ease-out; /* opera */
}




#nav ul li:hover > ul
{
	visibility: visible;
}




#nav ul li ul
{
	display: block;
	visibility: hidden;
	position: absolute;
	padding: 0px;
	float: none;
}




#nav ul li ul li
{
	float: none;
}




#nav ul li ul li ul
{
		display: block;
		visibility: hidden;
		position: absolute;
		padding-bottom: 0px;
		padding-top: 0px;
		padding-left: 0px;
		padding-right: 0px;
		float: right;
		margin-left: 155px;
		border: 1px solid #DEAA48;
		margin-bottom: 155px;
}




#nav ul li ul li ul li
{
	float: right;
}




#nav ul li ul li a:hover
{
	color: #DEAA48;
}




#nav ul li.cat1:hover a
{
	background-color: #DEAA48;
}




#nav ul li.cat1:hover > ul li a
{
	background-color: #DEAA48;
	border: 1px solid #DEAA48;
}




#nav ul li.cat1:hover a
{
	background-color: #DEAA48;
}




#nav ul li.cat1:hover > ul li a
{
	background-color: #DEAA48;
	border: 1px solid #DEAA48;
}




#nav ul li.cat2:hover a
{
	background-color: #DEAA48;
}




#nav ul li.cat2:hover > ul li a
{
	background-color: #DEAA48;
	border: 1px solid #DEAA48;
}




#nav ul li.cat3:hover a
{
	background-color: #DEAA48;
}




#nav ul li.cat3:hover > ul li a
{
	background-color: #DEAA48;
	border: 1px solid #DEAA48;
}




#nav ul li.cat4:hover a
{
	background-color: #DEAA48;
}




#nav ul li.cat4:hover > ul li a
{
	background-color: #DEAA48;
	border: 1px solid #DEAA48;
}




#nav ul li.cat5:hover a
{
	background-color: #DEAA48;
}




#nav ul li.cat5:hover > ul li a
{
	background-color: #DEAA48;
	border: 1px solid #DEAA48;
}




#nav ul li.cat6:hover a
{
	background-color: #DEAA48;
}




#nav ul li.cat6:hover > ul li a
{
	background-color: #DEAA48;
	border: 1px solid #DEAA48;
}




#nav ul li.cat7:hover a
{
	background-color: #DEAA48;
}




#nav ul li.cat7:hover > ul li a
{
	background-color: #DEAA48;
	border: 1px solid #DEAA48;
}




#nav ul li.cat8:hover a
{
	background-color: #DEAA48;
}




#nav ul li.cat8:hover > ul li a
{
	background-color: #DEAA48;
	border: 1px solid #DEAA48;
}




#nav ul li.cat9:hover a
{
	background-color: #DEAA48;
}




#nav ul li.cat9:hover > ul li a
{
	background-color: #DEAA48;
	border: 1px solid #DEAA48;
}




#nav ul li:hover > a
{
	color: #FAFAFA;
}




#nav ul li ul li a
{
	color: #FAFAFA;
}




#nav ul li ul li a:hover
{
	color: #B88428;
	background-color: ivory !important;
}




.hr
{
	width: 849px;
	clear: both;
	margin: 0 auto;
}




.copy
{
	font-size: x-small;
	color: #000000;
	font-style: italic;
}

Alles anzeigen

Die entscheidende Stelle ist beim #wrapper

P.S.:
Das ist mein komplettes CSS was ich bis jetzt hab...
wenn verbesserungsvorschläge da sind versuche ich diese Umzusetzen...

Edit:

Das Argument "fixed" sah nicht so schön aus wie das Argument "scroll" das hat jedoch kein bisschen geändert an der darstellung

capricorne69

Hi ,ich denke mal , dass du bei deinem hintergrundbild noch background-repeat hinzufügen musst. Benutze mal google , ich bin selbst im moment nur mobil unterwegs...

flo96

background-repeat hab ich schonmal durchprobiert... das ist nur für die "Bildwiederholung" bei einem reload

wolf

CSS

/* syntax */
background: quelle wiederholung verhalten x y / größe (ersatz)farbe;




background: url('bild.png) no-repeat scroll 0 0 / cover rgb(100,100,100);

CSS

background-size: cover;

ist das was du brauchst (sorgt dafür das das Bild immer den ganzen Hintergrund überdeckt (ohne zu verzerren).
Achtung wenn bg 'fixed' und 'cover' als eigenschaften hat, spinnt iOS Safari rum.. (http://beta.caniuse.com/#feat=background-img-opts)

flo96

merci beaucoup
leider sieht es jetzt nicht mehr ganz so schön aus

wolf

Auf anderen Bildschirmen sieht es halt immer anders aus, auf meinem anders als auf deinem, auf meinem Handy nochmal anders als auf dem iPad, und auf dem rießen iMac Bildschirm auf der Arbeit wird es nochmal anders aussehen.

flo96

hmmm hast recht... dann lasse ich es lieber so wies vorher war

wolf

Nein das ist ja noch beschissener. Denke immer daran, es geht nicht darum das es bei dir auf deinem Bildschirm gut aussieht, sondern darum das es auf dem Bildschirm des Seitenbesuchers gut aussieht.

flo96

ok

Jetzt mitmachen!