jquery - 购物背景图片

Question

我尝试使用 jquery 将第一个产品图片设置为 shopify 产品页面中的背景图片，但我遇到了问题，当我输入此代码时:

$('body').css('background', '#FFFFFF')(这只是一个例子)

背景只出现在页面中间，我尝试使用 $('body').parent().css('background', '#FFFFFF') 但是背景出现了在页面的标题中，我在一些网站上进行了搜索，解决方案是我编写的代码，但我不知道为什么这在我的网站上不起作用。

我网站的网址是http://pruebakms4.myshopify.com/collections/frontpage/products/porducto-2

所以，如果有人能帮助我，我将不胜感激。非常感谢。

Answer 1

您的原始背景图片正在应用于“body”和“html”，因此当您使用 javascript 时，它会更改 body 背景，但 html 背景仍然存在。

由于您的 css，body 元素比您的 html 元素小，并且由于 id 为 contenedorMenu 的元素中的边距，boty 元素向下移动了几个像素。

html 高度应为 100%，body 不应指定高度，但最小高度应为 100%(问题是在您的 css 中某处您将 body 高度设置为 100%)。 See here for reference

在#contenedorMenu 中不使用 margin-top:2%，而是使用 padding-top:2%。您的 CSS 应如下所示:

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

在此之后，您的 javascript 调用将正常工作:

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

但是，请记住，您还将原始背景图像分配给了 html 元素，因此您可能想要执行以下操作:

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

将新背景应用于 body 和 html 元素。 或者您可能想要清理您的 css，以便永远不会将背景设置为您的 html 元素。