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;
}

asored

14.05.2020, 23:12

Könntest du ein Beispiel auf https://jsfiddle.net/ erstellen? Das wird helfen, die Problematik genauer zu verstehen 😊

pst0042

Fragesteller

30.05.2020, 12:47

Sorry für die späte Rückmeldung. Habe Deinen Kommentar irgendwie übersehen...

Falls das hilft, habe ich hier auf die Schnelle ein Beispiel https://jsfiddle.net/pst00042/d2xrhcqj/1/#

2 Antworten

seepferdchen236

15.04.2021, 11:01

Hallo,

falls du immer noch nach einer Lösung suchst oder das jemand liest, der das gleiche Problem hat:

Ich bin Webdesignerin und habe vor einiger Zeit auch nach einem Workaround gesucht, wie ich das Problem mit dem fixed Background auf iOS lösen kann. Es gibt einen CSS Hack, damit es mit dem fixed Background auch auf Mobilgeräten funktioniert:

Du brauchst ein Element im Hintergrund (z-index:-10), dass du mit position: fixed über das ganze Fenster aufspannst. Dieses Element enthält dann das Hintergrundbild.

Ich habe es in einem Blogpost aufgeschrieben, weil mich öfter Kollegen danach fragen. Dort findest du auch den genauen CSS Code.

https://julia-vicentini.de/blog/hintergrundbilder-auf-iphone-und-ipad-zerschossen/

Ich hoffe es hilft.

Viele Grüße
Julia

threadi

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Webseite

30.05.2020, 12:24

Leider hast Du nicht geschrieben um welche Mobilgeräte es geht. Bekannt ist ein Problem von background-attachment: fixed zusammen mit background-size: cover auf iOS-Geräten. Siehe:
https://stackoverflow.com/questions/20443574/fixed-background-image-with-ios7

Woher ich das weiß:Recherche

pst0042

Fragesteller

30.05.2020, 12:40

Zunächst danke für Deine Antwort! Das Problem meine ich und habe das bei Stackoverflow und anderen Foren auch gesehen. Bei mir trat der Fehler allerdings auch bei manchen Browsern unter Anrdoid auf (da kann ich leider nicht mehr sagen, weil ich das nicht mehr genau weiß. Könnte ich aber nochmal schauen). Daher habe ich mich etwas allgemeiner gefasst. Ich habe im Internet bisher keine / keine gute Lösungsmöglichkeit gefunden, um das Problem zu umgehen. Einzig das Bild in einem div über der gesamten Seite, das finde ich aber keine so schöne Lösung. Deshalb wollte ich wissen, ob hier jemand eine gute Lösung kennt.

threadi

30.05.2020, 12:41

@pst0042

Ohne genau zu wissen auf welchen Geräten es NICHT geht, kann man das kaum beantworten.

pst0042

Fragesteller

30.05.2020, 12:42

@threadi

Ok. Dann schaue ich nochmals bei den Android-Geräten nach. Bei den iOS-Geräten kann ich sicher sagen, dass es nicht geht.

Ähnliche Fragen

Wechselndes Hintergrundbild in HTML?

Hallo, wie kann ich einen script in Html erstellen, sodass sich das Hintergrundbild ca alle 10 sekunden verändert. Ich habe das Hintergrundbild bisher im CSS definiert:

html{background: url(images/DSC_0601-01.JPG) no-repeat center center fixed;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

Wäre nett wenn mir da jemand helfen könnte :)

...zur Frage

Wieso ist das Hintergrundbild nicht fixiert?

Hi Zusammen

In meinem Shop wollte ich ein Hintergrundbild einbauen, auf Desktop funktioniert es super aber auf Mobile überhaupt nicht. Ich habe background-attachment auf fixed gestellt, aber trotzdem zieht sich das bild über die ganze länge der Website und es ist nicht so wie auf Desktop.

Website: www.hyghassociation.org

Hier der Code:

body,

html {

background: url({{ 'background.jpg' | asset_url }});

background-color: #000;

-webkit-background-size: contain;

-moz-background-size: contain;

-o-background-size: contain;

background-size: contain;

background-position: center;

background-attachment: fixed;

}

@media only screen and (max-width: 749px) {

body {

background: url({{ 'mobile_background.png' | asset_url }});

-webkit-background-size: contain;

-moz-background-size: contain;

-o-background-size: contain;

background-size: 100% 100%;

background-position: center;

background-attachment: fixed;

Würde mich über Hilfe freuen :=)

...zur Frage

CSS Scroll-Parallax mit background-position?

Ich habe ein reiner Parallax-Effekt mittels CSS der auch genauso funktioniert wie er soll. Hierbei handelt es sich um ein einziges DIV mit Hintergrundbild:

<div id="h123_3" class="container-fluid parallax" style="height: 40vh; background-image: url(/bilder/bild1.jpg);"><a href="#h123_3" class="imageOpener btn btn-light btn-sm">Vergrößern</a></div>

Das CSS:

.parallax {
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0px 0px 30px #444;
  position: relative;
  transition: all 0.5s ease;
}

Einzigstes Problem: Durch background attachment: fixed wird das Bild ja relativ zum Viewport, also an der oberste Bildkante, fixiert. Gibt es ein Trick/Workaround in dem ich es schaffe, dass background-position: bottom trotzdem funktioniert ohne den Parallax-Effekt (durch fixed) zu verlieren? Auch JS würde ich gerne weitgehenst verzichten.

Edit: Hab mich etwas falsch ausgedrückt. Ja background-position funktioniert. Nur das Parallax-DIV sitzt beim Laden der Seite am oberen Bildschirmrand. Dadurch wird trotzdem nur der größteil obere Bildausschnitt angezeigt.

...zur Frage

Wie kann man den Dark-Mode Seitenübergreifend machen?

Liebe GuteFrage.net Community,

Wie kann ich dafür sorgen, dass der Dark-Mode aktiviert bleibt, wenn man auf eine Unterseite geht von der Seite? Habe ein wenig JavaScript genutzt, doch ich kenne mich noch nicht so wirklich aus in dem Bereich. Ich hoffe, Ihr könnt es mir erklären. :) Dies ist mein Code:

HTML /Javascript:

<button onclick="myFunction()">Toggle dark mode</button>
            <script>
              function myFunction() {
              var element = document.body;
              element.classList.toggle("dark-mode");
           }
            </script>

Css:

.dark-mode {
  background-image: radial-gradient(#5c5252 2%, transparent 7%),
    radial-gradient(#928f8f 2%, transparent 7%);
  background-color: #16140f;
  background-position: 25px 35px, 50px 50px;
  background-size: 20px 20px; 
}

Eine weitere Frage wäre da noch... Und zwar wie bekomme ich es hin in Boxen die Farbe zu verändern? Bisher verändert sich nur der Hintergrund...

...zur Frage

Bild im footer?

Guten Tag

Ich habe ein Problem mit einem Bild im footer (statt wie beim letzten Mal in der Navbar).

Mein HTML Footer:

<h3>Matthias<span>Heiniger</span></h3>

<a href="#">Bewerbung</a>

<a href="#">Projekte</a>

<a href="#">Workbooks</a>

<a href="#">Kontakt</a>

</p>

</div>

</footer>

Mein CSS Code für das Bild zum einfügen:

footer {

background-image: url(/03_HTMLCSS/01_Website/Bilder/VektorDesignElemente/png/UntenLnks2_1.png);

background-repeat: no-repeat;

background-size: 19%;

position: relative;

z-index: 1;

font-size: 25px;

padding: 0;

}

Momentan wird das Bild so angezeigt:

Mein Problem: Das Bild (Das Blaue Bild) möchte ich unten Links platzieren aber es geht nicht bis an den "Boden"

Vielen Dank für die Antworten

Freundliche Grüsse

...zur Frage

Bild mit GIF im Hintergrund?

Hallo,

ich bekomme es hin, eine einfache Schrift, mit einem GIF zu hinterlegen.

HTML:

<a href="Startseite.html">
  <h1 class="Blackseries">Blackseries</h1>
</a>

CSS:

.Blackseries {
  color: transparent;
  background-image: urlhttps://media.giphy.com/media/cM2jGL4t1azcHV83Ba/giphy.gif);
  background-position: center;
  -webkit-background-clip: text;
  font-size: 50px;
  font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
}

Allerdings würde ich jetzt gerne ein Bild benutzen, welches transparente Stellen hat. Diese transparenten Stellen sollen dann durch das GIF ausgefüllt werden.

Ich habe auch schon im WWW geschaut, trotzdem habe ich bisher noch nichts gefunden. Vielleicht habe ich auch falsch gesucht?

Hat jemand einen Code bzw. eine Seite, wo beschrieben wird, wie man so etwas machen könnte?

LG UpdateD

...zur Frage

HTML / CSS: Wie kann ich einen Text horizontal zentrieren?

Wie kann ich einen Text in die Mitte bringen?

So wie ich es versucht habe, funktioniert es ab einer bestimmten Größe nicht mehr! Und gibt es eine Möglichkeit sicherzustellen, dass das Bild zuvor geladen hat?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
    <style>
      body {
        background-image: url("bild.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
        overflow: hidden;
      }

      h1 {
        color: white;
        font-family: Geneva, Verdana, sans-serif;
        font-size: 200px;
        text-align: center;
        /*transition: padding-top 1s,padding-bottom 1s,font-size 1s;*/
        padding-top: 38vh;       
        padding-bottom: 70vh;
      }

      h1 {
        /*animation-name: titel;
        animation-duration: 6s;
        animation-delay: 6s;
        animation-fill-mode: forwards;*/
        animation: titel 6s 6s forwards
      }

      @keyframes titel {
        from {padding-top: 38vh; padding-bottom: 70vh;font-size: 200px;}
        to {padding-top: 0px; padding-bottom: 0px;font-size: 80px;}
      }

      p {
        color: aliceblue
      }
    </style>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>TITEL</h1>
    <p>Test-Text</p>
  </body>
</html>

...zur Frage

Hintergrund bild im header wird nicht angezeigt?

Hallo, ich will in meine Html Website ein Bild als Hintergrund im Header haben, dies geht nicht, ich habe schon mehrmals gegoogelt und verschiedene Codes probiert, aber wenn ich die Seite aktualisiere bleibt sie weiß, und sagt, dass das Bild nicht gefunden werden konnte, obwohl ich es im gleichen Ordner habe wie meine Index und CSS Datei. Wisst ihr einen Rat? Danke im Voraus.

hier der Css Code:

.header{

min-height: 100vh;

width: 100%;

background-image: /*linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),*/ url(Website4/Dateien/Bilder/12.png);

background-position: center;

background-size: cover;

position: relative;

overflow: hidden;

}

...zur Frage

CSS background gif UND background color?

Halloo, Eine Frage zu CSS, wie man im Titel schon erkennen kann :)

Undzwar habe ich folgendes Programm geschrieben:

html, body {
 margin: 0;
 padding: 0;
}

.hintergrund {
 background: url(bla.gif) no-repeat center center;
 background-size: cover;
 height: 350px;
 text-align: center;
}

So, mein Wunsch wäre es unter dem Gif noch die Hintergrundfarbe zu ändern.. Weiß jmd wie das funktioniert?

...zur Frage

Abstand nach oben entfernen <CSS>?

Hallo,

ich möchte den Abstand oben entfernen. Es funktioniert einfach nicht, egal was ich mache.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
    <H1>Willkommen auf meiner Webseite</H1>
</div>
    <script>
        function myFunction() {
           var element = document.body;
           element.classList.toggle("dark-mode");
        }
        </script>
        <button onclick="myFunction()">Toggle dark mode</button>
</body>
</html>

CSS:

body {
  padding: 0%;
  margin: 0%;
  background-color: white;
  color: black;
  font-size: 25px;
  width: 100%;
  height: 100%;
  
}
.dark-mode {
  background-color: black;
  color: white;
}
.box{
  justify-content: center;
  padding: 0%;
  margin: 0%;
  padding-top: 0%;
  margin-top: 0%;
  background-repeat: no-repeat;
  width: 100%;
  height: 6cm;
  background-image: url(img/web-1012467_1920\ \(1\).jpg);
}

Das wäre der Code, ich hoffe irgendwer kann mir helfen.

So sieht es aus:

Danke im voraus.

...zur Frage

Html Scrollen funktioniert nicht?

Ich habe das problem, dass t3 unter die Fusszeile verschwindet. Ich möchte aber das er die Fusszeile nach unten drückt und man scrollen kann.

<!DOCTYPE html>
<html lang="de">
 <head>
  <title>
   Titel
  </title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <style>
   body{
   margin: 0;
   margin-right: 18pt;
   }
   a{
    text-decoration: none;
    color: black;
    font-face: Arial;
   }
   hr{
    background-color: black;
    border-color: black;
    width: 25%;
   }
   .fusszeile{
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: blue;
    height: 3em;
    font-size: 12pt;
    font-face: Arial;
   }
   h1{
    font-size: 30pt;
    font-face: Arial;
    text-align: center;
   }
   t2{
    font-size: 18pt;
    font-face: Arial;
    color: white;
   }
   t3{
    font-size: 18pt;
    font-face: Arial;
    text-align: justify;
    position: fixed;
   }
   .drop {
    background-color: blue;
    color: black;
    padding: 9pt;
    font-size: 18pt;
    border: none;
    cursor: pointer;
    font-face: Arial;
    margin-left: 0;
   }
   .dropdown {
    position: fixed;
    display: inline-block;
   } 
   .dropdown-content {
    display: none;
    position: absolute;
    background-color: blue;
    font-face: Arial;
    font-size: 18pt;
    min-width: 100px;
   }
   .dropdown-content a {
    color: black;
    padding: 9pt 18pt;
    text-decoration: none;
    display: block;
   }
   .dropdown:hover .dropdown-content {
    display: block;
   }
   div#text{
    float: left;
   }
  </style>
 </head>
 <body>
   <h1>
     Titel
   </h1>
   <div class="dropdown">
   <button class="drop">
   <b>
    <a href="#">
     &equiv; Men&uuml
    </a>
   </b>
   </button>
  <div class="dropdown-content">
   <b>
   <a href="#">Text</a>
   </b>
  </div>
 </div>
 <div id="text">
  <t2>
   ----------|....
  <br>
  </t2>
 </div>
 <div id="text" style="margin-left: 18pt;">
  <t3>

k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
3
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
3
  </t3>
 </div>
  <div class="fusszeile">
   <hr noshade>
   <center>
   <a href="#">Text</a>
  </center>
  </div>
 </body>
</html>

...zur Frage

CSS Image wird nicht angezeigt?

CSS:
.top-banner {
  width: 100%;
  height: auto;
  background-size: contain;
  background: url("../img/start.jpg") no-repeat;
}

HTML:
 <div class="top-banner"></div>

Das Bild soll responsive angezeigt werden. Es liegt an dem height: auto;

gebe ich zum Beispiel eine feste height von 400px, wird es wieder angezeigt, ist aber natürlich nicht responsiv.

Gibt es da eine andere Möglichkeit, ein Image anzuzeigen, welches mitskaliert?

...zur Frage

Html / Css Text auf Header bzw. Div-Container Text über Hintergrund?

CSS formatiert die Schrift so, dass immer der ganze Querbalken über dem Hintergrund nicht transparent ist. Wie mache ich das? ** Siehe Grafiken **

h1 { font-family: arial, verdana, helvetica; font-size: 40px; font-weight: 200; }

header { position: relative; height: 200px; display: block; background-color: black;

} nav { width: 500px; height: 200px; background-color: aqua; }

...zur Frage

CSS rollender Ball mit Bild?

Guten Tag,

ich habe in CSS einen rollenden Ball programmiert. Dieser rollt auch ist aber unsichtbar obwohl ich ein background: url gesetzt habe.

.circle {
    display: block;
    width: 100px;
    height: 100px;
    background: url("logo.png");
    border-radius: 50%;
   
    -webkit-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    -moz-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    -ms-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    
    position: absolute;
    left: 0;
  }

Das Bild gibt es und die Rotation auch, ist aber nicht wichtig.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen