Fit background image to area


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

Dinesh BaliAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

When using cover 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 !

If you want to resize the image you can use
 .scale-down {object-fit: scale-down;} 

Open in new window

is probably the best solution

Check the demo and result

.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}

You can use Revolution Slider with their editor if you have several image to slide
Julian HansenCommented:
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.

If your image is not in the same ratio as the screen - then it will be cropped either lengthwise or horizontally.

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.

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.
Dinesh BaliAuthor Commented:
Many Thanks.

Below is my code snippet
<div id="featured-title" class="featured-title clearfix">
    <div id="featured-title-inner" class="container clearfix" style="width:100%;  background-size: cover;background:url('/media/1149/ActualBannerImage.jpg') no-repeat; ">
        <div class="featured-title-inner-wrap">
        </div><!-- /.featured-title-inner-wrap -->
    </div><!-- /#featured-title-inner -->

Open in new window

My Banner is coming as BannerComming.jpg
I want banner to appear on my page as expectedBanner.png
Actual Banner image used: ActualBannerImage.jpg

Please advise the change.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Try to replace cover class by object-fit: scale-down;

see this codepen so you can play with
Dinesh BaliAuthor Commented:
Thanks for your reply.
I tries with scale down and scale fill.
But both doesn't work. See attached.

My image name ActualBannerImage.jpg is solve_header1.jpg
So please don't get confused. Images provided are same.

Please advise.
Julian HansenCommented:
object-fit is for images that are part of the flow - in this case the image is a background which means background-size:cover

To the actual problem.

Let us say your display is 1000px wide and your image is 1000px X 50px in size.

We could create a box 50px high and apply the background and it would fit perfectly.

What if we now try to view this on a screen that is only 800px wide - we have not changed the height of the bounding box in proportion to the diminished width, so only one of two things can happen

1. The aspect ratio of the image has to change to fit inside the box without cropping - thus distorting the image
2. The image retains its aspect ratio but is cropped top / bottom OR left / right

You can't have it fit perfectly at all screen widths UNLESS you modify the height. You can do this by giving the bounding box a padding

if your aspect ratio is 1000x50 then the ratio is 50/1000: 1 or 0.05 (5%)

You can then make your container
<style> {
	padding-bottom: 5.4695%;
	position: relative;
	background:url('images/expectedBanner.png') no-repeat;
	background-size: cover;
	border: 1px solid #333;
.featured-title-inner-wrap {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	color: white;
	text-align: center;
	background: rgba(0,0,0,.5);
	font-size: 1rem;

Open in new window

<div id="featured-title" class="featured-title clearfix">
    <div id="featured-title-inner" class="container bg-image clearfix">
        <div class="featured-title-inner-wrap">Sample Text
        </div><!-- /.featured-title-inner-wrap -->
    </div><!-- /#featured-title-inner -->

Open in new window

The padding allows us to build a responsive container that changes its height as the screen size changes so that the banner can preserve its aspect ratio. I have put some sample text in there to show how you can overlay content on the banner. Note that you might want to use Media queries to alter the size of the text at different screen resolutions.
Working sample here

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.