Dominique Charlebois Dominique Charlebois - 6 months ago 25
HTML Question

Parallax feature - Html/Css

I'm working on my personal website.

I can't figure out why the images for the parallax feature aren't appearing on anything except chrome browser.

For example, on my phone it doesn't work and on safari browser it doesn't work.

Everything is labeled correctly.

I have added bootstrap to the file.

Problem: This is the problem....
Expected result: What I want (What appears on my chrome browser)

This solution fixed the problem for Safari, but not mobile.

Html:

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





Old 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
/* 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-size: cover;

Fix the problem. The problem was the image was not being sized appropriately at all screen sizes.