hintergrund scrollt nicht mit trotz des css befehls scroll

kasperhauser

stattdessen gibts immer ein repeat. den befehl no-repeat im body hab ich versucht und funktioniert auch. aber bei "scroll" passiert nix.
weiss jmd rat? bin noch nicht so der css freak.
wäre nett wenn mir jmd ein tip geben könnte. weiss nicht weiter.

PHP

body {
    margin: 0px;
    padding: 0px;
    font-family:  Arial,Verdana, Helvetica, sans-serif;
    background: #000000 url(images/page_background2.jpg) top center 
    scroll;
    color: #C2B274;
    font-size: 12px; 
}
#wrap {
    width: 980px;
    overflow: hidden;
    position:relative;
    margin: 0px auto 0px;    
}


#topdec {
    background: url(images/header.jpg) no-repeat;
    height: 130px;
    width: 980px;
    margin-right: auto;
    margin-left: auto;
    }
#content {
    width: 470px;
    float: left;
    display:inline;    
    padding-left: 30px;
}


#content ul {
    margin: 0 0 10px 20px;
    padding: 0;
}


#nav {
    height: 70px;
    width: 790px;
    margin-right: auto;
    margin-left: auto;
}
#sidebar {
    width: 180px;
    float: left;
    line-height: 1.5em;
    display:inline;
    padding-left: 48px;


}


#sidebar2 {
    width: 180px;
    float: right;
    line-height: 1.5em;
    display:inline;
    padding-right: 10px;
     
}




/* LINKS */
a {     color: #FFC200;
    text-decoration: none;
    font-weight: 500;
}


a:visited{
    color: #FFC200;
    text-decoration: none;
    
}


a:hover{
    color:#DE8000; 
}


h3, h4 {
    padding-top: 5px;
    padding-bottom: 5px;
}


h2 { color: #FFC200; font-size: 18px;font-weight:bold;height:24px;background: url(images/posticon.gif) no-repeat;padding-left:30px;padding-top:4px;}
}




#topdec p{
    text-align:right;
    color:#000;
    padding:0px;
    font-weight:bold;
    margin:0;
    font-size:10px;
    line-height:20px;
}


#footer {
    clear: both;        
    color: #8d8f92;
    font-size: 0.8em;
    height: 90px;        
    width: 537px;
    border-top: dotted 1px #222325;
    padding: 0px;
    
}
#footer p{
    padding:10px;
    margin:0px;
}


.entry{
    padding-top: 0px;
    padding-bottom: 25px;
    padding-left: 0px;
    /* font-size: 0.80em; */
    line-height: 1.4em;
vertical-align: middle;
}
.firstpost {
    margin-bottom:15px
}
h3.entrytitle, h3 {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 10px;
    font-weight: normal;
    font-size: 2em;
    letter-spacing: -1px;
}
h3.entrytitle a, h3.entrytitle a:visited, h3 a{
    color: #930;
    text-decoration:none;}


h3.entrytitle a:hover, h3 a:hover
{text-decoration:underline;
color: #930;}


.arc {
    padding:0;
    margin:0;
}
.arc h2 {
    color: #8E8E8E;
    font-size: 1.2em;
    text-transform: uppercase;
    margin-top:0;
    font-weight: normal;
}
.entrymeta{
    font-size: 0.85em;
    color: #8d8f92;
    padding: 0;
    margin:0;
      text-align: left;
      
}
.entrymeta a img{
    border:none;
}
.entrybody img {
    padding: 0px;
    margin: 0px;    
    border: 0;
}


.entrybody ul {
    margin-left: 20px;
    padding-left:0px;
    list-style-type: none;
}
.entrybody ol{
    margin-left:20px;
    padding-left:0px;
}
.entrybody ul li {
    list-style:square;
}
.commentlink img {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}


h2.entrydate  {
    font-size: 10px;
    margin: 0;
    padding: 0px;
}


.entrybody h4, .entrybody h3, .entrybody h2, #commentblock h2 {
    color: #C2B274;
    font: normal 1.2em Verdana, Arial, Helvetica, sans-serif;
}




.entrybody ul {
    margin-left: 30px;
    padding-left:0px;
    list-style-type: none;
}
.entrybody ol{
    margin-left:30px;
    padding-left:0px;
}
.entrybody ul li {
    list-style:square;
}
#sidebar2 h2 {
    color: #000;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 8px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 4px;
    padding-left: 0px;
    font-size: 1.1em;
    border-bottom: 1px solid #000;
}


#sidebar2 ul {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
}


#sidebar2 ul li {
    display: inline;
    margin:0;
    padding: 0;
        display: block;
    text-decoration: none !important;
    margin-left: 0px;
    padding-left: 3px;


}


#sidebar2 li{
    list-style: none;


}


#sidebar2 ul li a {
    color: #ffc200;    
    display: block;
    text-decoration: none !important;
    margin-left: 0px;
    padding-left: 4px;
    padding-top: 4px;
    padding-right: 0px;
    padding-bottom: 4px;
    }




#sidebar2 ul li a:hover{
    color:#DE8000; 
}


#sidebar2 ol {
    list-style: none;
    margin: 0 0 10px 0;
    padding: 0;
}
#sidebar2 ol li {
    padding: 3px;
}




#sidebar2 ul {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
}


#sidebar h2 {
    color: #000;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 8px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 4px;
    padding-left: 0px;
    font-size: 1.1em;
    border-bottom: 1px solid #000;
}


#sidebar ul {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
}


#sidebar ul li {
    display: inline;
    margin:0;
    padding: 0;
       }


#sidebar li{
 list-style: none;


}


#sidebar ul li a {    
    color: #ffc200;
    display: block;
    text-decoration: none !important;
    margin-left: 0px;
    padding-left: 4px;
    padding-top: 4px;
    padding-right: 0px;
    padding-bottom: 4px;
}




#sidebar ul li a:hover{
    color:#DE8000; 
}


#sidebar ol {
    list-style: none;
    margin: 0 0 10px 0;
    padding: 0;
}
#sidebar ol li {
    padding: 3px;
}


#searchdiv {
    margin-top: 8px;


}
.comments-link {
    background-image:url(images/comments.gif);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left:16px;
}
/************************************************
*    Comments                                                    *
************************************************/
#commentblock h2{
    padding:2px;
    margin-bottom:10px;
    margin-top:30px;
}
#commentblock {
    float:left;
    padding-top: 0px;
    padding-bottom: 20px;


    text-align: left;    /*font-size: 0.8em;*/
}


ol#commentlist {
    margin-top:0px;
    padding: 5px;
    margin-left: 0px;
    font-size:0.9em;
    list-style-type: none;
}
.commentdate {
    font-size:0.8em;
    padding-left:5px;
}
.alt {
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #6B757E;
    border-bottom-color: #6B757E;
}
#commentlist li  p{
    margin-bottom: 8px;
    line-height: 20px;
    padding:0;
}


.commentname {
    margin: 0;
    padding: 5px;
}


.commentinfo{
clear:both;
}


.commenttext {
    clear: both;
    margin-top: 0px;
    margin-bottom: 10px;
    line-height:1.5em;
    padding: 5px;
}


.commenttext-admin {
    clear: both;
    margin-top: 0px;
    margin-bottom: 10px;
    line-height:1.5em;
    padding: 5px;
}


#commentsformheader{
    padding-left:0px;
    font-size: 1.4em;
}


#commentsform{
    margin-top:0;
    text-align:center;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}


#commentsform form{
    text-align:left;
    margin:0px;
}


#commentsform p{
    margin:5px;
}


#commentsform form textarea{
    width:99%;
}
p.comments_link  img{
    margin: 0px;
    padding: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}


blockquote{
    font-style: italic;    
    padding: 4px;
}




table{
    margin:10px;
}
td, th{
    padding:3px;
    font-weight:normal;


}


.title
{
color: #598CB8;
font: normal 1.2em Verdana, Arial, Helvetica, sans-serif;
font-weight: bold; margin-top:10px;}

Alles anzeigen

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

Marcus[IS]

Hi,

Ich glaube, das liegt daran, dass du den Scroll Befehl in eine neue Zeile gepackt hast und der Background Style durch das fehlende ; nicht abgeschlossen ist.

Versuche es mal so;

Code

background: #000000 url(images/page_background2.jpg) top center scroll;

Und wenn du noch mehr bezüglich CSS wissen möchtest, hätte ich auch zu deinem Aktuellen Background Befehl etwas.

http://de.selfhtml.org/css/eigenschaf…ound_attachment

Die Themen bei selfhtml sind recht gut mit vielen Beispielen erklärt und so habe ich mir selber bezüglich CSS viel aneignen können. ;)

kasperhauser

danke für die schnelle antwort. leider lag es nicht an der falschen zeile. hab auch schon andere befehle versucht. hat alles nix genutzt.
wenn ich beischpielsweise no-repeat benutzt, spricht er darauf an und der bg erscheint nur einmal und dann ist schluss. so wie es sein soll.
scroll macht er leider einfach nicht.
hab das gefühl, das entweder das problem in einem anderen dokument liegt, oder ein befehl den ich nicht zu deuten weiss den hintergrund zusätzlich beeinflusst...

Marcus[IS]

Hm,

dann versuche mal folgendes;

Code

body {
    margin: 0px;
    padding: 0px;
    font-family:  Arial,Verdana, Helvetica, sans-serif;
    background: #000000 url(images/page_background2.jpg) top center; 
    background-attachment:scroll;
    color: #C2B274;
    font-size: 12px; 
}

Der Erste Befehl mit der BG Anweisung wurde mit dem ; abgeschlossen und der Scroll Befehl um einen Eintrag erweitert.
Theoretisch müsste es klappen.

kasperhauser

hatte ich eben auch schon versucht, leider ohne erfolg.
trotzdem danke für den tip.
wenn ich noch ein no-repeat einfüge, zeigt er das bild zwar nur einmal, aber dann kommt weiter unten schwarzer hintergrund. soll ja auch so sein. anscheind geht alles nur nicht scroll.
gibt es denn noch andere befehle die den bg repeat beeinflussen, vielleicht auch in anderen dokumenten?
hab alle anderen seite nach folgenden begriffen durchsucht:
fixed, background, repeat,
,...aber nichts gefunden was mich weiterbringt...

Marcus[IS]

Hm,

also ich befürchte da müsstest du uns mal den Link zum Blog geben, falls möglich, damit man sich das mal in Aktion anschauen kann.

Das würde sonst jetzt in ein "ich Vermute mal und quäle meine Glaskugel Spiel" ausarten und würde nicht zur gewünschten Lösung führen.;)

kasperhauser

da hast du wohl recht ^^

hier der link zur seite.
bin mit meinem latein am ende :confused:

Tutrix

no-repeat
keine Wiederholung. Das Bild wird einmal dargestellt.
repeat
horizontal und vertikal wiederholen.
repeat-x
nur horizontal wiederholen.
repeat-y
nur vertikal wiederholen.

auf deiner Seite wird das Bild also horizontal und vertikal wiederholt und scrollt mit dem Inhalt mit

was möchtest du den nun anders haben?

kasperhauser

danke das du nachgeschaut hast!
ich will no-repeat, also das hintergrundbild soll nur einmal angezeigt werden (hab ich jetzt eingetragen) + mitscrollen.
das no-repeat macht er, aber der scroll befehl im body der style.css wird ignoriert.
background-attachment:scroll geht auch nicht...

Tutrix

Zitat von kasperhauser

aber der scroll befehl im body der style.css wird ignoriert.

was geht den bei dir nicht?

hab das jetzt mit IE, FF und Opera getestet, überall scrollt der Hintergrund mit

kasperhauser

seltsam, bei mir scrollt nix mit. wenn ich runterscrolle kommt unter dem hintergrundbild schwarzer hintergrund. in mozilla und ie.
erste gedanke browser neuinstallieren. aber das gleiche problem bei beiden browsern?
trotzdem schön zu wissen, dass es eigentlich funktioniert!
werd dann wohl mal browser neuinstallieren.
vielen dank schonmal...

Tutrix

kann es sein das du eigentlich das Gegenteil möchtest?

der Hintergrund fixiert ist, also stehen bleibt und nur der Inhalt darüber scrollt?!

dann einfach statt "scroll"....."fixed" einfügen

kasperhauser

bistn schatz! vor lauter bäumen den wald nicht gesehen :oops:
fixed war "exactly what i want"....danke!!!

Tutrix

wenn du jetzt noch "repeat-y" verwendest, ist der Hintergrund durchgehend
also auch bei großer Auflösung unten nicht schwarz

kasperhauser

juti, hab ich noch dazu gemacht. allerdings hat der befehl nicht mehr in die selbe zeile gepasst. hab das jetzt so gelöst. hoffe das geht auch

PHP

background: #000000 url(images/background2.jpg) top center fixed no-repeat;   
         repeat-y;

Tutrix

nicht dazu fügen, sondern statt das "no-repeat" ;-)

kasperhauser

manometer, echt peinlich. geh jetzt mal lieber feiern. genug für heute :-).....danke für die unterstützung und schönen abend noch!

Marcus[IS]

fixed background?

Hm.. das schoss mir auch erst durch den Kopf, aber na ja.
Das Problem schein ja nu erfolgreich gelöst zu sein. :D

Willkommen! Melden Sie sich an oder registrieren Sie sich.

hintergrund scrollt nicht mit trotz des css befehls scroll

Jetzt mitmachen!

Benutzer online in diesem Thema