html - 定义背景图像的最小宽度

标签 html css width background-image minimum

我正在尝试在我的网页中制作背景图片,将尺寸定义为 80%。这样可行。我想让我的背景图像“响应”,所以我希望它在使用较小的窗口时调整大小。它确实调整了大小,但当然它太小了,无法完美地看到它。有没有办法定义图像的最小宽度? 谢谢!

这是我的 CSS:

.pageBio{height: 700px; background-image: url(https://****.png); background-repeat: no-repeat; background-position: center; background-color: #2a67b2; background-size:80%; text-align: center; font-size: 24px; line-height: 30px; color: black;

谢谢!

最佳答案

正如您已经说过的,您正在使图像具有响应性。因此您可以使用下面提到的媒体查询来定义图像大小。

@media only screen and (max-width: 640px){.pageBio{background-size:cover;}}

    @media only screen and (max-width: 640px){.pageBio{background-size:auto 100%; }} 

关于html - 定义背景图像的最小宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29296928/

相关文章:

html - 使用整个导航栏更改字体和颜色时,引导导航栏品牌和链接颜色不匹配

javascript - 用于编号导航的 jquery 插件

css - width calc(100% - 250px) 给我负 -150%

javascript - 问题滑入/滑出 JQuery

javascript - 当鼠标悬停在其中一个元素上时,突出显示具有相同类的所有元素

javascript - 错误 document.geElementById ('id' ).style.width

html - 导航栏干扰 Div

javascript - 使用 jQuery 选择 <a> 标签,其中 &lt;input&gt; 在里面

jquery - 显示表格的边框

r - 如何修复/调整ggplot geom_tile中每个波段的宽度