css - 无法在响应式布局上调整背景大小

标签 css

我在客户网站上工作,遇到了一个大问题。我有一个具有 repeat-x 属性的背景图像,我需要在调整窗口大小后调整它的大小(就像响应图像的行为一样,但现在有背景)

所以代码大致是这样的:

<style>
body {padding: 0px}
#wrapper { background: url("images/barra.fw.png") repeat-x scroll 0px 115px transparent !important;}
</style>


<body>

<div id="wrapper">

<div id="pagelayout">

    Lorem ipsum

</div>

</div>

要澄清的是,我想要的是垂直调整背景图像的大小以保持比例。网站是这个: http://supersorriso.pt .

PS:已经尝试过弄乱一切,无法弄清楚哪里出了问题,或者这是否可能。

最佳答案

我相信您可以在需要调整其背景大小的元素上使用 background-size 属性。

在您的媒体查询中:

#wrapper{
  background-size:80px 60px;
}

您需要进行数学计算以获得正确的纵横比。

关于css - 无法在响应式布局上调整背景大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15639227/

相关文章:

javascript - 在 JavaScript 中重新启用鼠标滚动

css - block 在动画结束时消失 - CSS 3

javascript - 如何仅在遇到换行符时左对齐居中文本?

jquery - 将两行添加到一个文本框,是否可以

html - 响应式导航错误

jquery - HTML 根据宽度调整高度而不使用 $(window).resize()

css - 文本突出显示作为 CSS mask ?

css - 在 flex box 中保持图像纵横比

css - 当 $(this) 高度增加时,同级 float 到底部

javascript - 移动设备上的网站登陆页面,键盘问题