Background Image

Jonny · Beitrag von **Jonny** » Mo 14. Nov 2005, 21:01

Hallo,

habe folgendes Prob:

Habe mein Contenido eigentlich soweit zum Laufen bekommen, nur hab folgendes Pro: Hab die vorgefertigte Seite zentriert, doch nun is das Hintergrundimage nicht mit zentriert worden....

http://www.blumenfriedrich.de/jonas/con ... 6e0ab6b4d9

Da is mein Prob...Wo kann ich das anpassen?

MfG

rezeptionist · Beitrag von **rezeptionist** » Mo 14. Nov 2005, 21:14

ich glaube wenn du dich mit dem hintergund bild beschäftigst dann erübrigt sich deine frage

greets

ich denke wenn du das hg bild im css an das div outer anhängst müsste es gehen

Jonny · Beitrag von **Jonny** » Mo 14. Nov 2005, 21:35

hm in wie fern meinst du das?

hier mein layout:

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

   <title>Contenido Demo-Seite</title>
   <link href="css/style_blumen.css" rel="stylesheet" type="text/css">
   <link href="css/style_print_blumen.css" rel="stylesheet" type="text/css" media="print">
   <!--[if IE]>
      <style>
         #imagecolumn {
            width:170px;
         }
         #logo {
            margin-top:0;
         }
         #navipath {
            padding-top:2px;
         }
         .balken {
            background-position:0px 0px ;
         }           
         #additionalnavi {
            padding-top:2px;
         }
        </style>
   <![endif]-->
<script language="javascript" type="text/javascript" src="js/jsApi.js"></script>
</head>
<body>
<div align="center">
 <div id="outer" [b]background="../images/bg.gif"[/b]>
   <div id="innerwrap">
      <div id="centrecontent">
         <div id="navipath">
            <container id="60" name="Navigationspfad" types="Navigation" mode="fixed" default="Navigationspfad">Navigationspfad</container>
         </div>
         <container id="10" name="Headline" types="Content" default="Headline (HTML)">Headline (HTML)</container>
         <container id="12" name="Text" types="Content" default="">Content 1</container>
         <container id="15" name="Text" types="Content" default="">Content 2</container>
         <container id="22" name="Text" types="Content" default="">Content 3</container>
         <container id="24" name="Text" types="Content" default="">Content 4</container>
         <container id="26" name="Text" types="Content" default="">Content 5</container>
         <container id="28" name="Text" types="Content" default="">Content 6</container>
            <div align="center">
             
         <table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td style="background-color:rgb(210,210,210);"><img src="images/grey.gf" width="1" height="1" border="0" alt="" title=""/></td></tr></table>
             
            </div>
         <div id="bottomnavi">
            <container id="30" name="BottomNavigation" types="Navigation" mode="fixed" default="BottomNavigation">BottomNavigation</container>
         </div>         
      </div>
      <div id="left">
         <container id="40" name="Hauptnavigation" types="Navigation" mode="fixed" default="Hauptnavigation">Hauptnavigation</container>
         <container id="44" name="Suche" types="Navigation" default="">Suche</container>
         <container id="48" name="Login" types="Navigation" default="">Login</container>
         <container id="49" name="Newsletter" types="Navigation" default="">Newsletter</container> </div>
   </div>
   <div id="right"><div id="imagecolumn">
   <container id="70" name="Teaser_Rechts" types="Content" mode="optional">Teaser (Rechts)</container>
   <container id="72" name="Teaser_Rechts" types="Content" mode="optional">Teaser (Rechts)</container>
   <container id="74" name="Teaser_Rechts" types="Content" mode="optional">Teaser (Rechts)</container>
</div></div>
   <div id="clearfooter"></div>
   <div id="header">
      <div id="additionalnavi"><container id="50" name="Hilfsnavigation" types="Navigation" mode="fixed" default="Hilfsnavigation">Hilfsnavigation</container></div>
      <div id="logo">
            <div align="center">
             
         <table width="780" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td><a href="front_content.php" title="Zur Homepage"><img src="images/logo.gif" width="101" hspace="30" height="61" border="0" alt="Logo" title="Logo"/></a></td>
               <td align="left"><img src="images/blank.gif" width="449" height="1" border="0"/></td>
               <td align="right"><container id="80" name="Illustration" types="Content" default=""></container></td>
            </tr>
            <tr>
               <td colspan="3" class="balken"><img src="images/blank.gif" border="0" width="780" height="5" alt=""/></td>
            </tr>
         </table>
             
             </center>
            </div>
             
   </div>
</div>
<div id="imagecolumn">
   <container id="70" name="Teaser_Rechts" types="Content" mode="optional">Teaser (Rechts)</container>
   <container id="72" name="Teaser_Rechts" types="Content" mode="optional">Teaser (Rechts)</container>
   <container id="74" name="Teaser_Rechts" types="Content" mode="optional">Teaser (Rechts)</container>
</div>

 </center>
            </div>

</body>
</html>

hier meine style.css

Code: Alles auswählen

html, body { height:100%; }

body {
	padding:0;
	margin:0;
	text-align:left;
	min-width:780px;
	background-color:#FFFFFF;
	font-size:11px;
	font-family:Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif;
	color:rgb(0,0,0);
	background-image:url('../images/bg.gif');
	background-repeat:repeat-y;
	background-position:0px 0px;
	overflow-x:hidden;
	overflow:-moz-scrollbars-vertical;
}

td {
	font-size:11px;
	font-family:Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif;
	color:rgb(62,77,116);
	margin-bottom:8px;
}

.input {
	font-size:11px;
	font-family:Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif;
	color:rgb(0,0,0);
	width:240px;
	margin-bottom:8px;
	border-top:1px solid #999999;
	border-right:1px solid #999999;
	border-bottom:1px solid #999999;
	border-left:1px solid #999999;
}

.label {
	font-size:11px;
	font-family:Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif;
	color:rgb(0,0,0);
}

.small {
	font-size:9px;
}

#outer{
	height:100%;
	min-height:100%;
	width:780px;
	color:#000000;
	text-align:left;
	position:relative;
}
 
html>body #outer{ height:auto; } 

#innerwrap {
	float:left;
	width:600px;
}

#header{
	position:absolute;
	top:0;
	left:-1px;
	width:781px;
	height:103px;
	color:#000000;
	background-color:#ffffff;
	background:url("../images/schraffur_rechts_oben.gif");
	background-repeat:repeat-x;
	background-position:0px 0px ;
	z-index:5;
}

#left {
	position:relative;
	width:180px;
	float:left;
	padding-top:120px;
	padding-bottom:20px;
}

#left p { padding-left:3px;padding-right:2px }

#right p { padding-left:4px;padding-right:2px }

#imagecolumn {
	margin-top:0px;
	position:absolute;
	top:20px;
	left:608px;
	width:148px;
	height:550px;
	z-index:10;
	padding-top:112px;
	padding-left:10px;
	padding-right:10px;
	color:rgb(62,77,116);
}

#imagecolumn a {
	padding:0;
	font-weight:normal;
	font-size:11px;
	color:rgb(190,190,190);
	margin:0;
}

#imagecolumn h1 {
	padding:0;
	font-weight:normal;
	font-size:11px;
	color:rgb(217,104,28);
	margin:0;
}

#right {
	position:relative;
	width:170px;
	float:right;
	margin-top:10px;
	padding-top:170px;
	padding-bottom:20px;
	background-color:#999999;
	background:url('../images/randbg.jpg');
	background-position:0px 0px;
	background-repeat:no-repeat;
	color:rgb(62,77,116);
}

div,p  { margin-top:0; }

#centrecontent {
	width:408px;
	float:right;
	padding-left:0px;
	padding-right:0px;
	padding-top:105px;
	padding-bottom:20px;
	color:rgb(62,77,116);
}

#centrecontent p { padding-left:3px:color:rgb(62,77,116); }

#clearfooter { width:100%;height:52px;clear:both; }

#bottomnavi {
	text-align:center;
	color:rgb(210,210,210);
}

#additionalnavi {
	float:right;
	background-color:#ffffff;
	margin-top:3px;
	padding-bottom:2px;
	padding-top:0px;
	margin-left:10px;
	text-align:center;
	width:170px;
	color:rgb(160,160,160);
}

#logo {
	width:780px;
	margin-top:18px;
}


#navipath {
	padding:0;
	padding-bottom:10px;
	background-color:#ffffff;
	color:rgb(99,99,99);
	width:388px;
}

.navi{
	width:180px;
	border-bottom:1px solid rgb(170,170,170);
	background-color:rgb(255,255,255);
}

h1 {
	padding-left:2px;
	font-weight:bold;
	font-size:13px;
	color:rgb(217,104,28);
	margin:0;
}

h1.content {
	margin-bottom:12px;
	padding:0;
}

hr { color:rgb(210,210,210); }

a { font-size:11px; color:rgb(190,190,190); text-decoration:none; }
a:hover { text-decoration:underline; }

a.newsheadline { font-weight:bold; } 

a.bottomnavi { color:rgb(160,160,160); font-size:9px; } 

a.additionalnavi { font-size:10px; color: rgb(160,160,160); }

a.navipath { font-size:10px; color: rgb(160,160,160); } 

a.navileft_passive {
	display:block;
	background-color:#E8E8EE;
	padding-top:3px;
	padding-bottom:3px;
	color:rgb(51,79,119);
} 

a.navileft_active {
	display:block;
	background-color:#ffffff;
	background:url("../images/navi_pfeil_rechts.gif") no-repeat;
	background-position:right;
	padding-top:3px;
	padding-bottom:3px;
	color:rgb(51,79,119);
} 

a.navileft_open {
	padding-left:10px;
	display:block;
	background:url("../images/navi_pfeil.gif") no-repeat;
	background-position:right;
	background-color:#E8E8EE;
	padding-top:3px;
	padding-bottom:3px;
	color:rgb(51,79,119);
} 

a.sitemap_level1 {
	display:block;
	border-bottom:1px solid #b4a8b4;
	color:rgb(217,104,28);
	font-weight:normal;
	padding-bottom:.4em;
	background:url("../images/navi_pfeil_rechts.gif") no-repeat;
	background-position:right;
}

a.sitemap_level2 {
	color:rgb(62,77,116);
	background:url("../images/navi_pfeil_rechts.gif") no-repeat;
	background-position:170px 4px;
	display:block;
}

a.sitemap_level3 {
	color:rgb(190,190,190);
}

.sitemap_level2_container {
	float:left;
	width:50%;
	padding-top:.3em;
}

.sitemap_level3_container {
	float:right;
	width:50%;
	padding-top:.3em;
}

.input_searchbox {
	width:65px;
	vertical-align:middle;
	font-size:11px;
	color: rgb(62,77,116);
}

.input_newsletterselect {
	width:80px;
	vertical-align:middle;
	font-size:11px;
	margin-right: 8px;
	color: rgb(62,77,116);
}

.label_searchbox {
	vertical-align:middle;
	color:#9d9ea2;

	position:relative;
	padding-left:10px;
	/*left:-65px;*/
}

#loginbox {
	background-color:#DFE0E5;
	border-top:1px solid #aeaeae;
	border-bottom:1px solid #aeaeae;
	padding-bottom:.6em;
	padding-top:.6em;
	padding-left:0em;
	padding-right:0em;
	margin-top:1.5em;
	margin-bottom:1.5em;
}

#searchbox {
	background-color:#DFE0E5;
	border-top:1px solid #aeaeae;
	border-bottom:1px solid #aeaeae;
	padding-bottom:.6em;
	padding-top:.6em;
	padding-left:0em;
	padding-right:0em;
	margin-top:1.5em;
	margin-bottom:1.5em;
}

#newsletterbox {
   background-color:#DFE0E5;
   border-top:1px solid #aeaeae;
   border-bottom:1px solid #aeaeae;
   padding-bottom:.6em;
   padding-top:.6em;
   padding-left:.5em;
   padding-right:.5em;
   margin-top:1.5em;
   margin-bottom:1.5em;
}

.hidden {
	display:none;
}

.balken {
	padding-left:0px;
	background-color:rgb(255,110,43);
	background-image:url('../images/bg2.gif');
	background-repeat: repeat-x,repeat-y;
	background-position:2px 0px ;
}

[/code]

Beitrag von **HerrB** » Mo 14. Nov 2005, 21:41

Bei #outer in der CSS-Datei

Code: Alles auswählen

background-image:url('../images/bg.gif');

einfügen.

Tipp:
CSS -> http://de.selfhtml.org

Gruß
HerrB

rezeptionist · Beitrag von **rezeptionist** » Mo 14. Nov 2005, 21:44

Code: Alles auswählen

#outer{
   height:100%;
   min-height:100%;
   width:780px;
   color:#000000;
   text-align:left;
   position:relative; 
   background-image:url(../images/bg.gif) 
}

ersetze mal das in deiner style css datei

rezeptionist · Beitrag von **rezeptionist** » Mo 14. Nov 2005, 21:46

herB war mal wieder schneller grins guter tip mit selfhtml

für die faulen

http://de.selfhtml.org/css/

greets

Jonny · Beitrag von **Jonny** » Mo 14. Nov 2005, 21:53

hey cool nun läufts

danke an alle !