Bug ,problem or i'm blind?

HTML-CSS
#1

Hello people, I just started to learn to code html and css and I’m facing an issue while trying to reproduce one thing after one of your tutorials, and the problem is that , i m trying to put an image in header background, but it does not appear in the background, i tried all the solutions i think.

.main-header {
             background-image: url("images/andromeda-galaxy.jpg");
             bacground-size: cover;
}

I even tried with height:50vh; but the same…maybe I do something wrong…but i checked at least 30 times the exact commands that are in the tutorial and still the same, if i put a picture in html like:

<img src="images/andromeda-galaxy.jpg" width="200" height="300" alt="Picture of the Andromeda Galaxy">

with " to both ends, but if i write it il will try to show the picture it’s working, then is working flawless…any idea ?
only the background image problem, btw i use notepad++.

Thank you in advance!

#2

Welcome, there.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Something that comes to mind is: Are you sure the path to the .jpg is correct? That is, if your CSS is in a different location to your HTML, then the relative path will need to be different.

The quickest way to tell would be to open the browser devtools, and look in the console for errors related to the image not being downloaded/found.

Hope this helps

#3

First of all, thank you for explaining me how to use that “preformatted text”.
Well. i think that if i try to upload the picture into the body works, so i would say that the path is right, i have the main folder where is: index.html , sun.html and earth.html, and 2 sub-folders named CSS where the style.css is saved and images where i keep the pictures., i even tried with the picture in the main folder to check if that’s the problem but the same…

below i upload my simple page for test just to check if i did something wrong.

<!DOCTYPE html>

<html>
	
	<head>
		<title>This is a test page!</title>
		<meta name="description" content="This is the description">
		<link rel="stylesheet" href="style.css">		
	</head>
	
	<body>
		<header class="main-header">
			<nav>
				<ul>
					<li><a href="index.html">Home</a></li>
					<li><a href="sun.html">Sun</a></li>
					<li><a href="earth.html">Earth</a></li>		
				</ul>			
			</nav>
			<hr>
			<h1>The Andromeda Galaxy</h1>		
		</header>
	
	
	</body>
	

</html>

Below i will upload the error from DevTools, can someone explain what this error refers to?

error devtools
error devtools1276×1023 84.6 KB

#4

What happens, when you set an image from the internet as the background image? E.g. here you have an url to try:

https://aws1.discourse-cdn.com/freecodecamp/original/3X/2/9/29364b19168bd3d61fadb946e20e6935ecb3ba5d.jpeg

1 Like
#5

Is there any way you can show us your directory structure?

The error appears to say it cannot find this:

<link rel="stylesheet" href="style.css">

Usually, because the reference path is incorrect.

#6

If that’s your folder structure, the correct path to your CSS would be href="css/style.css".
From there, if you want to set a background image in your CSS, the URL would be

.main-header {
  background-image: url("../images/andromeda-galaxy.jpg");
}

(by the way you’ve misspelt “background-size”)

1 Like
#7

Thank you very much!
it’s kinda logic what i forgot…i learned to write that after tutorial and that guy maybe forgot to write css before /style.css , i should have known, rookie mistake.
Thank you all for your answers! btw i just saw that i misspelt that , i wrote it in a hurry for a solution.

what this .. represent there? you corrected my path from css.

I have one question tho’ : should i put all the assets in the main-folder? or in more subfolders?
how it’s easier? I like to keep the code clean and simple so I would like to hear your opinions.

#8

The two dots mean “move up to the parent folder”. You’re defining the background image in style.css within the css folder, so to get from there to the image, you first move to the parent folder, then down into the image folder.

That’s really up to you, but it’s common to have an image folder, a css folder, a src folder for JavaScript files, and maybe a folder pages for subpages. This structure changes a bit when you build pages with frameworks or template engines, but generally it’s a good idea to have separate folders for .html, .css, .js files and images/other media, like sound files.

#9

Thank you for your time!
It seems that i learned something new today.

LE: Still one question, why i did need those 2 .., well i understand , you explained, but i watched again the video on youtube and i do not understand why he didn’t need those??
Please check min 46. + - a few sec

Have a nice day!

#10

Check his folder structure, his .css file is in the same folder like the .html.

So to link the file in the HTML head, his path is href='style.css'

And to set a background-image in the CSS: background-image: url('images/background-image.jpg')
There’s no need to move up one folder, because he’s already in the root folder.

By the way, I don’t want to be too critical of the instructor, but using spaces in filenames is horrible practice, it can really trip you up in certain situations. You can see that in your browser’s address field: a space is not a valid character in a URL, so the browser converts it to %20.
For example, If you’re later using JavaScript to read that address field and evaluate it, to show different content depending on which URL you’re on, you’ll obviously get into trouble. So it’s better to use dashes, underscores or camelCase to distinguish different words in a filename, it’ll just save you any potential headaches.