CSS - 背景大小：封面;太大了。我如何重新调整大小？

Question

我正在尝试一个简单的CSS parallex影响修复背景图像的背景大小的封面。一切似乎按我的意愿工作，但背景图像太大了。与原始文件相比，它也裁剪并放大。如果我尝试删除“封面”属性，并将其替换为更具体的大小，则“parallex”类型的影响将消失，并且我将为图像留下奇怪的滚动过渡。

什么是重新调整背景图像大小的最佳方法，以便我可以按照自己喜欢的方式裁剪它，但也会产生我期望的效果？截至目前图像中过于放大

.fullwidth_100 { 
width:100%; 
height:500px; 
background-image:url('http://www.myorderdesk.com/Providers/206190/Files/31/full_width_image_1.jpg'); 
background-position: center center; 
background-attachment:fixed; 
background-repeat: no-repeat; 
/*background-size: 100% 80%; */ 
background-size:cover; 
-webkit-transition: background-image 0.4s; 
-moz-transition: background-image 0.4s; 
-ms-transition: background-image 0.4s; 
-o-transition: background-image 0.4s; 
transition: background-image 0.4s; 
overflow: hidden; 
-webkit-font-smoothing: subpixel-antialiased; 
} 

这里是我的Demo

Answer 1

第1步：下载你的形象 第2步：找到图片的宽度和高度 第3步：设置高度和宽度一样所以：

.fullwidth_100 { 
    width: 1080px; 
    height: 500px; 
}` 

.fullwidth_100 { 
 
width: 1440px; 
 
height: 500px; 
 
background-image:url('http://www.myorderdesk.com/Providers/206190/Files/31/full_width_image_1.jpg'); 
 
background-position: center center; 
 
-webkit-transition: background-image 0.4s; 
 
-moz-transition: background-image 0.4s; 
 
-ms-transition: background-image 0.4s; 
 
-o-transition: background-image 0.4s; 
 
transition: background-image 0.4s; 
 
overflow: hidden; 
 
-webkit-font-smoothing: subpixel-antialiased; 
 
}

<div class="fullwidth_100"> 
 
      \t <div class="large-12 columns"> 
 
      <h3>Convenience is our goal</h3> 
 
      <p>With 30 years of experience we are your #1 choice in <br>providing quality printing solutions.</p> 
 
      <a href="#">Learn more about us ></a> 
 
      </div> 
 
</div> 
 
    
 
<br> 
 
<p> 
 
    Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. 
 
</p> 
 
    
 
<p> 
 
    Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. 
 
</p> 
 
    
 
<p> 
 
    Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. 
 
</p> 
 
    
 
<p> 
 
    Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. 
 
</p> 
 
    
 
<p> 
 
    Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. 
 
</p>