Icon

So this is how a media query would work.

Right now the CSS says something like this:

#wallpaper {
background-image: url('/s3/theme_images/1658221.jpg?1414962405');
}

So a media query basically lets you pick different CSS depending on window size. So try something like this to make a different image appear if you have a narrower screen:

@media (max-width: 1024px) {
#wallpaper {
background-image: url('some-other-image-for-smaller-resolution');
}
}

Add that in and you should see the image disappear as the window narrows down to 1024px wide, simple!

Thanks mate! I'll make some smaller images more suited for mobile and test the code

Wouldn't worry too much about mobile as those browsers get the mobile view anyway which has no images, just the smaller resolution desktops and keeping the filesizes down.

There may be some people using full site on mobile though, perhaps those people can reply here?

I think the background image looks good on mobile, I tested on my phone.

I tried to get the "no scroll" effect, but it does work. can you check my code?

body {
background-image: url('http://cloudfront.shivtr.com/theme_images/1658917.jpg?1414976606') ;
background-attachment:fixed;
background-position:center center;
background-repeat:no-repeat
}

Ugh, to hell with the mobile version of the site... I always go to the normal one :) Hate the layout of the mobile one ;)

You only need

background-attachment:fixed;

But you need to apply it to the wallpaper id:

#wallpaper {
background-attachment:fixed;
}

However, if you do that, the image "jumps upwards" a little, so needs a tweak, so also add:

background-position: center 37px;

No you can worry about the Icon logo also scrolling :)

You're right, works fine. I'll do the image tweaks another day, need some sleep. Now at least we have general layout :) Thanks for the help mate!