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

M Z
PLUS
M Z
Courses Plus Student 4,784 Points
Posted by M Z
M Z
Courses Plus Student 4,784 Points

background not showing up on ipad or nokia lumia phone but does on iphones and desktops.

The background I have for a websites isn't showing up on an ipad or nokia lumia phone but does on iphones and desktops I've tested it on 2 iphone sizes, a nokia lumia, an ipad and 2 desktop computers. My CSS code is:

body { background-color: white; background: repeating-linear-gradient( to right, #bab8bb , #bab8bb 30px, #9c9b9d 30px, #9c9b9d 60px ); }

please help me, I am very new to this only been learning for a few days) so go easy on me please.

5 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Mehran,

It could be that you don't have the -webkit prefix using the older from syntax.

There's a browser compatibility table here on this mdn page - repeating-linear-gradient

caniuse.com repeating gradients

autoprefixer

autoprefixer can be used to manage these vendor prefixes for you. You can see the "Usage" section for all the different ways you can use it.

I found this fiddle which uses the javascript version of autoprefixer. http://jsfiddle.net/S8qv9/4/ You can paste your css in there and it will run autoprefixer on it. Of course, it's better to integrate autoprefixer into your workflow but you can use this if you're not ready to take that step.

This was the result I got:

body {
  background-color: white;
  background: -webkit-repeating-linear-gradient(left, #bab8bb, #bab8bb 30px, #9c9b9d 30px, #9c9b9d 60px);
  background: repeating-linear-gradient( to right, #bab8bb , #bab8bb 30px, #9c9b9d 30px, #9c9b9d 60px );
}

So it added in the -webkit prefix with the older from syntax.

Try that out and see if it's working in more browsers.

Gurpeer Duhra
Gurpeer Duhra
4,205 Points
Gurpeer Duhra
Gurpeer Duhra
4,205 Points

Probably you didn't set a @media screen resolution for ipad or lumia and didn't add in the background in it.

Caroline Hagan
Caroline Hagan
12,587 Points
Caroline Hagan
Caroline Hagan
12,587 Points

Hi @Mehranzare Without seeing your full code, it's hard to say.. like Gurpeer suggested, if you are using media queries, that could be one of the issues.

M Z
PLUS
M Z
Courses Plus Student 4,784 Points
M Z
M Z
Courses Plus Student 4,784 Points

Thank you for your response.

I have set an @media resolution for both but the background is on my main css page and hasn't been overridden by any subsequent code. I have since used cross browser to test it on many devices and it seems this code isn't recognised on android, desktop safari and ios 6 or below either but it's fine on firefox and chrome. I've seen websites with stripey backgrounds in the past so it's obviously not a new concept and this is the only way I know how to code a stripey background. Does anybody know an alternative way?