Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Christopher Paccione
Christopher Paccione
14,831 Points
Posted by Christopher Paccione
Christopher Paccione
14,831 Points

Background URL won't load on ipad or iphone

Hello Everyone,

I'm rather new here, and I've been enjoying my time so far, but I'm completely frustrated with a background image problem I'm having.

The image loads on all browsers via desktop or laptop, but it will not show on the ipad or iphone. I've tried many different variations with the media query, but no luck.

My website is chrispaccione.com Let me know if there is anything else I can provide to get a solution. Thank you!

    <div id="heading">
      <div class="container text-center">
        <h1>Chris Paccione</h1>
        <h4>Front-End Web Developer</h4>
      </div>  

</html>

    </div>

  #heading {
  height: 400px;
  padding: 20px 0;
  background: url(../img/banner.png) no-repeat center center fixed; 
  -webkit-background-size: 2000px 1175px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
Ernest Grzybowski
Ernest Grzybowski
Treehouse Project Reviewer

Can you post the link of your website or the full code?

4 Answers

Christopher Warren
Christopher Warren
17,640 Points
Christopher Warren
Christopher Warren
17,640 Points

From what I know, people mostly fix this issue via jquery. However I'm sure there would be a css solution. I would probably go the media query route and simply change the fixed position to something like relative and just make it a normal navigation bar on mobiles. (More space for the content - since we lack space on iphones)

Christopher Warren
Christopher Warren
17,640 Points
Christopher Warren
Christopher Warren
17,640 Points

Ah! Safari on ios doesn't support position: fixed; You will need to change that to something else.

Ernest Grzybowski
Ernest Grzybowski
Treehouse Project Reviewer

I second this!

Christopher Paccione
Christopher Paccione
14,831 Points
Christopher Paccione
Christopher Paccione
14,831 Points

Thanks for the suggestions and help!

This is the current state of my CSS, can I override "center fixed" with a media query?

#heading {
  display: block;
  width: 100%;
  height: 400px;
  padding: 20px 0;
  background: url(../img/banner.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
Ernest Grzybowski
Ernest Grzybowski
Treehouse Project Reviewer

Before we go further, can you let us know if simply including the single quotes around the url worked? What about commenting out the code that I mentioned as well?

Ernest Grzybowski
Ernest Grzybowski
Treehouse Project Reviewer

What about the other suggestion I made?

Ernest Grzybowski
Ernest Grzybowski
Treehouse Project Reviewer
Ernest Grzybowski
Ernest Grzybowski
Treehouse Project Reviewer

Confirmed that this works on my Android device, but not on my iOS device. What happens when you remove this in #heading:

-webkit-background-size: 2000px 1175px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Christopher Paccione
Christopher Paccione
14,831 Points
Christopher Paccione
Christopher Paccione
14,831 Points

Unfortunately that's a negative as well...