I'm attempting to adjust the sizing of my background image on the splash page to make it smaller. My goal is for the image to fill the entire section regardless of screen size.
.splash{
background-image: url("../images/lanternboys_medium.jpg");
background-size: cover;
height: 100vh;
width: 100%;
margin: 0;
padding-bottom: 40px;}
When I check this on my iPad, the image appears oversized! I've seen suggestions from others to remove the height and width properties and set the background size to "contain," but that doesn't achieve the desired effect without using "cover."
The current dimensions of the image are 1366x911, but I do have a larger version available at 5184x3456.
Any advice on how to remedy this issue would be greatly welcomed!