Showcase img not fully showing in mobile view

1

You can view my personal website here: https://gracious-torvalds-39f1c5.netlify.com

I am using an iphoneX, and as you can see in mobile view it seems to “zoom” in on the image to where it only shows the clouds rather than showing the whole img.

Relevant code:

My HTML

<body>
    <header id="showcase">
            <nav id="myHeader" class="top-left">
                <ul class="navbar">
                    <li>
                        <a href="#top">Home</a>
                    </li>
                    <li>
                        <a href="#about">About</a>
                    </li>
                    <li>
                        <a href="#projects">Projects</a>
                    </li>
                    <li>
                        <a href="#contact">Contact</a>
                    </li>
                </ul>
            </nav>
            <div class="intro-text">
                <h1>Randy Goldsmith</h1>
                <p>Front-End Web Developer</p>
            </div>
    </header>

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Dosis', sans-serif;
}

#showcase {
    background-image: url('../imgs/johannes-ludwig-8dejZGw3Hec-unsplash.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
2

I can’t replicate your issue. Can you post a screenshot?

3

28%20PM
28%20PM346×663 76.8 KB

4

This is what it looks like whenever I view the website on my iphoneX

5

Add width:100% to #showcase

6

I still get the same issue… you can view all of my code here:

7

I have tried to see the img in both safari and chrome with the same result

8

I thought I had come across this before but I forgot the solution. I’ve looked it up again:

It’s because iOS doesn’t allow background-attachment: fixed; This means you’ll have to put the image inline, luckily this is relatively simple with object-fit. You may need a fallback for older browsers though:

9

I did try just adding object-fit: contain in my CSS but nothing changed. So how do I make my image inline? My image is using the showcase id and im not using it as an image, but rather as a value on the background-image property.

10

You’ll have to do something like this:

<div class="absolute">
   <img src="your-image-src">
</div>

Then in your css, you need to make the div with an absolute class the same size as your header. That is where you put object-fit: cover

11

I have found with parallax scrolling that it generally doesn’t work with mobile or tablet devices. So most people usually disable it with a setting of:

#showcase {
    background-attachment: scroll 
}

which disables it. I just set up a media query for screen sizes with a max width of 480px.
To make the parallax scrolling work on mobile/tablet devices I believe they said it would take some more advanced coding which I’d rather spend time building more projects and I will come back to this.