Hintergrundgrafik (Background!) soll MIT dem Footer scrollen

Flens

Hallo zusammen!

Nachdem ich nach besten Wissen alles versucht habe, stelle ich hier mal mein Problem dar, welches ich nicht gelöst bekomme.

Es geht um folgendes:

Im Seitenhintergrund habe ich bereits eine Hintergrundgrafik im Headerbereich angefügt, die horizontal die Freiräume der Seite mit etwas Farbe füllt. (Blau mit rotem Streifen)

[Blockierte Grafik: http://www.bilder-hochladen.net/files/6anq-4.jpg]

Nun möchte ich gerne einen ähnlichen Abschluss im Bereich des Footer umsetzen (Blau mit grünen Streifen). Allerdings soll in diesem Fall die Hintergrundgrafik dem Footer "folgen", sich also bei wechselnden Seitenhöhen mit bewegen.

Nun meine Frage, wie bekomme ich eine Hintergrundgrafik, die horizontal die Freiräume der Seite füllt, an die bestehende Grafik im Footer - so das diese sich bei verschiedenen Seitenhöhen mit bewegt. Was mir eben fehlt ist die Grafik zwischen dem gestrichelten Linien - die sich bis zum Browserfenster kachelt.

Benötigt Ihr dazu Code`s der Seite gebt bitte Bescheid, ich werde diese hier dann posten. Den Link zur Seite kann ich leider nicht veröffentlichen.

Ich danke Euch schon einmal im Voraus für Eure Mühen!

Mit besten Grüßen
Flens

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Monika

wie machst du es denn im content?

genauso im footer

eventuell braucht dann der footer ein 2tes div

besser gehts nicht ohne das Mark Up zu sehen und ohne das CSS zu wissen

lg

Flens

Hallo Monika!

Ja, ist ein wenig blöd, das ich jetzt den Link nicht einfach rüber geben kann.

Hier mal die CSS:

CSS

*{border:0;margin:0;padding:0;}
html{height:100%;margin-bottom:1px;}
body{font:75%/150% Verdana, Geneva, Arial, Helvetica, sans-serif;text-align:center;background:#d4d1cb url('images/background.gif') top repeat-x;padding-top:30px;color:#000;}
p{line-height:1.5em;padding:0 1em 1em;}
a{text-decoration:none;color:#000;font-weight:400;}
a:hover{text-decoration:none;color:#e12e32;}
small{text-align:right;margin:1em;}
label small{text-align:left!important;margin:0;}
hr{clear:both;border-top:1px solid #fc3;margin:0 auto;}
.date{color:#999;background:url('images/box-background.png') top repeat;text-align:right;float:right;margin:0;padding:.5em .5em .5em 10px;}
.date1{font-size:3em;display:block;}
.date2{font-size:2em;display:block;}
.date3{font-size:2em;display:block;font-weight:700;}
.pageinfo{font-size:.8em;color:#000;text-align:right;border-bottom:1px dashed #000;clear:both;margin-bottom:20px;padding:1em;}
.boxedup{background:url('images/gradient.png') top repeat-x #fff;border:1px solid #ec5;margin:.5em;padding:1.5em;}
.fifty{width:40%;text-align:center;}
#newheader{height:20px;width:1000px;background:url('images/page-background.png') top left no-repeat;text-align:right;padding-top:9px;margin:0 auto;}
#newheader h1{font:1.8em Verdana, Geneva, Arial, Helvetica, sans-serif;padding:10px 30px 0 0;}
#newheader h1 a{color:#b90;}
#newheader h1 a:hover{color:#b90;text-decoration:none;border-bottom:5px solid #f90;}
#newheader h2{padding-right:30px;font-size:.9em;font-weight:400;}
#wrapper{width:1000px;background:url('images/page-background-middle.png') top left repeat-y;min-height:650px;margin:0;}
#wrapper h2{font-size:1.4em;border-bottom:1px dashed #310;}
#wrapper h3,#wrapper h4{font-size:1.2em;}
.image1{background:url('images/hintergrundbild.jpg') top left no-repeat;width:945px;padding-top:250px;margin:0 30px 0 26px;}
#main{width:930px;background:#fff;text-align:left;}
#main h2,#main h3,#main h4{font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;color:#000;border-bottom:0 dashed #000;margin-bottom:5px;padding:10px 0;}
#site{text-align:left;width:610px;}
#column1{width:400px;float:right;text-align:justify;}
#column1 ul,#column1 ol{margin-left:20px;line-height:1.5em;}
#column1 ul li{list-style:square inside;margin:0 1em;padding:.2em;}
#column1 ol{padding-left:2em;}
#column1 ol li{list-style:decimal outside;margin:0 1em;padding:.2em;}
#column1 blockquote{margin-left:5px;font-style:Verdana, Geneva, Arial, Helvetica, sans-serif;color:#963;background:url('images/blockquote.png') 0 0 no-repeat;padding:0 0 10px 20px;}
#column1 blockquote p{margin:1em 1em 0 0;}
#column2{position:absolute;top:123px;width:170px;float:left;left:40px;z-index:1;}
#column2 ul{list-style:none;padding-left:5px;padding-bottom:5px;margin-bottom:1em;background:#fff;border:1px solid #ddd;z-index:1;}
#column3{position:absolute;top:290px;width:200px;float:left;left:750px;}
#column3 ul{list-style:none;padding-left:10px;padding-right:10px;padding-bottom:10px;margin-bottom:1em;background:#fff url('images/menue-grau.png');border:1px solid #ddd;}
#frame-bottom{clear:both;font-size:.8em;text-align:right;padding:5px;}
#frame-bottom a{font-weight:400;}
#frame-bottom span a{color:#eb9;}
#aaa{background:url('images/footer-background.gif');background-repeat:repeat-x;background-position:bottom left;}
#footer{width:1000px;background:url('images/page-background.png') bottom left no-repeat;margin:0 auto;padding:0 0 40px;}
#footer p{background:#003060 url('images/background.png') bottom left no-repeat;font-size:.8em;margin:0 30px;padding:20px 0 10px;}
#footer p a{color:#000;font-size:.8em;}
#navigation{position:absolute;top:20px;left:650px;text-align:left;}
#nav{width:350px;font:1em Verdana, Geneva, Arial, Helvetica, sans-serif;margin:0 auto;}
#nav,#nav ul{text-align:left;list-style:none;font-weight:400;z-index:8;}
#nav li{float:left;margin:0;padding:0;}
#nav a{border-right:1px solid #ddd;display:block;line-height:2em;color:#666;text-decoration:none;font-weight:400;padding:0 15px;}
#nav a:hover{border-right:1px solid #ccc;color:#000;background:#fff;}
#nav li ul{font-size:1em;border:1px solid #ddd;background:url('images/page_nav.png') repeat #fff;position:absolute;left:-999em;height:auto;width:14em;margin:0;padding:0;}
#nav li li{width:14em;margin:0;}
#nav li ul a{border-left:1em solid #eee;margin:0;}
#nav li ul a:hover{border-left:1em solid #d9292c;}
#nav li:hover ul,#nav li li:hover ul,#nav li.sfhover ul,#nav li li.sfhover ul{left:auto;}
#nav li:hover,#nav li.sfhover{background:#ccc;}
#nav li ul ul{margin:-2em 0 0 13em;}
#nav li:hover ul ul,#nav li.sfhover ul ul{left:-999em;}
#page_nav{padding:0 10px;}
#page_nav a{display:block;color:#999;border:1px solid #eee;padding:10px;}
#page_nav a:hover{border:1px solid #f90;background:#fe9;color:#f90;}
#breadcrumbs{position:absolute;font-size:.8em;top:4px;left:5px;text-align:left;text-transform:lowercase;}
#searchcss{font-size:.9em;position:absolute;top:1px;right:5px;}
#searchform{text-align:center;}
#searchform #s{width:110px;border:1px solid #000;padding:0;}
#searchsubmit{font-size:10px;background:#fff url('icons/icon_search.png') 1px 1px no-repeat;cursor:pointer;border:1px solid #000;padding:0 0 0 5px;}
#submit{cursor:pointer;}
.entry{width:480px;font:.9em Verdana, Geneva, Arial, Helvetica, sans-serif;}
.entry form{text-align:left;}
select{width:130px;}
#commentform input{width:170px;border:1px solid #ca3;background:#fed;margin:5px 5px 1px 0;padding:2px;}
#commentform textarea{width:95%;border:1px solid #ca3;background:#fed;padding:2px;}
#commentform #submit{border:1px solid #ca3;color:#666;background:#fed;vertical-align:top;}
#commentform #submit:hover{border:1px solid #f90;background:#fe9;}
#commentform input:focus,#commentform textarea:focus,#searchform #s:focus{background:#fe9;}
.comment_no{float:right;font-size:3em;color:#eee;padding:10px 0;}
.commentlist{margin:0;padding:0;}
ol.commentlist{margin:0!important;padding:0!important;}
.commentlist li{clear:both;list-style-type:none!important;background:#fff url('images/gradient.png') 0 -50px repeat-x;border-top:1px solid #ddd;margin:0!important;padding:0;}
.commentlist li:hover{background-position:0 -30px;border-top:1px solid #ccc;}
.commentmetadata{border-top:1px dashed #ccc;clear:both;text-align:right;font-size:.8em;font-weight:400;color:#aaa;}
#column1 blockquote.commented{margin-left:5px;font-style:italic;color:#963;background:url('images/blockquote-comment.png') 0 0 no-repeat!important;padding:0 10px 10px 20px;}
#column1 blockquote.commented blockquote,#column1 blockquote.commented ul,#column1 blockquote.commented ul li{background:none!important;margin:0!important;padding:0!important;}
.commentlist .gravatar{display:block;float:left;border:2px solid #ccc;background:#eee;margin:0 20px 5px 0;padding:3px;}
p img{position:relative;border-left:1px solid #aaa;border-top:1px solid #aaa;background:#fff url('') right bottom no-repeat;padding:5px 12px 12px 5px;}
p img[alt="an image"]{float:left;margin:0 7px 2px 0;}
img.alignright{display:inline;margin:0 0 2px 7px;padding:4px;}
img.alignleft{display:inline;margin:0 7px 2px 0;padding:4px;}
.center{display:block;margin-left:auto;margin-right:auto;}
.alignright{float:right;}
#wp-calendar{text-align:center;width:100%;background:#fec;}
#wp-calendar caption{background:#fc3;}
#wp-calendar thead{background:#fc9;}
#wp-calendar #today{background:#fda;}
#wp-calendar a{text-decoration:underline;}
#column2 ul li{font-size:1em;background:#fff;z-index:1;margin:0;padding:.2em;}
#column2 ul li.listheader{font-weight:400;background:#fff;border:1px solid #fff;z-index:1;}
#column2 ul li h2,#column2 ul li h3{font-size:1.1em;color:#000;background:#fff;border:1px solid #fff;z-index:1;margin:0;padding:.2em;}
#column3 ul li{background:#fff url('images/menue-grau.png');font-size:.9em;margin:0;padding:.2em;}
#column3 ul li.listheader{background:#fff url('images/menue-grau.png');font-weight:400;}
#column3 ul li h2,#column3 ul li h3{font-size:1em;color:#000;margin:0;padding:.2em;}
.icons a{display:block;height:16px;padding-left:25px;}
.icons a:hover{background-position:left bottom;}
.icons .s_delicious{background:url('icons/delicious.gif') no-repeat;}
.icons .s_digg{background:url('icons/digg.gif') no-repeat;}
.icons .s_technorati{background:url('icons/technorati.gif') no-repeat;}
.icons .s_reddit{background:url('icons/reddit.gif') no-repeat;}
.icons .s_magnolia{background:url('icons/magnolia.gif') no-repeat;}
.icons .s_stumbleupon{background:url('icons/stumbleupon.gif') no-repeat;}
.icons .s_yahoo{background:url('icons/yahoo.gif') no-repeat;}
.icons .s_google{background:url('icons/google.gif') no-repeat;}
.iconcomment a{padding-left:20px;background:url('icons/icon_comment.png') top left no-repeat;}
.iconedit{background:url('icons/icon_edit.png') top left no-repeat;padding:1px 0 5px 20px;}
.iconrss{background:url('icons/icon_feed.gif') no-repeat;}
#layoutrahmen{position:absolute;left:50%;top:5px;width:1000px;margin-left:-490px;}
#fader1{position:absolute;left:50px;top:92px;z-index:0;}
#logo{position:absolute;left:40px;top:20px;}
#login{position:absolute;left:960px;top:255px;}
.clear,.alt{clear:both;}
#frame-bottom span,.alignleft{float:left;}

Alles anzeigen

Flens

Und hier mal der Quelltext:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<title>xxxxxxxxxx</title>
<meta name="description" content=" - " />
<link rel="stylesheet" href="http://xxxxxxxxxx/wp-content/themes/xxxxxxxxxx/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://xxxxxxxxxx/wp-content/themes/xxxxxxxxxx/widgets.css" type="text/css" media="screen" />
<link rel="shortcut icon" type="image/ico" href="http://xxxxxxxxxx/wp-content/themes/xxxxxxxxxx/favicon.ico" />
<link rel="alternate" type="application/rss+xml" title=" RSS Feed" href="http://xxxxxxxxxx/feed/" /><link rel="pingback" href="http://xxxxxxxxxx/xmlrpc.php" />


<link rel="stylesheet" type="text/css" media="screen"
          href="http://xxxxxxxxxx/wp-content/themes/xxxxxxxxxx/style_ie.css" />


<meta name='robots' content='noindex,nofollow' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://xxxxxxxxxx/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://xxxxxxxxxx/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 2.6" />
<link rel="stylesheet" type="text/css" href="http://xxxxxxxxxx/wp-content/plugins/cforms/styling/cforms.css" />
<script type="text/javascript" src="http://xxxxxxxxxx/wp-content/plugins/cforms/js/cforms.js"></script>


<style type="text/css">
<!--
.image1 {background: url('http://xxxxxxxxxx/wp-content/themes/xxxxxxxxxx/images/xxxxxxxxxxgrundbild.jpg') top left no-repeat; width: 945px; margin: 0 30px 0 26px; padding-top: 250px;}
//-->
</style>


</head>
<body>


<div id="layoutrahmen">
<div id="logo"><a href="http://xxxxxxxxxx/"><img src="http://xxxxxxxxxx/wp-content/themes/xxxxxxxxxx/images/logo2.jpg" width="220" height="67" alt="logo" border="0" /></a></div>
<div id="login"><a href="http://xxxxxxxxxx/wp-admin"><img src="http://xxxxxxxxxx/wp-content/themes/xxxxxxxxxx/images/login.gif" width="30" height="30" alt="" border="0" /></a></div>


<div id="newheader"></div>
<div id="wrapper">
<div class="image1">
<div id="main">
<div id="site">
<div id="column1">


    <a href="#" name="documentContent"></a><div id="fader1"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
 width="600" height="173" id="flashfader" align=""><param name="wmode" value="transparent" /><param name="movie" value="http://xxxxxxxxxx/wp-content/plugins/flashfader.swf" /><param name="FlashVars" value="path2xml=http://xxxxxxxxxx/wp-content/flashfader/images.xml"><param name="quality" value="high" /><param name="bgcolor" value="" /><embed src="http://xxxxxxxxxx/wp-content/plugins/flashfader.swf" FlashVars="path2xml=http://xxxxxxxxxx/wp-content/flashfader/images.xml" quality="high" bgcolor="" width="600" height="173" name="flashfader" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="transparent"></embed></object></div>
 
 <div class="post" id="post-158"><h2>xxxxxxxxxx</h2>
 <div class="entry">
 <p><strong>xxxxxxxxxx<em><a href="http://xxxxxxxxxx/xxxxxxxxxx/">xxxxxxxxxx</a></em>.</strong></p>
<p>xxxxxxxxxx<strong>xxxxxxxxxx</strong>xxxxxxxxxx</p><p>xxxxxxxxxx<em><a href="'http://xxxxxxxxxx/xxxxxxxxxx/">xxxxxxxxxx</a></em>.</p><p style="text-align: justify;">xxxxxxxxxx</p>
<p style="text-align: justify;"> <a href="http://xxxxxxxxxx/2008/10/xxxxxxxxxx/#more-158" class="more-link">xxxxxxxxxx &raquo;</a></p></div>


</div>


<div id="page_nav">
<div class="alignleft"></div>
<div class="alignright"></div>


</div>    
</div>


<div id="column2"><ul><form method="get" id="searchform" action="http://xxxxxxxxxx/">
<div>
<input type="text" value="" name="s" id="s" /><input type="submit" id="" value="xxxxxxxxxx" />
</div>


</form></li></ul><ul><ul>
<li class="page_item page-item-147"><a href="http://xxxxxxxxxx/xxxxxxxxxx/" title="xxxxxxxxxx">xxxxxxxxxx</a></li>
<li class="page_item page-item-70"><a href="http://xxxxxxxxxx/xxxxxxxxxx/" title="xxxxxxxxxx">xxxxxxxxxx</a></li>
<li class="page_item page-item-133"><a href="http://xxxxxxxxxx/xxxxxxxxxx/" title="xxxxxxxxxx">xxxxxxxxxx</a></li>
<li class="page_item page-item-137"><a href="http://xxxxxxxxxx/xxxxxxxxxx/" title="xxxxxxxxxx">xxxxxxxxxx</a></li>
</ul>
</li></ul><ul><li class="listHeader"><h2>xxxxxxxxxx</h2></li><li><div class="wys-text"><p><strong>xxxxxxxxxx<br />xxxxxxxxxx<br />xxxxxxxxxx<br />xxxxxxxxxx</strong></p></div></li></ul></div>


<div id="column3"><ul><li class="listHeader"><h2>xxxxxxxxxx</h2></li><li><div class="textwidget">xxxxxxxxxx</div></li></ul><ul><li class="listHeader"><h2>xxxxxxxxxx</h2></li><li><div class="textwidget">xxxxxxxxxx</div></li></ul><ul><li class="listHeader"><h2>xxxxxxxxxx</h2></li><li><div class="textwidget">xxxxxxxxxx</div></li></ul></div><div class="clear"></div>


</div>


<div id="frame-bottom"></div>


</div>
</div>
</div>


<div id="footer">xxxxxxxxxx</div>
<div id="navigation">
<ul id="nav">
<li class="page_item page-item-28"><a href="http://xxxxxxxxxx/xxxxxxxxxx/" title="xxxxxxxxxxt">xxxxxxxxxx</a></li>
<li class="page_item page-item-187"><a href="http://xxxxxxxxxx/xxxxxxxxxxm/" title="xxxxxxxxxx">xxxxxxxxxx</a></li>
<li class="page_item page-item-262"><a href="http://xxxxxxxxxx/xxxxxxxxxx/" title="xxxxxxxxxx">xxxxxxxxxx</a></li></ul></div>


</div>


</body>
</html>

Alles anzeigen

Hoffe das lässt sich irgendwie einrichten...
Vielen Dank für Deine Hilfe Monika.

Grüße!

Monika

ich schrieb doch oben die Lösung

so wie es beim Content auch geht

also zwischen div id footer /div ein zweites div geben und in das erste das mitscrollende Bild in das andre das Bild das da bleiben sollte

Beispiel:

Code

div id footer   div class background clearfix


..


..
/div  /div

Code

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {
    height: 1%;
}
/* End hide from IE-mac */

Alles anzeigen

hilft das weiter?

lg

Flens

Hallo Monika!

Scheinbar stehe ich auf dem Schlauch. Ich habe das jetzt so probiert, aber es klappt nicht. Ich gehe grad mal pauschal davon aus, das ich da etwas falsch mache.

Dies hier ist mein Quelltext im Footer:
Jetzt ohne deine Code-Hinweise!

PHP

<div class="clear"></div>


</div>


   <div id="frame-bottom"><?php if (isset($_SERVER["HTTP_REFERER"])) { ?><?php } ?></div>
 
</div>


</div>
</div>
<div id="footer">xxxxxxxxxx - xxxxxxxxxx - xxxxxxxxxx - xxxxxxxxxx


</div>


<div id="navigation">
    <ul id="nav">
      <?php wp_list_pages('sort_column=menu_order&title_li=&include=28,187,262'); ?>
     </ul>
</div>
</div>


<?php wp_footer(); ?>


</body>
</html>

Alles anzeigen

Vielleicht kann ich dich noch einmal darum bitten, mir das einmal im oberen Footer-Quelltext einzusetzen, so das sich meine "images/footer-background.gif" auch im Seitenhintergrund nach rechts und links am Footer zum Browserfenster kachelt...wie am Header.

Ich bin Dir sehr dankbar für deine Hilfe, denn scheinbar sehe ich grad den Wald vor lauter Bäumen nicht...

Beste Grüße
Flens

gsibergerin

In deiner CSS kommt ein Container vor, der genau dieses Bild (und auch mit der Angabe für die Kachelung) enthält:

Code

#aaa{background:url('images/footer-background.gif');background-repeat:repeat-x;background-position:bottom left;}

In deinem HTML fehlt dieser Container aber, also wird auch das Bild nicht angezeigt. War da vorher was, das du gelöscht hast? Denn deine CSS zeigt eigentlich, dass dieser Container vorgesehen war...

Die Sache ist etwas unübersichtlich und der fehlende Link macht´s schwierig. Jetzt mal einfach ins Blaue ein Vorschlag, den du ausprobieren kannst:

PHP

<div class="clear"></div>


</div>


   <div id="frame-bottom"><?php if (isset($_SERVER["HTTP_REFERER"])) { ?><?php } ?></div>
 
</div>


</div>
</div>
<div id="aaa">
<div id="footer">xxxxxxxxxx - xxxxxxxxxx - xxxxxxxxxx - xxxxxxxxxx
</div>
</div>


<div id="navigation">
    <ul id="nav">
      <?php wp_list_pages('sort_column=menu_order&title_li=&include=28,187,262'); ?>
     </ul>
</div>
</div>


<?php wp_footer(); ?>


</body>
</html>

Alles anzeigen

Den Container aaa um den footer rum. So sollte sich die Grafik eigentlich bis zum Rand des Browserfensters kacheln, weil aaa keine definierte Breite hat.

Flens

Tach gsibergerin!

Ja, die css "aaa" stammt noch von meinen eigenen Versuchen. Jetzt hat es dank Deiner und Monikas guten Tipps endlich auch geklappt. Ich habe keine Ahnung, was ich da vorher gefummelt habe - jetzt geht`s und ich bin froh darüber.

Ich bedanke mich bei Euch beiden!

Beste Grüße
Flens

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Hintergrundgrafik (Background!) soll MIT dem Footer scrollen

Jetzt mitmachen!