Shopify 背景图片答案

【问题标题】：Shopify background imageShopify 背景图片
【发布时间】：2015-12-28 06:14:34
【问题描述】：

我尝试使用 jquery 将第一张产品图片设置为 shopify 产品页面中的背景图片，但是当我输入以下代码时出现问题：

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

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

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

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

【问题讨论】：

如果你想只更改为正文，请仅使用$('body').css('background', '#FFFFFF')设置它，然后不要使用parent()
是的，但是当我输入这段代码时，背景出现在页面中间，您可以在图像中看到结果：s3.postimg.org/5qij7zzya/error_CSS.jpg
从 porducto-2 media="all" html, body bakcground-image:... 中删除 css，它会在正文中为你提供白色背景
是的，这给了我一个白色背景，但我把白色背景作为一个例子 XD，我想在每个产品页面中放置一个带有产品第一个图像的背景图像。

标签： jquery html css shopify

【解决方案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 元素。

【讨论】：