Background images not displaying properly on mobile browsers

[Marc2412]

The background images of a website I’m working on (http://www.skillsz.pixub.com) are not displaying properly on mobile phone browsers. The problem occurs within the header, header-bottom and body. Here is a picture of the problem on my smartphone:

http://i.gyazo.com/a16e2bda410a0df354de66c4073a8dde.png

This is the piece of code I made but it fails to do the job:

body.custom-background, #header, #header-bottom {
    background: url("http://freestocktextures.net/wp-content/uploads/2013/10/Free-   Dark-Black-Gradient-Texture-with-Ripped-Paper.jpg") no-repeat center center fixed; 
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;
}

[Paulie_D]

Curious…on my (admittedly) desktop the site is not really responsive below 1200px.

[Marc2412]

What browser are you using?

[Paulie_D]

Chrome Version 38.0.2125.101 beta-m (64-bit)

[Paulie_D]

Also, your link has been taken down…you might want to fix that.

[Marc2412]

Hm.. On 17″ screens like my laptops, I have no problem with anything. On my Ipad it shows fine aswell but when I went on my 15″ laptop I see that the sides go over the slideshow and some of the text. Is this also happening for you?

[Paulie_D]

Pretty much…I’m resizing the browser to replicate a mobile environment.

Are you using media queries?

[Marc2412]

Fixed the issue with 15″ screens so it should show up correct now. No I am not using media queries since I have never worked with those so I have no clue how to even start. The website shows correctly on Ipads, 15″ screens and 17″ screens now. Only problem is showing the images correctly on mobile device browsers.

[Marc2412]

I’m using WordPress, the theme has a responsive toggle but once I use that it’s all messed up.

[Marc2412]

As you can see it’s responsive when you try now, but everything is messed up

[Marc2412]

This is my media query stylesheet:

[MOD EDIT – Codedump Removed]

[Marc2412]

here is the pastebin: http://pastebin.com/3AMue78V

I want the background to show white on phones and ipads.. so no background I have on a laptop/computer, that’s all

[Paulie_D]

The site is unresposive because it’s hardcoded not to be with fixed px widths all over…like

#slide-container {
width: 930px;
height: 383px;
background: url("images/sliderbottom.png") no-repeat scroll center bottom transparent;
margin: 30px 0;
}

and

media="all"
#heading {
color: #CCCCCC;
font-size: 35px;
margin: 40px auto;
text-align: center;
width: 700px;
font-weight: 100;
}

[Marc2412]

So I guess I can’t fix it?

[Author]

Posts