body .site {
background: #606060 url(http://myimage.jpg) center center;
-webkit-background-size: cover;
background-size: cover;
background-attachment: fixed;
}

and it works perfectly on my laptop, but when trying to scroll up or down the page on a tablet or phone the background image jerks and jumps and I don’t know how to fix it (I’m a complete beginner and whilst I’ve looked round the forum I’m not even sure what I should be searching for).

Also, the anchor button on the slider which sends the visitor down the page doesn’t scroll smoothly, and just instantly jumps to the next part – how can I slow it down?

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

Thanks for the link!

What you have been experiencing in your mobile devices is a mobile device browser issue. The issue occurs because when you first visit the site in your mobile devices you will have the address bar. And as soon as you scroll the page, the address bar disappears and then the browser viewing area changes and that is why it will look like your background image is jumping because it changes position in relation to the browser area without the address bar.

There were other people who already created a solution for that. You can find the discussions here: http://stackoverflow.com/a/25020295

Hope this explains it.

On the basis of the above I added

var bg = jQuery("#bg1");
jQuery(window).resize("resizeBackground");
function resizeBackground() {
    bg.height(jQuery(window).height() + 60);
}

to the JavaScript box in the Customiser and it’s done something, but it’s still not right and the whole picture is now scrolling upwards with the content leaving a brief gap before it reappears. I don’t even know whether that was where the code is meant to go – I’m a complete beginner.

Could you have a look and see if you can see what I mean? I only have Android devices and nothing using iOS so I haven’t tried it on that>

The code will only work if you have an element with the ID “bg1”. Other than that, it will not do anything.

Can you please try this css code instead,

@media (max-width:480px){
  html { 
    background: url(http://myimage.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

Please let us know how it goes.

Could you try removing these css.

body .site {
background: #606060 url(http://myimage.jpg) center center;
-webkit-background-size: cover;
background-size: cover;
background-attachment: fixed;
}

And

@media (max-width:480px){
  html { 
    background: url(http://myimage.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

Then just add this css.

body.home {
background: #606060 url(http://myimage.jpg) center center;
-webkit-background-size: cover;
background-size: cover;
background-attachment: fixed;
}
body.home .backstretch {
display: none;
}

Thanks!

As for the slider’s anchor button mentioned at the start, how do I slow the progess down? When clicked on it instantly jumps to the next part of the page which is the right place, but I wanted it to scroll down a bit more elegantly than this (as with the one page demos I’ve seen).

I don’t know if it’s to do with the smooth scrolling plugin because I can’t install it, but I don’t think it’s that anyway?

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!