Background Image Doesn't Scale On Mobile Devices
-
I really like the way this site looks on the computer, but the background image (the blue one) scales really poorly on a mobile device. It’s very zoomed-in and blurry. Any ideas how to get it to display properly?
I’m using background-size:cover for the image.
Thank you!
Code:
<div class="home-bottom"> <a name="events"></a> <div class="row"> <div class="col-md-12" style="padding-top:60px; padding-bottom:20px; color:#fff;"> <div style="text-align:center; padding:0% 25%;"> <p><i class="fa fa-heart fa-5x"></i></p> <h2 style="font-family:open sans; font-size:21px;">Our volunteers work some of the biggest events in the United States</h2> </div> </div> </div> <div class="row" style="padding-bottom:60px"> <div class="col-md-12" style="background:transparent; text-align:center; text-transform:uppercase; color:#fff; padding:0% 25%;"> <h1 style="font-family:'Megrim', cursive; font-size: 2em;">Coachella</h1> <h1 style="font-family:'Megrim', cursive; font-size: 2em;">Stagecoach</h1> <h1 style="font-family:'Megrim', cursive; font-size: 2em;">Outside Lands</h1> <h1 style="font-family:'Megrim', cursive; font-size: 2em;">Electric Daisy Carnival</h1> <h1 style="font-family:'Megrim', cursive; font-size: 2em;">US National Team Soccer Games</h1> <h1 style="font-family:'Megrim', cursive; font-size: 2em;">Electric Forest</h1> <h1 style="font-family:'Megrim', cursive; font-size: 2em;">Hard Fest</h1> <h1 style="font-family:'Megrim', cursive; font-size: 2em;">First City Festival</h1> <h1 style="font-family:'Megrim', cursive; font-size: 2em;">Life Is Beautiful</h1> <h1 style="font-family:'Megrim', cursive; font-size: 2em;">Electric Zoo</h1> <h1 style="font-family:'Megrim', cursive; font-size: 2em;">Tomorrowland</h1> <h1 style="font-family:'Megrim', cursive; font-size: 2em;">Made In America</h1> <h1 style="font-family:'Megrim', cursive; font-size: 2em;">Day Of The Dead</h1> </div> </div> </div>
CSS:
.home-bottom { background: url('https://www.agentrecommend.com/wp-content/uploads/2014/04/outsidelands.png') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
- The topic ‘Background Image Doesn't Scale On Mobile Devices’ is closed to new replies.