0

I have searched around for a while trying to find a solution that works and have come up empty with everything I have tried. I'm still extremely new to coding and have built a site using bootstrap. No matter what I seem to do the background images don't render correctly on a physical mobile device, they scale perfectly while shrinking the browser on my laptop but not on the iPhone. I have placed my code below, any and all help is greatly appreciated! 

{% block content %}  
<div class="bg">
    <div class="row"> 
        <div class="container-fluid">
            <div class="col-xs-6 col-md-4"></div>
            <div class="col-xs-6 col-md-4"></div>
            <div class="col-xs-6 col-md-4 text-center">
                <div class="copy">
                <div class="box">  
                <h2 class="heading">A Captain For Every Occasion</h2>
                    <p>Our fleet of licensed captains are here to help you every step of the way. From lessons to first time boat owners to a delivery down the coast or the great lakes, we've experienced it all before.  In 2015 our team of captains logged over 10,000 nautical miles spanning from Canada to the Bahamas. </p>
                    <p>Our captains hail from New York, Rhode Island, Maryland, and Florida, covering all the major ports along the east coast.</p>  
                <h3 class="heading text-center">Services Offered</h3>
                    <ul class="text-left">
                        <li><i>New boat deliveries</i>: did you just purchase a brand new or new to you boat and need a hand getting her back to her new home port? Our team will hop on board and make sure your new yacht makes it home safely.</li>
                        <li><i>Lessons</i>: are you entirely new to boating or have you just moved into a larger boat with more systems in it than you're used to? Let us show you the ropes and walk you through the boat, making sure you feel comfortable with her. We can teach you how to anchor, dock, &amp; trim the boat out properly. </li>
                        <li><i>Coastal deliveries</i>: our team is no stranger to the Florida pilgrimage from up north. We know both the ocean way and how to make it down via the ICW if the weather is not cooperating outside. </li>
                        <li><i>Daily trips</i>: do you plan on heading out for the day or an evening of dinner and drinks onboard your boat and want to partake in the party? Let one of our captains hop on board with you, so you can enjoy yourself.</li>
                    </ul>  
                </div>  
               </div>    
            </div>   
      </div>    
    </div> 
</div>
{% endblock %}

My CSS

.bg {
    font-family: "metricweb-light", sans-serif;
    font-size: 16px;
    background: url("../image/captain.jpg") center center no-repeat fixed;
    padding: -15px;
    margin: -15px;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    overflow: hidden;
}
.copy {
    padding-top: 50px;
    padding-bottom: 50px;
}
.box {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .6);
    min-width: 300px;    
}
hungerstar
  • 21,206
  • 6
  • 50
  • 59
finsup21
  • 1
  • As per your question it seems there is some loading issue on the mobile or smaller devices. You can try pre-load background images using simple jQuery http://stackoverflow.com/questions/9379855/preload-background-images-with-jquery – DebRaj Feb 17 '16 at 14:51
  • im gonna try this one just gotta do a little more work with jQuery not 100% confident with it yet. – finsup21 Feb 18 '16 at 15:25
  • Here is a better solution http://stackoverflow.com/questions/1373142/preloading-css-images Try use the selected answer. – DebRaj Feb 18 '16 at 17:11

1 Answers1

0

How about trying to add a height on the .bg like 300px then add background-position: 50% 50%;

jsg
  • 1,224
  • 7
  • 22
  • 44