Shopify background image

Question

I try to set with jquery the first product image as a background image in the product page in shopify but i have a problem, when i put this code:

$('body').css('background', '#FFFFFF') (this is just an example)

The background only appear in the middle of the page, i tried with $('body').parent().css('background', '#FFFFFF') but the background appear in the header of the page, i've searched in some websites and the solution is the code that i've wrote but i don't know why this not work in my site.

The url of my site is http://pruebakms4.myshopify.com/collections/frontpage/products/porducto-2

So, if someone can help me i appreciate that. Thanks a lot.

Only set it with `$('body').css('background', '#FFFFFF')` if you want to change to body only then don't use `parent()` — Parth Trivedi, Dec 28 '15 at 06:21
Yes but when i put this code, the background appear in the middle of the page, you can see the result in the image: http://s3.postimg.org/5qij7zzya/error_CSS.jpg — snake_404, Dec 28 '15 at 06:26
remove css from porducto-2 `media="all" html, body bakcground-image:...` it will give u white background in body — Dhara, Dec 28 '15 at 06:50
Yes, this give me a white background but i put the white background just as an example XD, i want to put a background image with the first image of the product in every product page. — snake_404, Dec 28 '15 at 07:01

score 1 · Accepted Answer · edited May 23 '17 at 11:59

Your original background image is being applied to "body" and to "html", so when you use your javascript, it changes the body background, but the html background remains.

The body element is smaller than your html element due to your css, and the boty element is moved a few pixels down due to the margin in the element with id contenedorMenu.

html height should be 100%, body shouldn't have a height specified, but a min-height of 100% (the problem is that somewhere in your css you're setting the body height to 100%). See here for reference

And instead of using margin-top:2% in #contenedorMenu, use padding-top:2%. Your css should look like:

html{
    height: 100%;
}
body{
    min-height:100%;
}
#contenedorMenu {
    padding-top: 2%;
    text-align: center;
    position: relative;
    z-index: 1;
}

After this, your javascript call will work correctly:

$('body').css('background', '#FFFFFF');

However, keep in mind that you also assigned your original background image to the html element, so you might want to do something like this:

$('body, html').css('background', '#FFFFFF');

Which applies the new background to both body and html elements. Or you might want to clean up your css so the background is never set to your html element.

Shopify background image

1 Answers1