• Resolved gregfielding

    (@gregfielding)


    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('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)
  • Try taking out the ‘center center fixed’ part.

    background: url('https://www.agentrecommend.com/wp-content/uploads/2014/04/outsidelands.png') no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    Thread Starter gregfielding

    (@gregfielding)

    That worked thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Background Image Doesn't Scale On Mobile Devices’ is closed to new replies.