Comments on: background-size https://css-tricks.com Tips, Tricks, and Techniques on using Cascading Style Sheets. Wed, 15 Sep 2021 16:57:50 +0000 hourly 1 https://wordpress.org/?v=6.1.1 By: Vasko https://css-tricks.com/almanac/properties/b/background-size/#comment-1782461 Wed, 15 Sep 2021 16:57:50 +0000 http://css-tricks.com/?page_id=196150#comment-1782461 My man you don’t know how much time I’ve been spending trying to find a proper solution on “How to make an image fit inside a container”.. you guys are awesome. Sad part is there’s tons of tutorials the experts the guru’s making contents after contents but they all forgets small things that could save our precious time.. You guys are solid….Big Fan.

]]>
By: Karl https://css-tricks.com/almanac/properties/b/background-size/#comment-1756433 Thu, 07 May 2020 19:04:34 +0000 http://css-tricks.com/?page_id=196150#comment-1756433 Using both cover and contain distorts the dimensions of my background image. Is there a way to make it so that when the image is resized to fit the div, the dimensions are constrained to their original ratio and any overlap is hidden outside the div? That way my image is not distorted but rather cut off at the sides.

]]>
By: Mike Henry https://css-tricks.com/almanac/properties/b/background-size/#comment-1613077 Wed, 15 Nov 2017 18:01:25 +0000 http://css-tricks.com/?page_id=196150#comment-1613077 In reply to Mike Henry.

Nevermind. I think I figured it out!
I make my SVG sprite a single column. Luckily all my icons are the same width, so this is one icon’s width wide: 40px.
I set css background-size to 100%, which works for IE.
The sprite fits the width of the containing element (extra height is hidden), and adjusts based on that element’s width.
The height of the sprite can continue to grow as the project rolls forward, as long as I never change the width and only add new icons to the bottom.
I control the background-position using only the vertical property. Horizontal is always zero.
Voila!
Want a smaller (20px wide) icon? Change width of containing element to 20px wide and cut the vertical position shift in half to change icons.

]]>
By: Mike Henry https://css-tricks.com/almanac/properties/b/background-size/#comment-1613076 Wed, 15 Nov 2017 16:58:16 +0000 http://css-tricks.com/?page_id=196150#comment-1613076 I’m using an SVG sprite that is getting continually added to (ie, the dimensions continue to change) throughout development. For this reason I don’t want to specify two value for background-size.
It looks like (surprise!) IE (Edge and 10) doesn’t understand the single value option.
How would you suggest I handle this problem?

]]>
By: Daniel https://css-tricks.com/almanac/properties/b/background-size/#comment-1607709 Wed, 29 Mar 2017 11:28:29 +0000 http://css-tricks.com/?page_id=196150#comment-1607709 In reply to leno.

Just use background-position to center the background image. Like the following to center it horizontally in the top (if that’s what you need):
background-size: cover;
background-position: center 0;

]]>
By: leno https://css-tricks.com/almanac/properties/b/background-size/#comment-1607652 Sun, 26 Mar 2017 17:19:52 +0000 http://css-tricks.com/?page_id=196150#comment-1607652 When using the ‘cover’ property, how can keep the image centered even when scaling down for responsive?

]]>
By: RON https://css-tricks.com/almanac/properties/b/background-size/#comment-1605861 Fri, 30 Dec 2016 22:54:48 +0000 http://css-tricks.com/?page_id=196150#comment-1605861 thats cool, but if you want a carousel to maintain the entire image as the page responds from computer down to phone how do you do that?

]]>
By: hadeel https://css-tricks.com/almanac/properties/b/background-size/#comment-1603337 Wed, 10 Aug 2016 07:57:50 +0000 http://css-tricks.com/?page_id=196150#comment-1603337 Very great article
thank you

]]>
By: WangNingning https://css-tricks.com/almanac/properties/b/background-size/#comment-1600942 Fri, 15 Apr 2016 05:05:31 +0000 http://css-tricks.com/?page_id=196150#comment-1600942 really helpful.

]]>