Parallax Effekt funktioniert nicht in Firefox

Also vor allem bin ich kein professioneller Programmierer, aber ich habe einige Erfahrung. Ich versuche eine moderne nette Parallax-Website zu machen. Mein Problem ist also, dass das Bild im Hintergrund nicht in Firefox angezeigt wird, aber in Chrome und ich möchte, dass es in beiden funktioniert. Hier ist mein Code:Parallax Effekt funktioniert nicht in Firefox

//No js yet

#welcome { 
 
    font-family: 'Nunito', sans-serif; 
 
    font-size: 80px; 
 
    margin: 0px; 
 
    color: #000; 
 
    font-family: 'Slabo 27px', serif; 
 
    background-color: #D5D5D5; 
 
    height: 1000px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    line-height: 1000px; 
 
    text-shadow: 0px 0px 10px grey; 
 
    border-top: 1px solid black; 
 
} 
 

 
body { 
 
    background-color: #000; 
 
    font-family: 'Slabo 27px', serif; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 
#parallax { 
 
\t background-image: url("http://wp.widewallpapers.net/4k/cities/new-york/3840x2160/New-York-3840x2160-001.jpg"); 
 

 
    min-height: 100%; 
 
\t margin: 0px; 
 

 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
}

<html> 
 
<head> 
 
    <link rel="stylesheet" href="style.css"/> 
 
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> 
 
    <link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet"> 
 
    <meta content="-1" http-equiv="expires"></meta> 
 
    <meta content="text/html; charset=utf-8" http-equiv="content-type"></meta> 
 
</head> 
 
<body> 
 
<div id="parallax"></div> 
 
<center><p align="center" id="welcome">Welcome To My Website!</p></center> 
 
</body> 
 
</html>

Also, wenn Sie das alles kopieren und versuchen, es in Chrom funktioniert es (für alle, glaube ich), aber es in Firefox funktioniert nicht. HILFE!

Quelle

2017-01-26 JUSTSOMERANDOMGUY

Auf einer seitlichen Anmerkung der ''

Tag veraltet ist (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center). Es gibt viele Dinge, die beim Zentrieren helfen können. Hier ist eine gute Ressource: http://howtocenterincss.com/ – zik

Ich habe diese Frage auch. Es gibt eine parallax-Demo-Site von CSS Only unter https://alligator.io/css/pure-css-parallax/, die mit jedem anderen Browser außer Firefox funktioniert. –

Einfache und einfache Lösung ist die height: 100% die body{}

body { 
    background-color: #000; 
    font-family: 'Slabo 27px', serif; 
    padding: 0px; 
    margin: 0px; 
    height: 100%; 
}

Zusätzliche Optionen hinzuzufügen:

ändern min-height zu height.

#parallax { 
    background-image: url("http://wp.widewallpapers.net/4k/cities/new- york/3840x2160/New-York-3840x2160-001.jpg"); 
    height: 100%; 
    margin: 0px; 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
}

ändern min-height: 100%-min-height: 580px; (oder was auch immer Pixel Sie möchten).

#parallax { 
    background-image: url("http://wp.widewallpapers.net/4k/cities/new- york/3840x2160/New-York-3840x2160-001.jpg"); 
    min-height: 580px; //or whatever pixel you want... 
    margin: 0px; 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
}

Quelle

2017-01-26 16:19:23

Parallax Effekt funktioniert nicht in Firefox

Antwort

Verwandte Themen