Don’t see any change to the background image when I add background-size: cover


#1

Just wondering what I’m missing here. I don’t see any change to the background image when I add
background-size: cover. Changing the window size and selecting/deselecting cover for the element in Firefox’s developer tools has no impact


FAQ: Sizing Elements - Scaling Background Images
#2

Can you please post the URL of the lesson page?


#3

Sure;

https://www.codecademy.com/paths/web-development/tracks/getting-more-advanced-with-design/modules/learn-responsive-design/lessons/sizing-elements/exercises/scaling-background-img


#4

We’ll need to see your CSS to find the problem.


#5

Sure;

style.css.txt (1.5 KB)


#6

Compare your CSS to the original in the first lesson. There are some differences.


#7

OK. I’ve gone back to the drawing board and tried to make sure I’ve not introduced other problems through prior exercises by clicking the “Reset Exercise” icon beside the “Run” button first.

I’ve attached the post-reset css. I then followed the instructions to add “background-size: cover;” in the #banner section. The css with added background-size: cover is also attached.

Comparing the two gives the following;

diff style-post-reset-exercise.css.txt style-added-background-size-cover.css.txt
32c32
<
---
>   background-size: cover;

In Firefox developer tools, I’ve found the element and tried checking and unchecking the added line as per the last two attached files. I couldn’t see any change to the background.

style-post-reset-exercise.css.txt (1.5 KB)

style-added-background-size-cover.css.txt (1.6 KB)


#8

Not sure there is really an issue here. Perhaps to see it play out in real world situ, copy the code to your own machine and run it from there. Be sure you have the MDN and W3C spec pages on hand for quick review. At some point you will determine whether there is actually a problem here, or not.


#9

You are quite right.

I tried your suggestion of moving the code out of Codecademy, and with the Firefox window maximised, I am able to see that “background-size: cover;” does have an effect. Also, working within Codecademy, and zooming out enough (with the text microscopic), I am able see it’s effect.

I’m a bit critical that the exercise appears not to achieve anything, but it may be a result of using a large 4K monitor, which the Codecademy folks may not be testing their exercises on.

With your help, I’ve learned that seeing sites outside of Codecadmey can be helpful, and that zooming way out can also be useful when testing responsive designs.

Many thanks for you help!


#10

And remember, zooming in for small devices. It’s all a battle of fitting the view-port with meaningful, legible, intuitive content and interface.

In the learning process I find it very useful to isolate a problem or a plan down to a single objective. Then shrink and stretch and bang the living daylights out of the conceptual view. Your machine is that environment. The padded room, so to speak.

When in doubt, go back to the default style sheet and express the HTML elements using only that. Graduate views when experimenting. Don’t aim for perfection, but effect. If you don’t see it, then it must not be in the declarations.