[HTML/CSS]Mitskalierende Hintergrundgrafik fehlerhaft

SunRiZez · 5. Mai 2015

Hallo, nach meinem Post (Post) bezüglich einer mitskalierenden Hintergrundgrafik war ich überzeugt dass jetzt alles funktioniert, jedoch kann ich jetzt nichts scrollbares machen - das heißt, dass ich auch einen 100-Zeilen-langen Inhalt schreiben kann (siehe Quellcode meiner Seite) und trotzdem wird sie nur bis zum Bildschirmrand angezeigt.

IPrototypeI · 5. Mai 2015

So sollte das funktionieren, jedoch musst du bedenken das sich das Bild anpasst und daher nur zu einem kleinen Teil sichtbar ist, daher wäre es eher besser hier ein scroll button einzubinden.
geht via overflow:scroll; und dazu halt noch die maximale höhe festsetzen

Code

html {
	background: url("http://www.misterknister.bplaced.net/bg_img.jpg") no-repeat scroll 0 0 / cover rgba(0, 0, 0, 0);
}

Restlicher CSS Code

Code

body {
    margin: 0 auto;
    width: 500px;
}
.midbody {
    margin: 0 auto;
    width: 500px;
}
a:link {
    color: blue;
}
a:visited {
    color: blue;
}
a:hover {
    color: #999999;
}
a:active {
    color: #ffffff;
}
#yticon {
    position: fixed;
}
#hintergrund {
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 1;
}
#content {
    height: 100%;
    left: 0;
    overflow: auto;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}

Alles anzeigen

SunRiZez · 7. Mai 2015

Vielen Dank IPrototypeI,

Zitat von IPrototypeI

So sollte das funktionieren, jedoch musst du bedenken das sich das Bild anpasst und daher nur zu einem kleinen Teil sichtbar ist, daher wäre es eher besser hier ein scroll button einzubinden.
geht via overflow:scroll; und dazu halt noch die maximale höhe festsetzen

Code

html {
	background: url("http://www.misterknister.bplaced.net/bg_img.jpg") no-repeat scroll 0 0 / cover rgba(0, 0, 0, 0);
}

Restlicher CSS Code

Code

body {
    margin: 0 auto;
    width: 500px;
}
.midbody {
    margin: 0 auto;
    width: 500px;
}
a:link {
    color: blue;
}
a:visited {
    color: blue;
}
a:hover {
    color: #999999;
}
a:active {
    color: #ffffff;
}
#yticon {
    position: fixed;
}
#hintergrund {
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 1;
}
#content {
    height: 100%;
    left: 0;
    overflow: auto;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}

Alles anzeigen

leider funktioniert es aber noch nicht wie ich es mir vorgestellt hatte, da hast du mich wohl falsch verstanden. Ich meinte es so, dass die Hintergrundgrafik immer gleich bleibt also wenn man scrollt soll sie sich mitbewegen und es soll also immer die ganze Grafik sichtbar sein. Hier ein Beispiel: http://forum.redmix-roleplay.de/index.php?page=Index

Caglar · 7. Mai 2015

Die Hintergrundgrafik auf der Seite bewegt sich aber nicht mit?
Meinst du das vielleicht so

CSS

body {
	background-image: url(...);
	background-size: 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;  
}

SunRiZez · 7. Mai 2015

jetzt geht gar nix mehr

jdm_driven · 7. Mai 2015

ich war mal eben auf deiner Seite und hab mir dein Code angeschaut.

Ist logisch dass es nicht funktioniert wenn du im css tag vom Body den Link zum bild nicht angiebst "background-image: url(HIERDENLINKZUMBILD);"

und ich nehme an den html musst du wieder rausnehmen.

IPrototypeI · 8. Mai 2015

Zitat von SunRiZez

Vielen Dank IPrototypeI,

leider funktioniert es aber noch nicht wie ich es mir vorgestellt hatte, da hast du mich wohl falsch verstanden. Ich meinte es so, dass die Hintergrundgrafik immer gleich bleibt also wenn man scrollt soll sie sich mitbewegen und es soll also immer die ganze Grafik sichtbar sein. Hier ein Beispiel: http://forum.redmix-roleplay.de/index.php?page=Index

Ich verstehe deine Frage schon, daher hab ich dir auch den Text geschrieben, welchen du mal durchlesen solltest.

den Hintergrund zu fixieren ist zwar auch eine Möglichkeit , jedoch skaliert sich das Bild nicht und sobald du das ganze weiter auszoomst als das Bild groß ist so siehst du halt.den weißen background.

SunRiZez · 8. Mai 2015

Zitat von IPrototypeI

Ich verstehe deine Frage schon, daher hab ich dir auch den Text geschrieben, welchen du mal durchlesen solltest.

den Hintergrund zu fixieren ist zwar auch eine Möglichkeit , jedoch skaliert sich das Bild nicht und sobald du das ganze weiter auszoomst als das Bild groß ist so siehst du halt.den weißen background.

http://forum.redmix-roleplay.de/index.php?page=Index könnten wir das so hinbekommen?

IPrototypeI · 9. Mai 2015

Bei diesem Forum ist die Hintergrundgrafik fixiert , siehe Code von Caglar , zu dem wurde eine Hintergrundfarbe via CSS hinzugefügt.
Mit deinem Background funktioniert dies so nicht, da dieser nicht in einer Hintergrundfarbe an jeder stelle übergeht.

SunRiZez · 9. Mai 2015

Zitat von IPrototypeI

Bei diesem Forum ist die Hintergrundgrafik fixiert , siehe Code von Caglar , zu dem wurde eine Hintergrundfarbe via CSS hinzugefügt.
Mit deinem Background funktioniert dies so nicht, da dieser nicht in einer Hintergrundfarbe an jeder stelle übergeht.

wie kann ich denn jetzt das scrollen aktivieren

maddin · 9. Mai 2015

CSS

overflow:hidden;

entfernen.

SunRiZez · 9. Mai 2015

alter das lustige ist die anderen meinten alle irgendwas würde immer nicht gehen aber jetzt kann man scrollen und zoomen und es ändert sich nichts danke mann
beste antwort frage beantwortet

breadfish.de 12. März 2022