Jquery backstretch background image

I noticed when I added a background image to my page, it stretch covers the background. it also uses jQuery to insert this background. How can I have the background repeat-x and repeat-y instead of it being stretched? is that possible?

Hello There,

Thanks for writing in! To have the background that will be repeated, please do not use the background image in the settings. You may use the background pattern option instead.

Hope this helps. Kindly let us know.

Oh, I see that I could do that, but I do like that I can put a different background for each different page, I guess I would have to do something a little more custom? like going into the functions.php? if so, if you had any clues you can give there, would be helpful, but I think I could figure something out if I had to, just looking for the X theme process.


Hi again,

You can set it up per page basis in Page Settings. Please see http://prntscr.com/2zko2f

Hope that helps :slight_smile:

Hi Nabeel,

Thanks for the screenshot, this is helpful, but I was looking to have a little more control over the background. Right now, it just “covers” the entire background which is the intended effect, but I would like to tile the image so that it’s not “stretched”. I want to “repeat-y” and “repeat-x” the background. any ideas on getting this achievement?

Hi There,

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.

Thank you.


Hello There,

Thank you for providing the url of your site. Regretfully the backstretch will just do one thing. To stretch the image as the background image of the page and that’s it. No additional settings that enables you to control the repetition of the image.

If you want to be able to insert an image pattern where in you want to repeat x or y, you can make use of the custom css instead. Simply use a custom css along with its page ID so that you can target each page. You can add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.page-id-7 {
  background-image: url(http://placehold.it/300x300); 
  background-repeat: repeat-x repeat-y;

We are using the .page-id-{#} class which targets the class id of the page. To locate the page ID, please check this out: https://theme.co/apex/forum/t/setup-how-to-locate-post-ids/59

Hope this helps.

exactly what i was looking for! thank you!!

You are most welcome. :slight_smile: