Background Image Issue on Mobile Devices

Question

I have a website with a Hero section that uses a background image. To optimize the website for mobile devices, I've set a different background image specifically for mobile screens using CSS media queries. When I test the website in Chrome Developer Tools with a mobile view, it looks correct. However, when I view it on a real mobile device, such as an iPhone 14 Pro Max, the background image doesn't display properly.

Here is my HTML and CSS code:

`<section id="hero">
    <div class="container">
        <div class="hero-content">
            <h1 class="main-title ani-fade-up">ADER BOYA</h1>
            <p class="main-slogan ani-delay ani-fade-up">Projelerinizi Gerçekleştirelim Renginizi Keşfedin!</p>
            <div class="arrows ani-delay2 ani-fade-up">
                <a href="#">
                    <span></span>
                    <span></span>
                    <span></span>
                </a>
            </div>
        </div>
    </div>
</section>`

`/* Hero Section */
#hero {
    width: 100%;
    background: linear-gradient(0deg, rgba(0,0,0, 0.2), rgba(0,0,0, 0.2)), url(/img/ader/heroback.jpg);
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

/* Media Queries */
@media only screen and (max-width: 580px) and (min-width: 248px) {
    #hero {
        background: linear-gradient(0deg, rgba(0,0,0, 0.2), rgba(0,0,0, 0.2)), url(/img/ader/mobileback3.jpeg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;
        background-attachment: fixed;
    }
}`

Appearing on my phone: I want it to be Github links: https://github.com/Codekod/aderboya

I've included different background images for mobile devices using media queries, and it looks fine in Chrome DevTools. What could be causing the issue when viewed on real mobile devices like the iPhone 14 Pro Max? Is there something I'm missing in my CSS or HTML?

Answer 1

There is a minor but common error in the code; the file path has been incorrectly specified. You can refer to this tutorial: https://www.youtube.com/watch?v=EJ0xvY5wT5Q&ab_channel=DaniKrossing Despite deploying your project, the incorrect paths are also indicated in the desktop version. These are the correct paths to follow.

#hero {
width: 100%;
background: linear-gradient(0deg, rgba(0,0,0, 0.2), rgba(0,0,0, 0.2)), url(../img/ader/heroback.jpg);
background-size: cover;
background-attachment: fixed;
position: relative;

}

@media only screen and (max-width: 580px) and (min-width: 248px) {
    #hero {
        background: linear-gradient(0deg, rgba(0,0,0, 0.2), rgba(0,0,0, 0.2)), url(../img/ader/mobileback3.jpeg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;
        background-attachment: fixed;
    }
}