Tribute Page Question on Background Images


I probably should have made my tribute page more like the example but it was created for an association I will be helping in the future (killing 2 birds with 1 stone so to speak). So here is my codepen:

How do I get the background image to be responsive? When I open the page on my cell phone the picture gets cut off, even though I included “background-size: cover” or “auto”. I tried playing with the height, no repeat, and other CSS but no luck. Then I looked up information on using @media (max-width: 500px) but that didn’t seem to work, but maybe my code is not written correctly? I’m very new to this. So your feedback/help with this or anything else you see that could be improved is much appreciated.

Thank you!

The full image won’t show up on mobile phones because of phone’s aspect ratio. Even if it did, it won’t be what you’d expect. Your only option is to use the CSS background-position property and position the part of the image you would like to bring into the viewport. Check out this link to get a quick intro to the background-position property.

Thank you! Thank you! You are the bomb :slight_smile: I had to change the background size from “cover” to “100%, auto” and then added the background position center and no repeat. Then I played with the media query to get it looking somewhat decent on my phone. So now it looks much better, not perfect but better. It was a good learning experience.

I appreciate your help!

Also, I still haven’t figured out how to get rid of the white space for the smaller screen. I fixed it on my cell phone in portrait view but haven’t been able to get landscape correct. I’'m sure I will have other opportunities to learn about responsive design.

Thanks again!

Always happy to help! :slight_smile: