Avatar billede JakobJunker Nybegynder
10. juli 2012 - 18:54 Der er 1 kommentar og
1 løsning

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
Avatar billede scootergrisen Nybegynder
10. juli 2012 - 19:04 #1
../images/header.jpg
Avatar billede keysersoze Guru
10. juli 2012 - 19:54 #2
Hvordan kan det nogensinde blive hele løsningen?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester