OBINTUSACADEMY
HOME CONTACT SERVICES PRIVACY
C.B MS-PACKAGES CSS
CSS - Background Size

BASIC

Introduction to CSS Getting Started CSS Basic Structure CSS Syntax CSS Selectors CSS Universal Selector CSS Element Selector CSS ID Selector CSS Class Selector CSS Group Selector CSS Descendant Selector CSS Child Selector CSS Adjacent Sibling Selector CSS General Sibling Selector CSS Pseudo Element Selector CSS Pseudo Class Selector CSS Attribute Selector CSS Comments CSS Rule CSS Colors CSS Foreground and Background Color CSS Fonts CSS Background CSS Background Clip CSS Background Origin CSS Background Size CSS Text/Word Formatting CSS Images

INTERMEDIATE

CSS Borders CSS Margin CSS Padding CSS Dimension CSS Outline CSS Lists CSS Tables CSS Links CSS Overflow CSS Cursor CSS Float CSS Clear CSS Box Sizing CSS Display CSS Positioning CSS Z-Indexing CSS Opacity CSS Icons CSS Media Queries

ADVANCE

CSS Multiple Backgrounds CSS Gradient CSS Shadow CSS 2D Transform CSS 3D Transform CSS Transition CSS Animation CSS Image Reflection CSS Masking CSS Navigation Bar CSS Dropdown CSS !important CSS Specificity CSS Math Functions CSS Web Fonts CSS Pagination CSS Multiple Columns CSS Resizing and Offset CSS Variables CSS Conclusion

CSS Background Size

PREVIOUS NEXT

In this tutorial, I will be showing you all you need to know about background-size property in CSS.

The background-size property is used set the size of the background image.

Example

TRY IT OUT YOURSELF

Property Values

  • contain - This value is used to make the background image fully visible inside the element's container.
    • TRY IT OUT YOURSELF
  • cover - This value is used to make the background image to occupy or cover the entire element's container. Using this value, the image might stretch or cut off some edges while resizing.
    • TRY IT OUT YOURSELF
  • auto - This value is used to make the background image maintain its original size even if it doesn't cover the entire element's container. (Default Value)
    • TRY IT OUT YOURSELF
  • initial - This sets the property value to the default value.
  • inherit - This sets the property value to the parent element value.
  • absolute and relative unit values - These can also be used to set background size.
    • TRY IT OUT YOURSELF
    TRY IT OUT YOURSELF
    note
    NOTE:

    The first value sets the width, while the second value sets the height. If only one value is specified, the height value will be set to auto.

PREVIOUS NEXT
ADVERTISEMENTS

LEARNING IS A CONTINOUS PROCESS - PRACTICE MAKES PERFECT