Background image will not display and header does not adjust for reduced screen-CodePudding

Using a header tag with an h1, the h1 is showing with all the font modifications. The background image will not show. I have verified the image location is valid by using the same code for an img tag. The header will also not push down the lower elements when the screen reduced. Below is the html and css:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dasmoto's Arts & Crafts</title>
    <link rel="stylesheet" href="./resources/css/index.css">
</head>
<body>
    <header>
        <h1>Dasmoto's Arts & Crafts</h1>
    </header>
    <section id="brushes">
        <h2>Brushes</h2>
        <img src="./resources/images/hacksaw.webp" alt="">
        <h3>Hacksaw Brushes</h3>
        <p>Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in large amounts.  Available in different sizes.</p>
        <p >Starting at $3.00 / brush.</p>
    </section>
    <section id="frames">
        <h2>Frames</h2>
        <img src="./resources/images/frames.webp" alt="">
        <h3>Art Frames (assorted)</h3>
        <p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs.</p>
        <span >Starting at $2.00 / frame.</span>
    </section>
    <section id="paint">
        <h2>Paint</h2>
        <img src="./resources/images/finnish.jpeg" alt="">
        <h3>Clean Finnish Paint</h3>
        <p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork.</p>
        <span >Starting at $5.00 / tube.</span>
    </section>
</body>
</html>

header {
    position: relative;
    width: 100%;
    height: 130px;
    background-image: url('./resources/images/pattern.jpeg');
    background-size: cover;
    background-position: center;
}

header h1 {
    position: absolute;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
    
}

h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px;
    font-weight: bold;
    color: white;
}

section img {
    display: block;
    height: 150px;
    width: 150px;
}

section p {
    display: inline;
    font-family: Arial, Helvetica, sans-serif;
}

#brushes h2 {
    background-color: mediumspringgreen;
}

#frames h2 {
    background-color: lightcoral;
}

#paint h2 {
    background-color: skyblue;
}

.links {
    display: inline;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: blue;
}

CodePudding user response：

Missing Background Image

The problem here is the relative path ./resources/images/pattern.jpeg, relative means, relative to the file where you call it. In your case, the css is in your CSS file, so the relative path to your image will end up like ./resources/css/resources/images/pattern.jpeg The dot slash ./ means "Look for the file in current directory" where your current directory for the css file is the css folder.

So either use the correct relative path like ../images/pattern.jpeg or an absolute path like https://www.your-domain.com/resources/images/pattern.png

Header not pushing down content

Two problems here First, you set a fixed height for the header element Second, your h1 has position: absolute and therefore doesn't give and "height" on it's own to the header element.

Removing both should give the expected result.

See below example, also note that I've change the background pattern so you see it's working just fine when setting a correct file path.

header {
    position: relative;
    width: 100%;
    background-image: url('https://img.freepik.com/vektoren-kostenlos/zufaelliges-quadratisches-halbtonmuster_1409-1062.jpg?w=2000');
    background-size: cover;
    background-position: center;
}

header h1 {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
    
}

h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px;
    font-weight: bold;
    color: white;
}

section img {
    display: block;
    height: 150px;
    width: 150px;
}

section p {
    display: inline;
    font-family: Arial, Helvetica, sans-serif;
}

#brushes h2 {
    background-color: mediumspringgreen;
}

#frames h2 {
    background-color: lightcoral;
}

#paint h2 {
    background-color: skyblue;
}

.links {
    display: inline;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: blue;
}

    <header>
        <h1>Dasmoto's Arts & Crafts</h1>
    </header>
    <section id="brushes">
        <h2>Brushes</h2>
        <img src="./resources/images/hacksaw.webp" alt="">
        <h3>Hacksaw Brushes</h3>
        <p>Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in large amounts.  Available in different sizes.</p>
        <p >Starting at $3.00 / brush.</p>
    </section>
    <section id="frames">
        <h2>Frames</h2>
        <img src="./resources/images/frames.webp" alt="">
        <h3>Art Frames (assorted)</h3>
        <p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs.</p>
        <span >Starting at $2.00 / frame.</span>
    </section>
    <section id="paint">
        <h2>Paint</h2>
        <img src="./resources/images/finnish.jpeg" alt="">
        <h3>Clean Finnish Paint</h3>
        <p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork.</p>
        <span >Starting at $5.00 / tube.</span>
    </section>

CodePudding user response：

Your index.html is probably in the root of your project, whereas your CSS stylesheet is in /resources/css/index.css.

You are using relative paths to include the images.

A relative file path points to a file relative to the current page.

Because your index.html and index.css are not in the same directory, they have different relative paths. That's why the image can be loaded from your HTML file, but not from your stylesheet. You can now rather use everywhere the same absolute path, or you adjust the relative path in your CSS stylesheet.

This should be the correct relative path from your CSS file to your pattern.jpeg. background-image: url('../images/pattern.jpeg');