css - 全宽背景图像大小问题

标签 css web background-image fullscreen

我正在寻找修复我的第二个全宽图像(页面中间的那个),以便它与标题图像中的上方图像水平对齐。我注意到图像的右侧有一个间隙,如下图所示。这是因为我的图像不是 1600 像素宽吗?如果需要,我可以将其编辑为 1600px。如果问题出在其他地方,有人可以帮助我。谢谢。

http://www.jobspark.ca

.fullWidthSectionBG { 
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
border-bottom: solid 1px #ddd; 
border-top: solid 1px #ddd;
margin-left: -1600px;
margin-right: -1600px;
padding-top:20px;
padding-bottom:330px;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: auto; 
} 


<div class="fullWidthSectionBG">
<div class="fullWidthSection">
<div class="myLeftColumn">        
<p>
</p> 
</div>
<div class="myRightColumn">
<h2>Used By Thousands Of Canadians</h2>
<p>Jobspark.ca is dedicated to providing resources for job seekers and employers throughout British Columbia and Alberta. Many top employers along with small local businesses from across the region post their jobs on Job Spark to find qualified professionals.</p>
<p>Job Spark simplifies your quest for the perfect career with a clean design and real-time postings. Our streamline job board was designed to take the headache out of finding a job.</p>
<p>Your job listings will be seen across multiple venues, receiving thousands of views each month! </p></div>
</div>
</div>

最佳答案

如今,您可以将其添加到您的 CSS 样式中:

background-size: cover;

那么你就不用太担心图片的大小了。它在旧版浏览器中不起作用,但如今这已成为小事。

这可能不是您想要的外观,但在这种情况下,请尝试调整图像的大小(在这种情况下,可能降低它的高度)。还有其他背景大小选项,值得一试。

关于css - 全宽背景图像大小问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16683124/

相关文章:

javascript - 在 css 翻译动画后删除空格

jquery - 移动设备上的下拉导航

java - 从 tomcat 迁移到 websphere

css - 内联 SVG 在 IE 中不能用作背景图像

HTML 电子邮件背景图片不显示全宽

javascript - CSS vs jQuery 如何在没有其他插件的情况下创建动态表格样式(斑马)?

javascript - CSS/HTML 中的响应式对 Angular 线

angularjs - 当 ng-model 为空时如何在 md-input-container 上有一个 float 标签

HTML 将 css 背景图像替换为视频

html - 背景图像:固定适用于除 Firefox 以外的任何地方