<div>
When using <b>cover</b> you can use center to align (this is ok for image that have the subject in center) but this won't resize the image like responsive !<br />
<br />
If you want to resize the image you can use 
<pre><code class="code-1 nolinks" id="code-20-42718276-1"><span> .scale-down {object-fit: scale-down;} </span>
</code></pre>
 is probably the best solution<br />
<br />
Check the demo and result<br />
<a href="https://www.w3schools.com/css/tryit.asp?filename=trycss3_object-fit_all" rel="ugc">https://www.w3schools.com/css/tryit.asp?filename=trycss3_object-fit_all</a><br />
<br />
.fill {object-fit: fill;}<br />
.contain {object-fit: contain;}<br />
.cover {object-fit: cover;}<br />
.scale-down {object-fit: scale-down;}<br />
.none {object-fit: none;}<br />
<br />
You can use Revolution Slider with their editor if you have several image to slide <br />
<a href="https://revolution.themepunch.com/" rel="ugc">https://revolution.themepunch.com/</a>
</div>


<div>
If you use cover the image will scale to fit the available space - that means it will expand until the last edge (top /bottom OR left / right) encounters the edge of the screen.<br />
<br />
If your image is not in the same ratio as the screen - then it will be cropped either lengthwise or horizontally.<br />
<br />
As different screens have different ratio's it is not possible to style the image so it fits perfectly on all screens without distortion or a gutter.<br />
<br />
If you still need to do something with your background then please post a link so we can see what you are referring to - or a screenshot with the markup that generates it.
</div>


<div>
Many Thanks.<br />
<br />
Below is my code snippet<br />

<pre><code class="code-1 nolinks" id="code-20-42718382-1"><span>&lt;div id=&quot;featured-title&quot; class=&quot;featured-title clearfix&quot;&gt;</span>
<span>    &lt;div id=&quot;featured-title-inner&quot; class=&quot;container clearfix&quot; style=&quot;width:100%;  background-size: cover;background:url('/media/1149/ActualBannerImage.jpg') no-repeat; &quot;&gt;</span>
<span>        &lt;div class=&quot;featured-title-inner-wrap&quot;&gt;</span>
<span>        &lt;/div&gt;&lt;!-- /.featured-title-inner-wrap --&gt;</span>
<span>    &lt;/div&gt;&lt;!-- /#featured-title-inner --&gt;</span>
<span>&lt;/div&gt;</span>
</code></pre>
<br />
My Banner is coming as BannerComming.jpg<br />
I want banner to appear on my page as expectedBanner.png<br />
Actual Banner image used: ActualBannerImage.jpg<br />
<br />
Please advise the change.<br />
<a href="https://filedb.experts-exchange.com/incoming/2018/10_w43/1397327/ActualBannerImage.jpg" target="_blank" class="file-inline" title="Actual Banner Image (130 KB)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M67.508 468.467c-58.005-58.013-58.016-151.92 0-209.943l225.011-225.04c44.643-44.645 117.279-44.645 161.92 0 44.743 44.749 44.753 117.186 0 161.944l-189.465 189.49c-31.41 31.413-82.518 31.412-113.926.001-31.479-31.482-31.49-82.453 0-113.944L311.51 110.491c4.687-4.687 12.286-4.687 16.972 0l16.967 16.971c4.685 4.686 4.685 12.283 0 16.969L184.983 304.917c-12.724 12.724-12.73 33.328 0 46.058 12.696 12.697 33.356 12.699 46.054-.001l189.465-189.489c25.987-25.989 25.994-68.06.001-94.056-25.931-25.934-68.119-25.932-94.049 0l-225.01 225.039c-39.249 39.252-39.258 102.795-.001 142.057 39.285 39.29 102.885 39.287 142.162-.028A739446.174 739446.174 0 0 1 439.497 238.49c4.686-4.687 12.282-4.684 16.969.004l16.967 16.971c4.685 4.686 4.689 12.279.004 16.965a755654.128 755654.128 0 0 0-195.881 195.996c-58.034 58.092-152.004 58.093-210.048.041z"/></svg>ActualBannerImage.jpg</a><br />
<a href="https://filedb.experts-exchange.com/incoming/2018/10_w43/1397328/expectedBanner.png" target="_blank" class="file-inline" title="Expected Banner on Page (93 KB)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M67.508 468.467c-58.005-58.013-58.016-151.92 0-209.943l225.011-225.04c44.643-44.645 117.279-44.645 161.92 0 44.743 44.749 44.753 117.186 0 161.944l-189.465 189.49c-31.41 31.413-82.518 31.412-113.926.001-31.479-31.482-31.49-82.453 0-113.944L311.51 110.491c4.687-4.687 12.286-4.687 16.972 0l16.967 16.971c4.685 4.686 4.685 12.283 0 16.969L184.983 304.917c-12.724 12.724-12.73 33.328 0 46.058 12.696 12.697 33.356 12.699 46.054-.001l189.465-189.489c25.987-25.989 25.994-68.06.001-94.056-25.931-25.934-68.119-25.932-94.049 0l-225.01 225.039c-39.249 39.252-39.258 102.795-.001 142.057 39.285 39.29 102.885 39.287 142.162-.028A739446.174 739446.174 0 0 1 439.497 238.49c4.686-4.687 12.282-4.684 16.969.004l16.967 16.971c4.685 4.686 4.689 12.279.004 16.965a755654.128 755654.128 0 0 0-195.881 195.996c-58.034 58.092-152.004 58.093-210.048.041z"/></svg>expectedBanner.png</a><br />
<a href="https://filedb.experts-exchange.com/incoming/2018/10_w43/1397329/BannerComming.jpg" target="_blank" class="file-inline" title="Actual Banner coming on my screen (63 KB)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M67.508 468.467c-58.005-58.013-58.016-151.92 0-209.943l225.011-225.04c44.643-44.645 117.279-44.645 161.92 0 44.743 44.749 44.753 117.186 0 161.944l-189.465 189.49c-31.41 31.413-82.518 31.412-113.926.001-31.479-31.482-31.49-82.453 0-113.944L311.51 110.491c4.687-4.687 12.286-4.687 16.972 0l16.967 16.971c4.685 4.686 4.685 12.283 0 16.969L184.983 304.917c-12.724 12.724-12.73 33.328 0 46.058 12.696 12.697 33.356 12.699 46.054-.001l189.465-189.489c25.987-25.989 25.994-68.06.001-94.056-25.931-25.934-68.119-25.932-94.049 0l-225.01 225.039c-39.249 39.252-39.258 102.795-.001 142.057 39.285 39.29 102.885 39.287 142.162-.028A739446.174 739446.174 0 0 1 439.497 238.49c4.686-4.687 12.282-4.684 16.969.004l16.967 16.971c4.685 4.686 4.689 12.279.004 16.965a755654.128 755654.128 0 0 0-195.881 195.996c-58.034 58.092-152.004 58.093-210.048.041z"/></svg>BannerComming.jpg</a>
</div>


ActualBannerImage.jpg

expectedBanner.png

BannerComming.jpg

<div>
Try to replace <b>cover</b> class by <b>object-fit: scale-down;</b><br />
<br />
see this codepen so you can play with<br />
<a href="https://codepen.io/lenamtl/pen/xyMzOZ" rel="ugc">https://codepen.io/lenamtl/pen/xyMzOZ</a>
</div>


<div>
Hi <br />
Thanks for your reply.<br />
I tries with scale down and scale fill.<br />
But both doesn't work. See attached.<br />
<br />
My image name ActualBannerImage.jpg is solve_header1.jpg<br />
So please don't get confused. Images provided are same.<br />
<br />
Please advise.<br />
<a href="https://filedb.experts-exchange.com/incoming/2018/10_w43/1397339/scaledown.png" target="_blank" class="file-inline" title="Scale Down (375 KB)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M67.508 468.467c-58.005-58.013-58.016-151.92 0-209.943l225.011-225.04c44.643-44.645 117.279-44.645 161.92 0 44.743 44.749 44.753 117.186 0 161.944l-189.465 189.49c-31.41 31.413-82.518 31.412-113.926.001-31.479-31.482-31.49-82.453 0-113.944L311.51 110.491c4.687-4.687 12.286-4.687 16.972 0l16.967 16.971c4.685 4.686 4.685 12.283 0 16.969L184.983 304.917c-12.724 12.724-12.73 33.328 0 46.058 12.696 12.697 33.356 12.699 46.054-.001l189.465-189.489c25.987-25.989 25.994-68.06.001-94.056-25.931-25.934-68.119-25.932-94.049 0l-225.01 225.039c-39.249 39.252-39.258 102.795-.001 142.057 39.285 39.29 102.885 39.287 142.162-.028A739446.174 739446.174 0 0 1 439.497 238.49c4.686-4.687 12.282-4.684 16.969.004l16.967 16.971c4.685 4.686 4.689 12.279.004 16.965a755654.128 755654.128 0 0 0-195.881 195.996c-58.034 58.092-152.004 58.093-210.048.041z"/></svg>scaledown.png</a><br />
<a href="https://filedb.experts-exchange.com/incoming/2018/10_w43/1397340/scalefill.png" target="_blank" class="file-inline" title="Scale FIll (384 KB)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M67.508 468.467c-58.005-58.013-58.016-151.92 0-209.943l225.011-225.04c44.643-44.645 117.279-44.645 161.92 0 44.743 44.749 44.753 117.186 0 161.944l-189.465 189.49c-31.41 31.413-82.518 31.412-113.926.001-31.479-31.482-31.49-82.453 0-113.944L311.51 110.491c4.687-4.687 12.286-4.687 16.972 0l16.967 16.971c4.685 4.686 4.685 12.283 0 16.969L184.983 304.917c-12.724 12.724-12.73 33.328 0 46.058 12.696 12.697 33.356 12.699 46.054-.001l189.465-189.489c25.987-25.989 25.994-68.06.001-94.056-25.931-25.934-68.119-25.932-94.049 0l-225.01 225.039c-39.249 39.252-39.258 102.795-.001 142.057 39.285 39.29 102.885 39.287 142.162-.028A739446.174 739446.174 0 0 1 439.497 238.49c4.686-4.687 12.282-4.684 16.969.004l16.967 16.971c4.685 4.686 4.689 12.279.004 16.965a755654.128 755654.128 0 0 0-195.881 195.996c-58.034 58.092-152.004 58.093-210.048.041z"/></svg>scalefill.png</a>
</div>


scalefill.png

scaledown.png

Dinesh Bali

<div>
<div class="content wysiwyg-content">
HI,<br />
<br />
I am setting background image and using below style<br />
width:100%; &nbsp;background-size: cover;background:url('/med<wbr />ia/1149/so<wbr />lve_header<wbr />1.jpg') no-repeat; <br />
<br />
My image width is too big and I wanted backgroud image to fit the area. Because of big width half image is shown.<br />
Please advise the way in CSS, bootstrap<br />
<br />
Regards,
</div>
</div>


HI,

I am setting background image and using below style
width:100%;  background-size: cover;background:url('/media/1149/solve_header1.jpg') no-repeat; 

My image width is too big and I wanted backgroud image to fit the area. Because of big width half image is shown.
Please advise the way in CSS, bootstrap

Regards,

Fit background image to area

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications. Bootstrap is a front end web framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.