在html中制作背景图片整页答案

【问题标题】：Make background image full page in html在html中制作背景图片整页
【发布时间】：2018-10-20 18:04:41
【问题描述】：

我正在制作这个电影网站并添加背景。即使我向下滚动，我也希望背景能够重复并覆盖整个页面，但由于某种原因我无法修复它。我尝试搜索它并尝试了从谷歌获得的所有解决方案，但都是徒劳的。这是我的背景图片代码。我尝试将背景重复的值更改为重复-y，但仍然没有用。关于做什么的任何提示？

/*------ Background image ------*/
.bg-image {
/* The image used */
background-image: url("bgd.jpg");

/* Add the blur effect */
filter: blur(4px);
-webkit-filter: blur(4px);

/* Full height */
height: 100%;


/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

/* ------------------------ */

【问题讨论】：

如果你想让背景重复设置background-repeat为repeat
此外，如果您希望背景保持滚动时的状态，请使用background-attachment:fixed
@AbdullahRazzaki 我试过这个但没用
尝试：background-repeat: repeat-y;
@lulius 没有变化 :(

标签： html css

【解决方案1】：

直接使用body 标签设置背景样式属性。 使用background-repeat: repeat。你也可以使用!important覆盖一些css属性。即

body {
/* The image used */
background-image: url("bgd.jpg");



/* Center and scale the image nicely */
background-position: center;
background-repeat: repeat;
background-size: cover;
}

【讨论】：

是的，现在它可以工作了，但是我应该怎么做才能获得模糊效果？
因为我不能将模糊效果放在body标签内，因为它会模糊整个网站。 :(
很好，您可以简单地使用 body 标签或其他类添加该 CSS。 :)
通过在其他类中添加模糊效果，您可以简单地在网页的任何位置使用它:)
这个链接也很有帮助 [stackoverflow.com/questions/38366571/…

【解决方案2】：

如果你想要模糊，你应该把 div 设为绝对

.bg-image{
position:absoulte;
width:100%;
height:100%;
left:0;
top:0;
// existing background css
}

【讨论】：