Parallax effct не работает в Firefox

Так что, прежде всего, я не профессиональный кодер, но у меня есть . Я пытаюсь сделать современный красивый сайт параллакса. Поэтому моя проблема заключается в том, что изображение в фоновом режиме не отображается в Firefox, но это происходит в Chrome, и я хочу, чтобы он работал в обоих. Вот мой код:Parallax effct не работает в 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>

Так что, если вы копируете все, что и попробовать его в хроме он работает (для всех я думаю), но это не работает в Firefox. ПОМОГИТЕ!

источник

2017-01-26 JUSTSOMERANDOMGUY

На боковой ноте ''

тег является устаревшим (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center). Есть много вещей, которые помогут в центрировании. Вот хороший ресурс: http://howtocenterincss.com/ – zik

У меня тоже есть этот вопрос. Там есть демонстрационный сайт только для параллакса CSS: https://alligator.io/css/pure-css-parallax/, который отлично работает в любом другом браузере, кроме Firefox. –

Простой и легко исправить, чтобы добавить height: 100% к body{}

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

Дополнительные опции:

Изменение min-height в 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; 
}

Изменение min-height: 100% к min-height: 580px; (или любой пиксель вы хотите).

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

источник

2017-01-26 16:19:23

Parallax effct не работает в Firefox

ответ

Смежные вопросы