Help with an exercise - CSS - Background image not displaying

olicorazon · February 25, 2023, 3:39pm

Hey there, I’m having some issues on displaying a background image for an exercise on my career path.

So, this is my code for the HTML, for the div I want the background image to display. Other styles are working, so there’s no issue on the linking the CSS to the HTML.

        <div class="hero_banner">
            <h1>Dasmoto's Arts & Crafts</h1>
        </div>

.hero_banner {
    text-align: center;
    height: 80px;
    padding: 80px;
    background-image: url('resources/images/pattern.jpg');
    background-position: center;
    background-size: cover;
    margin-bottom: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

I’ve took a close look into code, but I’d winder why the img is not displaying.

Also, another thing, others images are working but they are being brought thru the HTML.

Thanks in advance.

mirja_t · February 25, 2023, 3:46pm

Probably it’s an issue with your file path. I assume you have a folder named css in the resources folder where your css is in. If that’s the case, you need to get out of that first, so the relative path starting with ‘resources’ can be found:
'../resources/images/pattern.jpg'

olicorazon · February 25, 2023, 3:50pm

Awesome!! thanks a lot, this worked perfectly! I appreciate it.

Showing in here, the result