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! While you're at it, check out some resources Treehouse students have shared here.

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

Posted by Angelina Bethoney
Angelina Bethoney
117 Points

Bootstrap Background Image Is Different Across Mobile Browsers

Hi,

I'm working on a Bootstrap project using the cover theme. I'm checking this project across all browsers and screen sizes. In some cases, my background photo is great and scrolls as it should. In others, the background photo is just fixed and doesn't scroll. It also crops differently. I'll add some photos to further explain. Does anyone have any suggestions as how to make this truly cross browser friendly and responsive?

Angelina Bethoney
Angelina Bethoney
117 Points

I guess I can't add photos..?

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Upload your images to imgur, then share the links here.

The cross-browser issues might be due to the varying CSS3 support in browsers (or maybe they forgot to include the vendor prefixes?).

9 Answers

ellie adam
ellie adam
26,377 Points
ellie adam
ellie adam
26,377 Points

Then you can put background: 100%;

Angelina Bethoney
Angelina Bethoney
117 Points

First, I really want to thank you for taking the time to help me out. But here's the issue I'm having now - background-size is making everything stretch on mobile:

Here's background-size:100% http://tinypic.com/r/jhvdx1/8

And background-size:cover is just showing the top of the background image.

Here's background-size: cover: http://tinypic.com/r/106kf95/8

I've also tried playing with things like background-size: 100% 90% but it still looks wonky.

I've searched stack overflow, MDN, the forums here, and general google searches and can't find something to fix this issue. Do you have any other suggestions?

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Try adding the background to the body element in the CSS, rather than the html element.

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Is this closer to what you're trying to achieve?

background-size: contain;
Angelina Bethoney
Angelina Bethoney
117 Points
Angelina Bethoney
Angelina Bethoney
117 Points

I've tried that, too : http://tinypic.com/r/mn2dqr/8

The picture itself has already been optimized and saved-for-web in a standard size, so I know it's not because of the image, either. I'm stumped.

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Can you share the entire CSS file?

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

So I think the background-attachment: fixed property should be included with the rest of the background rule proceeding it:

html {
  background: url('../img/mccarran_pool.jpg') center center no-repeat fixed;
  background-size: cover;
}

This article might be useful, if it's what you're trying to achieve (I'm still not exactly sure what you want it to do/look like):

Perfect Full Page Background Image

ellie adam
ellie adam
26,377 Points
ellie adam
ellie adam
26,377 Points

Hi, In media query you need to specify the width according to screen size.

like this 

For 2 col/nth-child(2N)
@media screen and (min-width:31em) {  .... }

3col/nth-child(3N)
@media screen and (min-width:44em) {  .... }

4col/nth-child(4N)
@media screen and (min-width:80em) {  .... }

6 col/nth-child(6N)
@media screenand(min-width:120em) {  .... }

and so on

I hope this helps :)

Angelina Bethoney
Angelina Bethoney
117 Points

I'm only worried about the background size being responsive, everything else is working correctly. if i have this code:

html{
 background: url('../img/mccarran_pool.jpg') center center no-repeat;
  background-attachment: fixed;
  background-size:cover;
}

shouldn't it adjust with the screen size?

Angelina Bethoney
Angelina Bethoney
117 Points
Angelina Bethoney
Angelina Bethoney
117 Points

it still stretches out the picture :( i've been trying to figure this out for a week or so now.

Angelina Bethoney
Angelina Bethoney
117 Points
Angelina Bethoney
Angelina Bethoney
117 Points

index and css files: http://jsfiddle.net/jsp8opcL/

thank you for taking a look!

Angelina Bethoney
Angelina Bethoney
117 Points
Angelina Bethoney
Angelina Bethoney
117 Points

Awesome, thank you. I think the issue is not that the image size is too big, it's just that there's too much going on in the image, so the sides get cropped off when the screen gets smaller (which I tried explaining to my client, but... anyway. :p )