CSS - Background-size: cover；太大了。如何调整大小？

Question

我正在尝试一个简单的CSS平行效果，通过固定背景图像与背景大小的封面。一切似乎都如我所愿，但背景图像太大了。与原始文件相比，它也被裁剪和放大。如果我尝试删除"cover“属性，并将其替换为更具体的大小，那么"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">
         	<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>

​