hey guys
i need help the image in css does not appear in background
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;
}
can any body solve this problem i'cant get it please help me
Can you post your HTML as well, please?
<!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>
Okay, let’s go through this in a small step. Your first clue is when you are writing a class or id, it is case sensitive. What I am seeing from your CSS and HTML, you have created a definition in your CSS for a class that doesn’t technically exist in your HTML 
4 Likes
Yup, from what I saw the girl at the bottom was correct. If you define header .logo a, what you are saying is that you want to manipulate the header element in your HTML with the properties between the { } after header .logo a in your css file. There’s nothing wrong with what you defined in your css file from what I can see, the only thing that I see that stands out is that you didn’t add class=“logo” inside the header element tag in your html file at the end :).
1 Like
The HTML certainly helps.
The class name you apply in your HTML file must be exactly the same as that declared in your stylesheet. Thus, <div class="Box"> will not find .box { } in the stylesheet. @Madalena.design has given a good explanation.
It is better to avoid capital letters in any CSS rules and HTML class and ID names to avoid any confusion and mismatch.
can u explain in code like that please help
you need to understand what case sensitive mean:
if you write .logo or .Logo or .LOGO those are three different things
so if in an element you write class="Logo" that will not be changed when in the css you write .logo {}
i didn’t understand bcoz i’m a begineer so can u explain as like in code please help
i didn’t understand bcoz i’m a begineer so can u explain as like in code please help
can u modify my code and tell me the change what u have done
css file
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: -9999999;
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;
}
I could, but what will happen the next time you have the same issue?
A class or id name needs to match exactly a css selector
What do you not understand of this?
Okay, how about this. I will ask you a question and you can explain to me the process of writing your code.
So here is this one:
header .logo a {
background-image:url("images/logo.png");
background-size: 300px;
background-repeat: no-repeat;
display: inline-block;
height: 80px;
text-indent: -9999999;
width: 300px;
}
All the properties and values you have written are fine, so it doesn’t need fixing (at least for now). What I would like to ask is the selector class .logo you have created (in the code above), which element in the HTML file is that supposed to style? What I do know is it is one of the elements that is nested within the <header>, am I right? So it is suppose to style one of these elements shown below:
<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>
2 Likes
i understand and i try all types of solution i can’t get it
do you understand what case sensitivity mean?
We try not to give complete code example solutions, and prefer to guide the coder to the answer. That way, the coder learns the process of troubleshooting.
Your CSS has a declared rule .logo, but in your HTML you have, <li class="Logo">. logo and Logo are not the same, which is why the rule is not working. Change the HTML <li class="Logo"> to be the same name as the CSS rule.
yes command need to be in a 1 type of manner like if you write any code in anywhere if u write the 2-3 line upper case and 1-3 line in lower case it will not respond correctly
<img class="logo" src="images/logo.png">
can i write like these
what have u written is correct i don’t need complete code but i need any hint any kind of example so i learn about this bcoz i m new in these field and i m diploma in computer enginering student in 2nd year i dont have any knowlegde about html and css thats why i m searching to solve this problm of my own but i try many way i didnt get
so, in your css you have a selector for class .logo, do you see this class in your code?