Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Background image doesn't yield 100% height on mobile

You can visit https://anchor.hecker40.repl.co on mobile to see that part of the background image is white. I’ve been trying everything to make it full height, but it just isn’t working.

@media (max-width: 600px) { section.main { background: url("https://anchor.hecker40.repl.co/bg.jpg"); }

I tried height:100%; and almost every background property and it didn’t work.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

I’m not entirely sure what you’re trying to do here. From what I can tell there is a section in the middle of the page where the background doesn’t cover the whole section.

To fix this, add background-size: cover;. This will center the background in the element and have it scale all the way to both ends (while keeping proportions).

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading