Need help with background image. | Scrimba | Page 1

compact pagoda Nov 10, 2022, 2:56 PM

#

Hello, I am currently unable to get the background image to take up the full container. I have tried several suggestions from SO like: setting height to 100%, setting height to 100vh and increasing paddding-top. Nothing seems to change. I think it has to do with Scrimbas internal browser as I did the project in Scrimba. Attached is an image of the page where I added a red dotted border to show the missing space. An html image and CSS image to show my code and classes respectively.

Screen_Shot_2022-11-10_at_9.52.00_AM.png

Screen_Shot_2022-11-10_at_9.53.18_AM.png

Screen_Shot_2022-11-10_at_9.54.21_AM.png

plucky sonnet Nov 10, 2022, 4:14 PM

#

can you fork your scrimba project, please

#

There seems to be some kind of margin collapse issue.

bronze dust Nov 10, 2022, 5:46 PM

#

Change the height property may it effect or change background-size values in px or %.

compact pagoda Nov 10, 2022, 9:18 PM

#

I am more of a JS person so my CSS code might be a little rough around the edges but here you go @plucky sonnet

#

📎 index.html 📎 package.json 📎 README.md 📎 styles.css 📎 vite.config.js

plucky sonnet Nov 10, 2022, 9:50 PM

#

compact pagoda I am more of a JS person so my CSS code might be a little rough around the edges...

<<!DOCTYPE html> is it in your html too?

#

it adds < to the top of your page and because the body has the color: #fff; you don't see it and it looks like a margin

#Need help with background image.