CSS Background image doesn't show

yes header .logo a {}

that’s the css, I mean in the html

class=“logo” yes but

That is the point, you don’t have that. As I have said in my previous post, copy that entire line that does have it.

i change what u told me but didnt see show image in web page

post again your last code, both css and html, show us what you changed

html code

<!DOCTYPE html>
<html>

<head>
    <title>My Page!</title>
    <link rel="stylesheet" href="/styles.css">
</head>

<body>
    <header>
        <nav>
            <ul>
                <li><a href="index5.html">Home</a></li>
                <li><a href="Menu.html">Menu</a></li>
                <li class="logo"><a href="index5.html">Artisan Bakery Logo</a></li>
                <li><a href="location.html">Location</a></li>
                <li><a href="contact.html">contact</a></li>
            </ul>
        </nav>
        <h1>Home</h1>
    </header>
    <section class="features">
        <div>a</div>
        <div>b</div>
        <div>c</div>
    </section>
    <section>lower-section</section>
    <footer>footer</footer>

</body>

</html>
css code

body {
    background: rgb(58, 58, 58);
    color: white;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background: black;
    padding: 20px;
    background-color: black;
}

header a {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    margin-top: 40px;
}

header .logo a {
    background-image: url("images/logo.png");
    background-size: 300px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 80px;
    text-indent: -9999999px;
    width: 300px;
}

section {
    background: white;
    color: grey;
    padding: 20px;
    display: flex;
    flex-direction: row;
}

div {
    background:blue;
    margin: auto;
    width: 100px;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

li {
    display: inline-block;
    margin-right: 20px;
}

footer {
    background: black;
    padding: 10px 20px;
}

here is screen shot if web page
image is not show

when i change to Logo i get the bakery name instead of image
thats why i change to logo to get image but i didn’t see any image

Well, I have tested your code through JSFiddle and I have used a random Google image to replace your image (as I am not able to access it). The image does appear as shown below:

This means your code is fine, so I am going to assume that it is the directory path you have set for your image that may not be correct. I am talking about this bit:

background-image: url(“images/logo.png”);

thank you for taking time and done searches

soo how can i add image to background what should i do please tell me

i get solution i try to upload through cloud site its work but i cant get solution to add images from file

Before we go through the next step. I have a quick question, how is the website open for us to see? What I mean is:

  • did you open the ‘index.html’ file through your chosen browser?
  • Or, is this on online web development sites like Codepen?
  • or is your website already uploaded on the server?
1) yes i open ndex.html file from chrome browser
2) no this is no online web development i am using Visual studio code through i use live sever
3) no this is for experiment to learn something new and i'm a student thats why i want to learn new things 

and thats why i need to know i to add image in background from file so i can use in future projects and 

**thanks All of you for your Support **

Thank you for letting me know. I think why it may not be working. :slight_smile:

But, before I can be sure. Could you take a screenshot of your folder where you keep your HTML, CSS, and images files like this:

This is so we can see how your project folder is structured and the connection to linking the image may not be set correct.

yes offcourse

Thank you very much for providing this. This is very helpful because it did not match my theory. So, this is what I have done.

I created an example project folder with two files - index.html and styles.css. In that same folder, create an image folder with an image logo file (it is not the same image as your).

Then, I have copied your latest HTML and CSS code into those two HTML and CSS files.

When I ran the index.html in my browser, it was only showing the HTML markup, meaning there was no CSS styling added.

I have solved this. In your HTML file, your external <link> to the CSS file looks like this:

<link rel="stylesheet" href="/styles.css">

Get rid of that forward-slash sign (/). I am not sure if this will fix your image problem, but when I did it in my code, the CSS styling now shows along with the image in my browser.

Happy New Year to all of You

yes i already done this and thank you for helping everyone

1 Like

And happy new year to you! :slight_smile:

When you have removed the forward slash (/), did it work? Or do you still have the same problem?