Hilfe bezüglich Hintergrundbild

jackieboy · 25.01.2009

Hallo Leute!

Ist es möglich mittels CSS ein Hintergrundbild an das Browserfenster anzupassen? Ihr könnt es euch mal auf Realitydreams.net ansehen.

lg
jackieboy

sfischer · 25.01.2009

AW: Hilfe bezüglich Hintergrundbild

hallo,

ja!
hier mal der code. aus zeitmangel ohne beschreibung!

Code:

<head>
<title>hintergrund</title>
<style type="text/css">
  <!--
* { margin: 0;
    padding: 0;}

/* Scrollbar ausblenden und Höhen- und Breitenanpassung zu 100%;  */
body, html{ width: 100%;
            height: 100%;
            overflow: hidden;}

/* hintergrundbild auf unterste Ebene */
#bgImg{ position: absolute;
        top: 0;
        left: 0;
        border: 0;
        z-index: 1;}
/* content absolut über hintergrundbild legen; Scrollbar bei Bedarf einblenden */
#content{ position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          overflow: auto;
          width: 100%;
          height: 100%;
          text-align: center;}

/* Layoutelemente */
#inhalt_breite{ width: 600px;
          height: 100px;
          text-align: left;
          margin: 18px auto;}
#kopf{ border: 1px solid #000;
          background: #efefef;}
#inhalt{ border: 1px solid #000;
             background: #f0fff0;
             margin-top: 6px;
             height: 1000px;}
#fuss{ border: 1px solid #000;
            background: #fffff0;
            margin-top: 6px;}
 //-->
</style>
</head>
<body>
<img id="bgImg" src="background.jpg" width="100%" height="100%">
<div id="content">
  <div id="inhalt_breite">
    <div id="kopf">Header-Element</div>
    <div id="inhalt">Content-Element</div>
    <div id="fuss">Footer-Element</div>
  </div>
</div>
</body>
</html>

gruß sfischer

jackieboy · 25.01.2009

AW: Hilfe bezüglich Hintergrundbild

Ich zeige einfach mal, wie der derzeitige CSS-Code aussieht:

body{
padding:0px;
margin:0px;
background: #000000 url(../images/bg.jpg);
background-repeat: no-repeat;
background-Position:center top;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
FONT-STYLE: normal;
color: #FFFFFF;
background-color: #000000;
}

a:link, a:visited {
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #FF6600;
text-decoration: none;
font-weight: bold;
border: none;
}

a:hover {
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #ff6600;
border: none;
}

#head{
height: 170px;
background-image: url(../images/banner.jpg);
}

.module{
}

/* Main Menu(s) */

a.mainlevel {
background-image: url(../images/bg_menu.gif);
background-repeat: no-repeat;
color:#FF6600;
display: block;
height: 14px !important;
height: 14px;
vertical-align: middle;
padding-top: 2px;
border-bottom-width: 1px;
padding-top: 5px;
padding-bottom: 10px;
}

a.mainlevel:hover, a.mainlevel#active_menu {
color: #ff6600;
padding-left:8px;
}

a.sublevel {
background-image: url(../images/bg_menu.gif);
background-repeat: no-repeat;
background-position: 8px 0px;
display: block;
height: 14px !important;
height: 14px;
vertical-align: middle;
padding-top: 2px;
border-bottom-width: 1px;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 8px;

}

a.sublevel:hover, a.mainlevel#active_menu {
color: #555555;
padding-left:16px;
}

.cont {
padding-right: 20px;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 30px;
}

.contentpaneopen {
border: 0;

}

.cont h3{
background-image: none;
color: #000000;
font-size: 11px;
color: #222222;
padding: 5px;
background-color: #D9D9D9;
}

.contentpaneopen{
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #FFFFFF;
}

a.sublevel {
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #FFFFFF;
}

a.sublevel:hover, a.sublevel#active_menu {
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #777777;
}

.contentheading {
font-size: 20px;
color:#FF6600;
}

.leftback{
color: #777777;
padding-right: 20px;
height: 550;
background-image: none;
background-repeat: no-repeat;
background-position: 0px 120px; /*up - down legs */
}

.leftback h3{
color: #777777;
font-size: 11px;
color: #222222;
padding: 5px;
background-color: #D9D9D9;
}

#foot{
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #555555;
padding-right:5px;
padding-top:10px;
padding-bottom:10px;
}

.contenttoc{
border:1px solid #777777;
padding:3px;
margin-bottom: 3px;
margin-left: 3px;

}

.pagenavbar{
color: #999999;
}

.pagenavcounter{
color: #999999;
}

.componentheading{
background-image: none;
font-size: 20px;
color: #FFFFFF;
padding:5px;
background-color: #777777;
margin-top: 5px;
margin-bottom: 5px;
}

.pollstableborder{
text-align: left;
padding: 3px;
}

tr.sectiontableentry1, td.sectiontableentry1{
background-color:#525252;
color: #ffffff;
}

tr.sectiontableentry2, td.sectiontableentry2{
background-color:#222222;
color: #ffffff;
}

tr.sectiontableentry1 td, tr.sectiontableentry2 td {
padding:5px;
color: #ffffff;
}

td.sectiontableheader{
padding:5px;
color: #ffffff;
}

.mostread{
padding:2px;
background-color:#222222;
}

.latestnews{
padding:2px;
background-color:#222222;
}

/* Top Menu */

ul#mainlevel-nav{
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 25px;
padding: 0px;

}

ul#mainlevel-nav li{
list-style: none;
display:inline;
}

ul#mainlevel-nav li a:link, ul#mainlevel-nav li a:visited{
font-weight:bold;
color:#ffffff;
background-color:#777777;
margin: 2px;
padding: 5px 10px 5px 10px;
text-decoration: none;
}
ul#mainlevel-nav li a:hover{
background-color:#999999;
padding: 5px 10px 5px 10px;
text-decoration:none;

AngleShiva · 27.01.2009

AW: Hilfe bezüglich Hintergrundbild

sfischer schrieb:

hallo,

ja!
hier mal der code. aus zeitmangel ohne beschreibung!

Code:

<head>
<title>hintergrund</title>
<style type="text/css">
  <!--
* { margin: 0;
    padding: 0;}
 
/* Scrollbar ausblenden und Höhen- und Breitenanpassung zu 100%;  */
body, html{ width: 100%;
            height: 100%;
            overflow: hidden;}
 
/* hintergrundbild auf unterste Ebene */
#bgImg{ position: absolute;
        top: 0;
        left: 0;
        border: 0;
        z-index: 1;}
/* content absolut über hintergrundbild legen; Scrollbar bei Bedarf einblenden */
#content{ position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          overflow: auto;
          width: 100%;
          height: 100%;
          text-align: center;}
 
/* Layoutelemente */
#inhalt_breite{ width: 600px;
          height: 100px;
          text-align: left;
          margin: 18px auto;}
#kopf{ border: 1px solid #000;
          background: #efefef;}
#inhalt{ border: 1px solid #000;
             background: #f0fff0;
             margin-top: 6px;
             height: 1000px;}
#fuss{ border: 1px solid #000;
            background: #fffff0;
            margin-top: 6px;}
 //-->
</style>
</head>
<body>
<img id="bgImg" src="background.jpg" width="100%" height="100%">
<div id="content">
  <div id="inhalt_breite">
    <div id="kopf">Header-Element</div>
    <div id="inhalt">Content-Element</div>
    <div id="fuss">Footer-Element</div>
  </div>
</div>
</body>
</html>

gruß sfischer

Hallo sfischer !

könntest du bitte so nett sein und uns sagen wie oder wo wir was einfügen sollen !

mfg AngleShiva!

tombeat · 27.01.2009

AW: Hilfe bezüglich Hintergrundbild

Also wenn ich alles richtig verstanden habe, dann reicht eigentlich Das hier:
du hast jetzt

Code:

body{
padding:0px;
margin:0px;
background: #000000 url(../images/bg.jpg);
background-repeat: no-repeat;
background-Position:center top;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
FONT-STYLE: normal;
color: #FFFFFF;
background-color: #000000;
}

Das änderst du wie folgt:

Code:

body{
background: #000000 url(../images/bg.jpg);
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
FONT-STYLE: normal;
color: #FFFFFF;
[B][COLOR=DarkRed]width: 100%;
height: 100%;
Overflow: hidden;
background-attachment: fixed;
[/COLOR][/B] }