My header background-color not showing up

Get Help CSS
#1

I have the following code and I really dont understand why my background image does not show: this is my html:

<header>
        <img src="/images/img-tea-cozy-logo.jpg" alt="logo">
        <nav>
            <ul class="nav-list">
                <li><a href="#">Mission</a></li>
                <li><a href="#">Featured Tea</a></li>
                <li><a href="#">Locations</a></li>
            </ul>
        </nav>
    </header>

and my css is:

header {
    background-color: #000;
    height: 69px;
    color: seashell;
}

At the moments I have a white screen with 3 bullet poins which are the li tags.

#3

Hi

I have changed my code a little bit, I have replace the header tag with a div tag, but I still can´t see anything:

<body>
    <div #="top-content">
        <img src="/images/img-tea-cozy-logo.jpg" alt="logo">
        <nav>
            <ul class="nav-list">
                <li><a href="#">Mission</a></li>
                <li><a href="#">Featured Tea</a></li>
                <li><a href="#">Locations</a></li>
            </ul>
        </nav>
    </div>
</body>
#4 
<div #="top-content">

Should be

<div id="top-content">
#5

Check the filepath in the src attribute for the image. If you want a relative path then you need to start with a ./ for current directory. Maybe try:

<img src="./images/img-tea-cozy-logo.jpg" alt="logo">
#7

I did try that as well, now I have tried differents things, when I insert an H1 tag just before the logo, I can see the H1 text in the browser, but with no background color…:

<body>
    <div id="top-content">
        
        <img src="../teasite/images/img-tea-cozy-logo.jpg" alt="logo">
        <nav>
            <ul class="nav-list">
                <li><a href="#">Mission</a></li>
                <li><a href="#">Featured Tea</a></li>
                <li><a href="#">Locations</a></li>
            </ul>
        </nav>
    </div>
</body>

#top-content {
    background-color: #000;
    height: 69px;
    color: seashell;
}

screenshoot_teasite
screenshoot_teasite1365×505 37.9 KB

#8

Looking at your src attribute it looks like you are going back one directory and then re-entering the teasite directory. But I can’t see the name of your project directory from the screenshot. Since your index.html looks like it is already in the main project directory it would be better to use a relative path from the main project directory (where the one dot . simply refers to current directory):

 "./images/img-tea-cozy-logo.jpg"

It does not seem necessary to go back a directory in this case with two dots looking at the file-structure. VS Code will also typically start showing available directories and file-names when typing in the src-path so that is a good feature to use to avoid broken links.

#9

Also, I don’t see a link to the css-file in the VS Code screenshot of index.html. Make sure you include a link to the .css file up in the head for the css to work.

1 Like