What is the difference between background-size: cover; and background-size: 100%;?

by

cover = Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

Basically it zooms in until the inner most edges are touching the side, which means that some of the image may be cut off unlike 100% where all of the image will be visible.

If it did not do the zoom in, you would end up with two sides that reach the edge but on the other axis you would have blank horizontal (or vertical) looking ‘bars’ on either side of the image in one of those directions.

Your Question: Why would they looks the same ?
Answer: If the image / container are square

See http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover for example

More Related Contents:

  1. CSS background-size: cover + background-attachment: fixed clipping background images
  2. Background-size with SVG squished in IE9-10
  3. What are the differences between flex-basis and width?
  4. Why does order of transforms matter? rotate/scale doesn’t give the same result as scale/rotate
  5. Pass function or mixin by reference in SASS
  6. SASS for loop updating hsla lightness returns error $lightness: “96.77419” is not a number for `hsla’
  7. Specify width in *characters*
  8. How to apply custom animation effect @keyframes in MUI?
  9. Apply webkit scrollbar style to specified element
  10. Can I replace the expand icon (▶) of the element?
  11. CSS two divs width 50% in one line with line break in file [duplicate]
  12. Customize list item bullets using CSS
  13. Issue with Input & Select tag height in form
  14. CSS Background-Image refuses to display in ASP.Net MVC
  15. Styling browser-native video controls
  16. How to add bordered triangle over a div tag
  17. Wrap text from bottom to top
  18. Are alternate nested styles possible in CSS?
  19. CSS: How to change colour of active navigation page menu
  20. CSS selector based on width?
  21. How can I delay the start of a CSS animation?
  22. Canvas is stretched when using CSS but normal with `width` & `height` attributes
  23. How to override the properties of a CSS class to avoid copying and renaming styles
  24. Continuous CSS rotation animation on hover, animated back to 0deg on hover out
  25. grid-area does not seem to work with the attr function, is this by design?
  26. Custom CSS being overridden by Bootstrap CSS
  27. text overflow ellipsis: avoid word break
  28. Turning off Twitter Bootstrap Navbar Transition animation
  29. using a div to blur an image behind it? [duplicate]
  30. CSS: clean solution to the margin collapse issue when floating an element

Leave a Comment