如何使背景图像即使滚动也保持在左下角

发布于 2024-09-09 01:08:03 字数 429 浏览 2 评论 0原文

我想知道是否有一种方法可以使我的背景图像始终保持在左下角,即使用户滚动浏览器也是如此。我当前的CSS可以在网站加载时使图像位于浏览器底部,但是如果我滚动浏览器,它仍然会停留在同一位置。我很感激任何帮助。

html, body 
{
background-image:url("backgroundBottom.png");
background-position:bottom left;
background-repeat:no-repeat;
background-attachement:fixed;   //I just add this, don't think this would work.
font-family:"Georgia, self";
font-size:"30px";
margin:0px;
height:100%;
text-align:center;
}

I was wondering if there is a way to keep my background image on bottom left all the time even if the user scroll the browser. My current css can make the image in the bottom of the browser when the site loaded, but if I scroll the browser, it will still stay in the same location. I appreciate any help.

html, body 
{
background-image:url("backgroundBottom.png");
background-position:bottom left;
background-repeat:no-repeat;
background-attachement:fixed;   //I just add this, don't think this would work.
font-family:"Georgia, self";
font-size:"30px";
margin:0px;
height:100%;
text-align:center;
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

梦醒灬来后我 2024-09-16 01:08:03

您正在 HTML 和 HTML 上设置背景。身体元素。

代码看起来不错,background-attachment:fixed就是你所需要的。

所以在简写 CSS 中,只需写

body {
    background: url(backgroundBottom.png) bottom left no-repeat fixed;
}

You're setting the background on both the HTML & BODY elements.

The code looks good, background-attachment: fixed is what you need.

So in shorthand CSS, just write

body {
    background: url(backgroundBottom.png) bottom left no-repeat fixed;
}
樱花落人离去 2024-09-16 01:08:03

如果它是一个没有重复的固定图像,我建议将它放在它自己的 div 标签中,该标签与图像的宽度和高度完全相同。

<div id="BackgroundImage"></div>

然后使用以下 CSS

#BackgroundImage{position: fixed; width="xx"; height="yy"; bottom:0px; left:0px;}

显然是根据您的需求定制的

要点是 position:fixed

生成一个绝对定位的元素,相对于浏览器窗口定位。元素的位置由“left”、“top”、“right”和“bottom”属性指定

http://www.w3schools.com/Css/pr_class_position.asp

if it is a fixed image with no repeat, I would recommend putting it in it's own div tag that is exactly the same width and height as the image.

<div id="BackgroundImage"></div>

Then use the following CSS

#BackgroundImage{position: fixed; width="xx"; height="yy"; bottom:0px; left:0px;}

obviously customized to your needs

The main point is position:fixed

Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties

http://www.w3schools.com/Css/pr_class_position.asp

一枫情书 2024-09-16 01:08:03

您使用了background-attach*e*ment:fixed;

尝试更好地拼写它,例如 background-attachment:fixed;

you used background-attach*e*ment:fixed;

try spelling it better like background-attachment:fixed;

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文