視差機能 - Html/CSS

Question

私は自分の個人的なウェブサイトで働いています。

私は、視差機能の画像がクロームブラウザ以外のものに表示されない理由を理解できません。

たとえば、私の電話では動作せず、サファリブラウザでは動作しません。

すべてに正しくラベルが付けられています。

ファイルにブートストラップを追加しました。

問題：This is the problem.... 期待される結果：What I want (What appears on my chrome browser)

このソリューションは、サファリのために問題を修正しましたが、携帯電話ではありません。

HTML：

<div class ="body container"> 
    <!-- Parallax Feature --> 
</div> 
<div class="body container flex flex-horizontal-center flex-direction-col"> 
    <!-- Main Body --> 
</div> 

---

旧HTML：

<!-- Div class for the whole page. --> 
<div class="body flex flex-horizontal-center flex-direction-col container"> 

<!-- Home Page --> 
<!-- Parallax Feature --> 
<section class="parallax"> 
    <div class="parallax-inner"> 
    <h5>Dominique Charlebois</h5> 
    </div> 
</section> 
</div> 

CSS：悲しいことに、私はそれが属しているコメントとしてこれを投稿するにはあまりにも少ないの評判を持っている

/* Css Styling */ 

/* Global */ 
*{ 
    margin: 0; 
    padding: 0; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
/* Body */ 
body{ 
    font-family: 'Roboto', sans-serif; 
    line-height: 1.6; 
    -webkit-box-shadow: inset 0 8px 4px -4px #ddd; 
    -moz-box-shadow: inset 0 8px 4px -4px #ddd; 
    box-shadow: inset 0 8px 4px -4px #ddd; 
} 
.body{ 
    padding-top: 15px; 
} 
/* Start Parallax */ 
/* Index */ 
.parallax{ 
    width: 100%; 
    height: 50%; 
    opacity: 0.8; 
    background: url("../images/IMG_UnicornCoders.jpeg") no-repeat fixed 50%; 
} 
.parallax-inner{ 
    margin-top: 5em; 
    padding-top: 25%; 
    padding-bottom: 25%; 
} 
h5{ 
    margin: auto; 
    text-align: center; 
    font-size: 275%; 
    color: #E5e5e5; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
} 

Answer 1

/* Start Parallax */ 
/* Index */ 
.parallax{ 
    width: 100%; 
    height: 50%; 
    opacity: 0.8; 
    background: url("../images/IMG_UnicornCoders.jpeg") no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
} 

背景サイズ：後

background: url("../images/IMG_UnicornCoders.jpeg") no-repeat fixed 50%; 

カバー。

問題を修正します。問題は、画像がすべての画面サイズで適切にサイズされていないことでした。

Answer 2

、私はちょうど答えとして投稿します。 HTML5サポートテーブルCan i use..をご覧ください。私は、EMを使用しての組み合わせを疑い、だけでなく、あなたの問題の原因と

class="body flex flex-horizontal-center flex-direction-col container" 

の後ろに座っているものは何でもCSS。

Answer 3

携帯電話のSafari &で機能していないと思うのは、背景の省略形を使用しているからです。一部のブラウザは完全にサポートしていません。
プロパティを分割しても機能する場合があります。

枚

background: 50% url("../images/IMG_UnicornCoders.jpeg") no-repeat; 
background-attachment: fixed;