Fit background image to area

Dinesh Bali
Dinesh Bali used Ask the Experts™
on
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,
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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
https://www.w3schools.com/css/tryit.asp?filename=trycss3_object-fit_all

.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
https://revolution.themepunch.com/
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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.

Author

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 -->
</div>

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.
ActualBannerImage.jpg
expectedBanner.png
BannerComming.jpg
Build an E-Commerce Site with Angular 5

Learn how to build an E-Commerce site with Angular 5, a JavaScript framework used by developers to build web, desktop, and mobile applications.

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

see this codepen so you can play with
https://codepen.io/lenamtl/pen/xyMzOZ

Author

Commented:
Hi
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.
scaledown.png
scalefill.png
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
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>
.container.bg-image {
	width:100%;
	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;
}
</style>

Open in new window

HTML
<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 -->
</div>

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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial