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