Ad

Shopify Background Image

- 1 answer

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.

Ad

Answer

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.

Ad
source: stackoverflow.com
Ad