Css baggrund
Hej alle sammen. Jeg har downloadet et free template. Har alle koderne. Der er bare et problem. Jeg har billedet som jeg vil bruge som baggrund, men hvor skal jeg smide det ind? Min CSS kode ser sådan ud:html
{ height: 100%;}
*
{ margin: 0;
padding: 0;}
body
{ font: normal .80em arial, sans-serif;
background: #061B1E url(../images/header.jpg) no-repeat;
color: #FFF;}
p
{ padding: 0 0 20px 0;
line-height: 1.7em;}
img
{ border: 0;}
h1, h2, h3, h4, h5, h6
{ font: bold 175% arial, sans-serif;
color: #2E428B;
letter-spacing: -1px;
margin: 0 0 10px 0;
padding: 15px 0 0 0;}
h2
{ font: bold 165% arial, sans-serif;}
h3
{ font: bold 125% arial, sans-serif;
padding: 0 0 5px 0;
color: #2E428B;}
h4, h5, h6
{ margin: 0;
padding: 0 0 5px 0;
font: bold 110% arial, sans-serif;
color: #1D1D1D;
line-height: 1.5em;}
h5, h6
{ font: italic 95% arial, sans-serif;
color: #1D1D1D;
padding-bottom: 15px;}
h6
{ color: #362C20;}
a, a:hover
{ background: transparent;
outline: none;
text-decoration: underline;
color: #5D5D5D;}
a:hover
{ text-decoration: underline;
color: #1D1D1D;}
ul
{ margin: 2px 0 22px 17px;}
ul li
{ margin: 2px 0 15px 17px;}
ol
{ margin: 8px 0 22px 20px;}
ol li
{ margin: 0 0 11px 0;}
#main, #header, #banner, #menubar, #site_content, #footer, #contact, #menu_container
{ margin-left: auto;
margin-right: auto;}
#header
{ width: 960px;
height: 150px;
background: transparent;
text-align: center;}
#banner_image {
margin: 0 auto;
width: 700px;
float: left;
margin-left: 20px;
}
#slider-wrapper {
height: 250px;
background: transparent;
width: 700px;
}
#slider {
background: url("../images/loading.gif") no-repeat scroll 50% 50% transparent;
height: 250px;
position: relative;
width: 700px;
}
#slider img {
display: none;
left: 0;
position: absolute;
top: 0;
}
#slider a {
border: 0 none;
display: block;
}
.nivoSlider {
position: relative;
}
.nivoSlider img {
left: 0;
position: absolute;
top: 0;
}
.nivoSlider a.nivo-imageLink {
border: 0 none;
display: none;
height: 100%;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 6;
}
.nivo-slice {
display: block;
height: 100%;
position: absolute;
z-index: 5;
}
.nivo-box {
display: block;
position: absolute;
z-index: 5;
}
.nivo-caption {
background: none repeat scroll 0 0 #000000;
bottom: 0;
color: #FFFFFF;
font-family: arial;
left: 0;
position: absolute;
text-transform: uppercase;
width: 100%;
z-index: 8;
}
.nivo-caption p {
margin: 0;
padding: 5px;
}
.nivo-caption a {
color: red;
display: inline !important;
text-decoration: none;
}
.nivo-caption a:hover {
color: blue;
text-decoration: underline;
}
.nivo-html-caption {
display: none;
}
.nivo-directionNav a {
background: url("../images/arrows.png") no-repeat scroll 0 0 transparent;
cursor: pointer;
display: block;
height: 30px;
position: absolute;
text-indent: -9999px;
top: 45%;
width: 30px;
z-index: 9;
}
a.nivo-prevNav {
left: 15px;
}
a.nivo-nextNav {
background-position: -30px 50%;
right: 15px;
}
.nivo-controlNav {
bottom: -30px;
left: 50%;
margin-left: -40px;
position: absolute;
}
.nivo-controlNav a {
cursor: pointer;
float: left;
height: 22px;
margin-top: 250px;
position: relative;
text-indent: -9999px;
width: 22px;
z-index: 9;
}
.nivo-controlNav a.active {
background-position: 0 -22px;
}
#site_content
{ width: 1175px;
overflow: hidden;
padding-top: 20px;
background: transparent url(../images/transparent.png) repeat;}
#header H1
{ width: 1000px;
font: normal 450% arial, sans-serif;
color: #2E428B;
letter-spacing: -4px;
background: transparent;}
span
{ color: #FFF;}
#header H2
{ width: 1000px;
font: normal 160% arial, sans-serif;
color: #FFF;
letter-spacing: -1px;
margin-top: -5px;
background: transparent;}
#menubar
{ width: 620px;
height: 50px;
margin-left: 20px;
float: left;
color: #000;
background: transparent;}
/* left hand sidebar */
.sidebar_container_left
{ float: left;
width: 200px;
margin: 0 0 20px 20px;}
.sidebar_left
{ float: left;
width: 210px;
margin-bottom: 10px;}
.sidebar_item_left
{ font: normal 100% arial, sans-serif;
padding: 0 15px 0 0;
margin-bottom: 20px;
width: 201px;}
.sidebar_left h2
{ height: 20px;
padding: 0 0 5px 5px;
color: #FFF;
background: #2E428B;}
.sidebar_left h4
{ font-size: 125%;
color: #FFF;}
.sidebar_left p
{ color: #FFF;}
.sidebar_left a
{ color: #2E428B;}
.sidebar_left a:hover
{ text-decoration: none;}
/* right hand sidebar */
.sidebar_container_right
{ float: right;
width: 200px;
margin: 0 20px 20px 0;}
.sidebar_right
{ float: left;
width: 210px;
margin-bottom: 10px;}
.sidebar_item_right
{ font: normal 100% arial, sans-serif;
margin-bottom: 20px;
width: 201px;}
.sidebar_right h2
{ height: 20px;
padding: 0 0 5px 5px;
color: #FFF;
background: #2E428B;}
.sidebar_right h4
{ font-size: 125%;
color: #FFF;}
.sidebar_right p
{ color: #FFF;}
.sidebar_right a
{ color: #2E428B;}
.sidebar_right a:hover
{ text-decoration: none;}
#content
{ text-align: left;
width: 700px;
float: left;}
.content_item
{ width: 700px;
margin: 0 0 20px 20px;
float: left;}
.content_image
{ width: 250px;
padding: 0px 20px 20px 0px;
float: left;}
#footer
{ width: 960px;
font: normal 100% arial, sans-serif;
height: 30px;
margin-bottom: 10px;
padding: 20px 0 0px 0;
text-align: center;
background: transparent;
color: #FFF;}
#footer a, #footer a:hover
{ color: #FFF;
text-decoration: underline;}
#footer a:hover
{ text-decoration: none;}
/* from here: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers */
.lavaLampWithImage {
position: relative;
height: 30px;
padding: 10px 0px 5px 0;
overflow: hidden;
margin: 0 0px 0 0;
width: 1000px;
}
.lavaLampWithImage li {
float: left;
list-style: none;
}
.lavaLampWithImage li.back {
background: #2E428B;
height: 28px;
z-index: 8;
position: absolute;
}
.lavaLampWithImage li a {
font: normal 120% arial, sans-serif;
text-decoration: none;
color: #FFF;
z-index: 10;
display: block;
height: 60px;
padding: 5px 0px 0px 35px;
position: relative;
overflow: hidden;
}
.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
border: none;
}
Der er 200 point ude. Håber på et svar.
Mvh Jakob Junker
