时间戳

首页 > 解决方案 > 如何设置固定大小的背景图片？

html - 如何设置固定大小的背景图片？

问题描述

如何设置固定大小的背景图片？

我现在设置了宽度和高度，但是当我增加或减少我的浏览器窗口图像时会被阻止。我怎么能解决这个问题？

当我减小窗口大小时，图像将被缓慢阻塞： 在此处输入图像描述

这是我的代码：-

.bg{
  height: 600px;
  width: 100%;
  border-bottom-left-radius: 80%;
  border-bottom-right-radius: 80%;
  background-image: url("/assets/images/interview.jpg");
  background-size: cover;
  display: flex;
  justify-content: center;
}

标签： htmlcss

解决方案

几条新线。添加了对它们的评论。

.bg{
  height: 600px;
  width: 100%;
  border-bottom-left-radius: 80%; /*I'd remove this and edit the original photo*/
  border-bottom-right-radius: 80%; /*I'd remove this and edit the original photo*/
  background-image: url("https://i.pinimg.com/originals/3b/8a/d2/3b8ad2c7b1be2caf24321c852103598a.jpg");
  background-size: contain; /*From cover to contain*/
  background-position: top !important; /*New - Can change to center*/
  background-repeat: no-repeat !important; /*New*/
  display: flex;
  justify-content: center;
}
<div class="bg">

</div>

推荐阅读