I dont wanna give up, help, please!

I’ve been all day trying to figure it out how to display the background image but nothing seems to work . I’ve tried everything but still have same problem the background image doesn’t display.
The index.html is located: C:\Users\Teo\Desktop\CLP\html.index.html
and the car image is located: C:\Users\Teo\Desktop\CLP\html\car.jpg

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test head</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <ul> 
        <li><a href="">CLP</a></li>
        <li><a href="">Access Code</a></li>
        <li><a href="">Film With Us</a></li>
        </ul>
        </div>
    <img src="..\imag\Original.jpg" class="clplogo";>
    <div class="sli">
    </div>
</body>
</html>

CSS

*{
margin: 0;
padding: 0;
}

ul{
    border: solid 3px black;
    border-radius: 20px;
    height: 40px;
}
ul li{
    width: 525px;
    float: left;
    text-align: center;
    list-style: none;
}

ul li a {
    display: block;
    height: 40px;
    color: black;
    text-decoration: none;
    font-size: 20px;
    text-align: center;
}

ul li:hover{
    color:white;
    background-color: red; 
    height: 40px;
    border-radius: 20px;
    transition: background-color 1s;
     }

ul li a:hover{
    color:white;
     }

.clplogo {
    alt:"CLP Main Logo";
    float: left;
    width: 300px;
    margin-left: 200px;
}

.sli {
    background-image: url("/..car.jpg");
    height: 100%;
    }
1 Like

Hi @eberteo , welcome to the forum.

In the screenshot you posted, I can’t find the place where 1.jpg is located, is it possible you’re not linking to the right image in your code?

If you could post the code you’ve written here (you can click the </> button at the top of the text box and paste your code in-between the backticks that appear), it would make it easier to troubleshoot.

Also, if you copy and pasted those locations, it may be that there’s a typo in them. For example, C:\Users\Teo\Desktop\CLP\html.index.html should most likely be C:\Users\Teo\Desktop\CLP\html\index.html.

I meant"car.jpg" not 1.jpg.
I tried to add it with the full location like this:
url("C:\Users\Teo\Desktop\CLP\html\car.jpg ");
but it didnt work either.
I just posted the code, thank you

It looks like you’re trying to add the background image to a <div> tag rather than the <body> tag. The funny thing about CSS is that, as long as nothing is found inside the <div> (for example, <div>Hello there</div>), the background image won’t display.

Try adding some placeholder text inside the div and see if that works; if not, we can continue to troubleshoot from there.

same bro, it shows the text “Hello there” but doesn’t displayed the background image, even though i set it “height”

I tried out your code, and once I included enough text in the div to match the height of the background image, it appeared as expected.

The problem seems to be that as long as the <div> is smaller in size than your background image, the image won’t be displayed. You can probably fix this by editing the height to a defined measurement (px), or making sure that the content inside the div is large enough to match the size of your background image, or more.

Hope this helps!

I changed it to px and write down more lyrics and still the issue, could u write it down, please I’d like to know how u wrote it please, because from my end is still the same. thanks

I copypasted this placeholder text into the div:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet ante libero. Etiam ut nunc id urna vestibulum ultricies. Fusce gravida justo ante, et fermentum urna eleifend quis. Nam vel nibh a nisl consectetur fermentum. Praesent ac euismod arcu. Ut faucibus ligula risus, a maximus magna semper in. Phasellus tincidunt massa sed odio bibendum imperdiet. Quisque vehicula ante ex, nec sollicitudin augue finibus laoreet. Nam sit amet porttitor orci, sit amet semper purus. Suspendisse feugiat nulla quis dignissim ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum eu nunc sit amet ex commodo tempus ac eget dolor. Sed sodales tempor sapien, sed hendrerit mauris feugiat in. Nam vitae fermentum augue, at consequat tortor. Suspendisse quis dui suscipit, bibendum ligula id, convallis lorem. Proin fringilla dolor at interdum vulputate. Integer non justo arcu. Maecenas quis faucibus eros. Nulla cursus blandit felis. Pellentesque libero massa, porta vel consequat ac, vestibulum eu erat. Donec scelerisque, justo a pharetra tincidunt, sem tortor posuere dolor, ac maximus dui arcu quis nisl. In porttitor nibh a feugiat tincidunt. Donec ac convallis enim. Mauris eu sodales magna. Vivamus posuere massa vel magna imperdiet tempor et quis orci. Nullam sit amet laoreet elit. Suspendisse hendrerit velit vel scelerisque lacinia. Morbi malesuada nulla at mauris elementum porttitor non at lectus. Pellentesque cursus tempus iaculis. Integer sit amet sodales nisi. Praesent magna mi, scelerisque ut mi et, efficitur bibendum purus. Suspendisse tempus, justo at convallis laoreet, enim felis fermentum magna, non lacinia massa justo feugiat est. Nam vel blandit lectus. Pellentesque est orci, mattis non purus non, vestibulum ultricies enim. Aliquam ut dignissim lacus, a congue lacus. Morbi leo enim, placerat vitae massa a, volutpat tristique tellus. Sed ac quam id erat porta sollicitudin. Sed ut magna fermentum magna maximus venenatis. Vivamus mollis leo augue, vitae volutpat tellus elementum sed. Phasellus sit amet sollicitudin nulla. Ut ac dolor pellentesque, fringilla sem non, blandit dui. Proin tristique congue urna, sit amet vulputate sapien dignissim eget. Fusce sed orci posuere, dignissim mi eu, ornare turpis. Aliquam rhoncus mollis enim, vel fermentum velit. Integer dolor elit, accumsan in congue non, iaculis et nisl. Donec efficitur lobortis lacus in luctus. Pellentesque justo nulla, porta ac fermentum sed, cursus sit amet ex. Cras vel ultrices nibh.

It’s probably much more than you need, but the goal is to fill up the full height of the background image you’re using.

same bro, how did you say that it worked for you

Hey, bro. Post your Original.jpg and car.jpg on imgur, and we will look at your code together bro.

Use “…/car.jpg” instead, it will show

    <body>
        <ul> 
        <li><a href="">CLP</a></li>
        <li><a href="">Access Code</a></li>
        <li><a href="">Film With Us</a></li>
        </ul>
        **</div>**
    <img src="..\imag\Original.jpg" class="clplogo";>
    <div class="sli">

Why is that closing Div tag there before the image? It isn’t closing anything.