CSS Wie kann man das Hintergrundbild beim scrollen fixieren?

Wie oben schon steht, würde ich gerne bei meiner Seite den Hintergrund fixieren. Ich habe mich jetzt ein wenig über Hintergrund Fixieren über den CSS schlau gemacht... doch nirgendwo habe ich nur ein Wort verstanden! Ich wusste nicht wie ich den Code kopieren sollte und was ich daran verändern sollte... Kann mir vlt. jemand weiterhelfen und mir es eventuell auch erklären? Lg

3 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

23.09.2016, 19:13

Meinst du das hier evtl. ?

body {
    background-image:url('w3css.gif');
    background-repeat: no-repeat;
    background-attachment:fixed;
}

Quelle: http://www.w3schools.com/cssref/pr_background-attachment.asp

Die CSS Angabe background-attachment: fixed ist hier wichtig. Wenn das nicht angegeben ist, wird 'scroll' als standard verwendet.

LpKim

Fragesteller

23.09.2016, 19:28

Ja, Dankeschön! ^^ Ich war schon echt am verzweifeln. Ich habe das einfach überhaupt nicht verstanden!

0

DerFKKmeister66

08.12.2017, 08:09

Wenn du es immer oben haben willst egal ob sich der Hintergrund bewegt mit css:

z-index:fixed;

23.09.2016, 18:55

Kannst du mal ein Beispiel schicken?

Ähnliche Fragen

Wie kann ich den Hintergrund einer Webseite beim scrollen seitlich bewegen lassen?

Ich bin relativ neu in der Webdesign-Branche und surfte etwas, um mir Inspirationen einzufangen. Bei der Internetseite der Firma Unilever (Unilever.com). blieb ich hängen und fragte mich, wie es wohl funktioniert, dass sich der Hintergrund beim auf und ab scrollen horizontal bewegt. nur mit html und css ist dies nicht möglich, oder? aber wie dann?

Html CSS Schwebender Hintergrund?

Hallo,

ist es Möglich das auf einer Html Seite der Hintergrund nicht fest an der Seite fest angelegt ist sondern das wenn man auf der seite zb. Runterscrollt das das Hintergrundbild nicht mit scrollt sondern das nur der Inhalt der Seite Quasi "geschoben" wird?

Kann nicht Gut erklären lol :d

in Html/Css etwas zeitabhängig darstellen.

Hallo Leute. Ich wollte mal ausprobieren, den Hintergrund einer website Tageszeitabhängig zu verändern. Also wenn Tag ist ist es ein Bild vom Restaurant bei Tag bei Nacht eben eine Nachaufnahme.

Jetzt habe ich ein div, in dem eigentlich der ganze content usw drinnen ist. Dieses div hat als Hintergrundbild eben den background a ( Tag )

allerdings wüsste ich nicht wie ich das hinbekommen sollte, dass es dann automatisch wechselt.

Es wäre echt super wenn da jemand eine Lösung hätte.

Mfg. Justin.

Website (HTML und CSS) Mehrere Bilder beim Scrollen sichtbar machen...

Hallo zusammen,

ich möchte gerne mit HTML und CSS eine Website erstellen. Ich habe auch schon das Grundgerüst. Jetzt möchte ich beim Scrollen Bilder sichtbar werden lassen. Das ist schwer auszudrücken...deswegen hier eine Beispielseite: http://nextcargame.com/

wenn man runterscrollt wird ein Bild sichtbar das scheinbar im Hintergrund ist und wird wieder vom Vordergrund verdeckt. Weiter unten kommt dasselbe mit einem anderen Bild. Weiß jemand zufällig wie man so etwas macht? Vielleicht kann mir ja jemand helfen;)

LG Calamann

Css Navbar design?

Hallo,

Ich habe folgendes problem:

ich bin gerade etwas am herumexperimentieren und möchte gerne bei meiner Website eine Navbar machen welche am anfang mit dem Sector 1 einen Hintergrund haben(durchgehend), wenn ich dann herunterscrolle dann sollte dieses Hintergrundbild nur noch im header sein. Weis jemand zufällig wie man sowas angehen könnte?

Text über Bild anzeigen lassen? Webdesign?

Hallo,

ich würde gerne auf einer Internetseite Text auf einem Hintergrundbild anzeigen lassen.

Das Bild habe ich über CSS mit background-image: url(Bildname); eingefügt. Den Text normal mit HTML. Der Text wird zwar jetzt auch auf dem Bild angezeigt, allerdings mit einem weißen Hintergrund mitten im Bild (siehe Bild). Der Text soll aber natürlich ohne diesen Hintergrund angezeigt werden.

Da ich noch relativer Anfänger bin und nicht weiter weiß, hoffe ich erstmal hier auf Hilfe.

Danke im Vorraus.

LG

HTML/CSS Hintergrund "festhalten"?

Hey,

Ich bin gerade dabei ein Forum zu programmieren, und nehme mir ein Vorbild an http://forum.diesesforum.de/index.php Man muss sich glaube registrieren damit man das gut sehen kann.

Aber ich wollte mal fragen, wie ich es schaffe, das dieser Graue Hintergrund beim Scrollen nicht mitkommt sondern da bleibt, also das der Header und der Boty und Footer sozusagen dadrüber fliegen.

Danke im Vorraus

Kann mir jemand bei HTML/CSs helfen?

Ich hab da eine Frage an die ganzen Webdesign-Profis von euch:

Folgendes:

Auf meinem iPhone 11 Pro habe ich das Problem, dass wenn ich auf der Leistungen-Seite bin, immer ein wenig zu viel rand auf der rechten seite ist, was beim hoch und runter scrollen extrem stört. Für die Produkt-Präsentation nutze ich eingebaute Plugins von Elfsight, welche ich aber durch Custom-Css stylen kann. Wo liegt das problem? warum tritt das bei dieser Seite auf aber sonst nirgendwo? Muss ich etwas an diesen Plugins ändern oder liegt es an etwas anderen?

Hier ein Link: https://online.bss.design/leistungen.html

Achtung: Bei größeren Bildschirmen tritt das Problem nicht auf.

Wie finde ich den Speicherort eines Desktopbildes?

Hallo, ich habe ein altes iBook mit OS X 10.4.11 Ich habe dort ein Hintergrundbild, ein selbstgemachtes, dass ich gerne kopieren möchte, aber ich finde dieses Bild nirgendwo. Ich habe Versucht in der Systemsteuerung herauszufinden, wo das Bild ist, dort wo man das Hintergrundbild einrichtet.

Ich habe auch schon sämtliche Bilder auf der Festplatte durchgesehe, aber dieses Bild bleibt verschwunden.

Nur wenn es als Hintergrundbild vorhanden ist, dann muss es doch auch irgendwo gespeichert sein. Was kann ich noch tun um das zu finden?

Website Hintergrundbild interaktiv gestalten?

Guten Tag,

ich habe mich nun in html und css eingelesen, bin noch relativ neu und habe eine Design Idee.

Ich versuche einen "interaktiven" Hintergrund für eine Website zu entwickeln, ( Zahnräder die verrostet sind )
Wenn man runterscrolled sollen diese Zahnräder von einem Sonnenstrahl angeschienen werden.
- Wenn man nun weiter runterscrolled sollen diese Zahnräder nach dem Sonnenstrahl mit Moos bedeckt sein.

Die Idee war:
3 Bilder erschaffen;
1. Zahnräder mit Moos
2. Zahnräder werden angestrahlt.
3. Zahnräder sind mit Moos bedeckt.

Nun habe ich den ersten Maincontent der einen gewissen Platz auf der Website bedeckt.
Die Leute scrollen weiter runter zu den relevanten Sachen
Durch das scrollen wird das 2. Bild auf einem ganz schmalem Content eingeblendet.(überlagert das fixe Bild 1.)
Danach sieht man Bild 3.
Nun ist das Zahnrad vollständig mit Moos bedeckt.
Und das nur durch die 3 Bilder.

Es hat also den Anschein, dass dieses Hintergrund interaktiv ist.

Ich habs ein wenig kompliziert erklärt und die Beispielbilder mit denen ich das getestet habe sind leider verloren gegangen. Allerdings hat die Veränderung von Bild 1 auf Bild 3 schon sehr gut funktioniert. Bloß der Lichtstrahl erschien mir schwierig, da es eben nur ein weiteres fixes Bild ist und die Aktion der Strahlung dadurch nur sehr schwer umsetzbar schien.

Frage: Gibt es andere Möglichkeiten bzw. Kann das mit irgendwelchen Ideen von euch gut umsetzbar gemacht werden?

Beste Grüße und Danke im vorraus.

HTML-Menüleiste oben fixieren?

Hi, ich möchte eine Webseite erstellen, bei der die Menüleiste oben am Bildschirmrand "kleben" bleibt auch wenn ich runter scrolle. Die eigentliche frage die ich habe ist jedoch, wie das geht, wenn ich noch ein Titelbild mit einbinden möchte, welches in der normalen ansicht, wenn man auf die Seite kommt über der Menüleiste ist.

Ich miene damit, dass das Titelbild mit nach oben scrollen soll, die Menüleiste aber nur bis zum oberen bildschirmrand mit nach oben scrollen soll. Ist sowas mit CSS möglich oder brauche ich dafür Java etc.?

Wäre nett, wenn ihr mir paar seiten vorschlagen könnt oder mir paar stichwörter geben könntet, wonach ich suchen soll :D

LG loubra

Wie bekomme ich bei wordpress den weißen Rand über dem Header weg?

Mal wieder eine Wordpress Frage an der ich nur verzweifle Ich habe eine Wordpress-seite erstellt (twenty eleven Theme) und habe dann das Hintergrundbild geändert, jetzt wo der weiße Hintergrund weg ist wird ein dünner weißer Strich über dem Header Bild Sichtbar. Wie bekomme ich diesen idiotischen Rand, bzw. Strich weg. Wieso ist so ein hässlicher Strich überhaupt im Theme vorgegeben. :D Es ist wirklich dringend und ich bedanke mich für jede Antwort.

Wenn ich was im Stylesheet css ändern muss dann gleich vorweg die Frage dazu:

Wo finde ich bestimmte Stellen im Stylesheet, mit dem Auge suchen geht nicht weil es zu lang ist und cmd F bringt auch nix weil dann nur die stellen gesucht werden die gerade sichtbar sind, aber nicht die stellen für die man runter scrollen muss.

Gruß

CSS-Hintergrund fixed auf Mobilgeräten?

Hallo zusammen,

auf meiner Website habe ich ein Hintergrund eingebunden, welches mit background-attachment:fixed; beim Scrollen fixiert ist. Auf Mobilgeräten wird das aber anscheinend nicht erkannt, sodass das Bild dort verzerrt ist.

Im Internet konnte ich bis jetzt nichts finden, außer, dass es nicht erkannt wird. Einen guten Lösungsvorschlag konnte ich nicht finden. Deshalb hoffe ich, dass ihr mir helfen könnt. Vielen Dank schonmal für alle Antworten!

Hier noch ein Ausschnitt aus meinem Code:

body {
  background-image: url("../../img/Tardan99x.jpg");
  background-attachment:fixed;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

Scroll Schnelligkeit einzelner Elemente verändern (Website)?

Ich habe ein ELement (zB ein Div) und möchte dass dieses div langsamer nach oben scrollt als andere Elemente auf der Seite - Wir nehmen zB an ich habe 4 divs: Jedes Div soll in einer anderen Geschwindigkeit nach oben scrollen.... Wie könnte man das mit JS/CSS umsetzen? Am besten mit Erklärung - im Internet finde ich leider nur fertigen Code den ich nicht einfach so einsetzen will ohne ihn zu verstehen :)

Was möchtest Du wissen?

Deine Frage stellen

gf-shortened-block.is-short { max-height: none !important; } gf-shortened-block.is-short::after { display: none !important; } body { font-family: 'Roboto',sans-serif !important; } h1,h2,h3,h4,h5,h6 { font-family: 'Roboto Slab',serif !important; }