我在要创建的wordpress网站上有一个标题图片，该图片必须是所有浏览器的完整宽度。
父主题上已经存在的代码是：
background: url("/test/wp-content/themes/Howtopassyourexams.com/Theme/images/page-header-bg.jpg");
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
position: relative;
box-shadow: 0 7px 10px -10px #000;
width: 100%;
z-index: 0;
height: 300px;
margin-bottom: 80px;
在使用的主题上还有第二个样式表，该样式表继承了父样式表中的大多数样式，该样式表上的图像CSS为：
background: url("/test/wp-content/themes/Howtopassyourexams.com/Theme/images/page-header-bg.jpg");
width: 100%;
height: 300px;
我不确定标题图像为何在两个样式表中都有两个CSS代码，但这就是主题出现的方式，而且我不是专家，所以这可能很正常。
即使将宽度更改为100％，图像也将保持原始尺寸（1369x325px），因此会在较小的浏览器中将其切出一部分。
如果我出错了，可以提供任何帮助，网址是：http : //biobreak.co.uk/test/services/
谢谢。
实际上，第一个样式表中的规则使用来设置背景图像的大小cover。
第二个规则的width: 100%;设置仅设置周围元素的宽度，而不设置背景图像本身（保持不变cover）。
所以你必须添加
background-size: 100%;
遵守第二条规则。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句