FAQ: Learn CSS Selectors Visual Rules - CSS Visual Rules - Background Image

Frequently Asked Questions CSS FAQ
1

Community%20FAQs%20on%20Codecademy%20CSS%20Exercises
Community%20FAQs%20on%20Codecademy%20CSS%20Exercises1000×208 62.1 KB

This community-built FAQ covers the “Background Image” exercise in Codecademy’s lessons on CSS.

FAQs on the CSS exercise Background Image

Join the Discussion. We Want to Hear From You!

Have a new question or can answer someone else’s? Reply (reply) to an existing thread!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources about CSS in general? Go here!

Want to take the conversation in a totally different direction? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account, billing, Pro, or Pro Intensive? Reach out to our support team!

None of the above? Find out where to ask other questions here!

2

Other FAQs

The following are links to additional questions that our community has asked about this exercise:

  • This list will contain other frequently asked questions that aren’t quite as popular as the ones above.
  • Currently there have not been enough questions asked and answered about this exercise to populate this FAQ section.
  • This FAQ is built and maintained by you, the Codecademy community – help yourself and other learners like you by contributing!

Not seeing your question? It may still have been asked before – try searching for it by clicking the spyglass icon (search) in the top-right of this page. Still can’t find it? Ask it below by hitting the reply button below this post (reply).

3

Regarding the background-image selector, does it take precedence over the img tag in html?
Because, when we change the background-image in the css file, it overlay the image from the img in html file.
Please clarify.
Thank you.

4

The <img> in the HTML file is a completely separate thing to the Background Image which we are replacing in this exercise so, as far as I can see, there are no “precedence issues” or interaction between the two. The <img> in the HTML file is the writer’s avatar, and it remains unaltered at the top of the page with her name.

I’m a beginner too, but I imagine that the <img> is an HTML element because it is not a Background Image, and not in itself part of a CSS styling rule like the url("") is.

However, the <img> is itself styled by the CSS rule set with the .writer-img class selector, and the box-shadow, float, and width properties (right at the bottom of style.css).

I hope that helps :smiley: … and doesn’t confuse you even more! :sweat_smile:

1 Like
5

This is not very stable, but it does show how a background-image and an img can share the same space.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IMG versus background-image</title>
<style>
div {
  background-image: url(search_hamburger_in_red_box.png);
  width: 86px;
  height: 56px;
}
img {
  width: 86px;
  height: 56px;
}
img:hover {
  visibility: hidden;
}
</style>
</head>
<body>
  <div>
    <img src="search_hamburger.png">
  </div>
</body>
</html>

search_hamburger
search_hamburger_in_red_box_alpha

When we hover over the image, the foreground is hidden and we see the background image underneath it. I cannot explain the instability (FF) but would suggest this is not a typical approach and obviously should be shyed away from, else solved. A script can likely handle it more stable fashion, though I haven’t tested it that far.

1 Like
7

I think I understand what you’re seeing. I didn’t notice that there’s already a background-image property in the .image selector so I added a new one with the link in the instructions, this replaced the old image in the live preview and still counted the task as complete. But it looks like that first soccer image is the one in the original background-image property, and it’s not coming from the HTML code.

Looks like some other folks answered questions regarding HTML and CSS images potentially conflicting but it does appear that adding a second background-image property replaced the one that was used earlier in the same .image selector.

I guess what the lesson wanted though was for us to just replace the URL. :laughing:

8

background image in css or img in html, wich one should we use?

1 Like
9

If it is window dressing, as in literally a background, then use CSS. Use IMG if it is content pertinent to the page.

IMG elements can get indexed, where backgrounds generally do not, especially if they are in the CSS folder.

2 Likes
10

Trying to confirm in my head why you would have images in your CSS rather than in html. Is it because things like background images are best set in CSS rather than HTML? img src tag is so familiar to me now, I’m reluctant to let it go!

11

Images set as background do not take up space in their respective container, and we usually don’t want them indexed, anyway.

1 Like
12

Is it a good practice to use external image links on your website? What if an image gets removed from the server it’s kept on?

13

If you mean images from someone else’s site this is a frowned upon practice called, hotlinking. It is tantamount to content theft unless you have written permission from the site’s owner. Search Engines are aware of this and may discount the rank of your site. When we control the content, we don’t have to worry about it being removed.

Sites that host images such as Content Distribution Networks generally do not remove content arbitrarily unless their is a non-payment issue.

Bottom line, if it is not our own image, it should not be on our site.

1 Like
14

Shouldn’t this image be added as a regular image (<img>) rather than a background image? In other words, when would you use which?

15

Images are content; background images are window dressing. Anything that has a direct bearing on the article (page topic) deserves to be an image with caption and alternate text. If it is just for visual effect in a page design, then it should be a CSS background.

16

Greetings,

I am super new to coding and have been really enjoying Codecademy as a starting point.

So, I attempted to create a background image on a website using Visual Studio Code. I used a jpeg file that is saved on my computer. When I did the following in my index.css:

.image {
background-image: url(’/resources/IMG_7477.jpeg’);
background-size: cover;
background-position: center;
height: 300px;

and the following in my index.html:

The pitch duo at 4 and 7 years of age

The photo does not appear on the webpage. However, a large space is created on the page where the photo should be.

When I use the same /resources/IMG_7477.jpeg file on the index.html in the following way:

And then place the following in to the index.css for the project:

.YMCA {
width: 25em;
}

The photo appears on the webpage, and I can use the css to style it. However, I want to make this photo a background-image so I can place text on top of it. Can anyone tell me what I am doing wrong?

17

Where is your CSS relative to the index.html? Trace the path back from there to the image.

Aside

One should avoid using the root of your C drive for your projects. Use your User account Documents folder. Make your file paths relative to the index.html file,and not,

'/resources/'

That is on the root of the drive. Same as,

'C:\resources\`
18

@mtf Thanks for the feedback. As I am very green when it comes to this stuff, I don’t think I fully understand all of your suggestions.

Not sure where my CSS is relative to the index.html. I don’t really understand that question. However, I thought I linked the index.html and index.css together when I did the following in Visual Studio Code:

The index.html and the index.css are both in the main folder “Projects” but each are in different areas of the folder as their are in sub folders:

  • index.html is in the Projects folder > DevProject folder
  • index.css is in the Projects folder > DevProject folder > Resources folder > CSS folder

My coding projects are housed in a folder named “Projects” inside of the “Users” folder on my Mac. I found the “Users” folder using the “Finder” on my Mac. Not sure if that means my Projects folder is on the C drive or not.

I am not sure what to do next. But thanks for the help and trying to support newbies like me.

19

If the css is in a folder inside the resources folder (not how I would do it) then it is two levels down from the index.html, and one level down from the images.

'../resources/image.jpg'

is the relative path.

20

@mtf That worked!!! Thanks,

1 Like
21

ok, so I followed the directions in the exercise and checked all of my symbols/tags, etc. and it is still telling me I am wrong. I am honestly stumped, and would like another set of eyes to see if I missed something.

2022-01-01
2022-01-011920×1080 485 KB

Thank you for any assistance.

  • Amie