Quantcast
Viewing all articles
Browse latest Browse all 22091

gregfielding on "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!

LINK

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('http://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 all articles
Browse latest Browse all 22091

Trending Articles