- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS - background-size Property
The background-size CSS property is used in setting the size of the background image of the element. The background image can either be stretched, constrained or left to its normal size.
The background-color property fill the spaces that are not covered by the background image. In case the background image is transparent or translucent, the background color will be visible.
Possible Values
contain: Sets the size of the image as large as possible to fit the container without cropping or stretching.
cover: Sets the size of the image to smallest possible size to fit the container without leaving an empty space, while preserving the image's ratio.
auto: Sets the size of the image such that the intrinsic proportions of the image are maintained.
<length>: Based on the specified length value, the image is stretched in the corresponding direction. Negative values are invalid.
<percentage>: Based on the specified percentage of background positioning area, the image is stretched in the corresponding direction. The background positioning area is determined by the value of background-origin. Negative values are invalid.
In order to specify the sizes for multiple background images, you should separate the values for each using a comma.
On the basis of intrinsic dimensions and proportions of the background image, its rendered size is computed in the following manner:
When both components of background-size are specified and the value is not auto: Background image is rendered as per the specified size.
When the value of background-size is contain or cover:
Background image is rendered at the largest size contained in or covering the background positioning area, while preserving the intrinsic proportions.
Background image is rendered at the size of the background positioning area, when the image has no intrinsic proportions.
When background-size is auto or auto auto:
When image has both horizontal and vertical intrinsic dimensions, the image is rendered at the specified size.
When image has no intrinsic dimensions or proportions, it is rendered at the size of background positioning area.
When image has no intrinsic dimensions, but has intrinsic proportions, it is rendered as per the value of contain.
When image has one intrinsic dimension and has intrinsic proportions, it is rendered at the size as per the one dimension. Other dimension is calculated based on the one dimension and the intrinsic proportions.
When image has one intrinsic dimension and no intrinsic proportions, it is rendered as per the one dimension and other dimension of the background positioning area.
When background-size has one auto component and one non-auto component:
When the image has intrinsic proportions, it is stretched based on the specified dimension. The dimension that is not specified is calculated using the specified dimension and the intrinsic proportions.
When the image has no intrinsic proportions, it is stretched based on the specified dimension. The dimension that is not specified is calculated using the intrinsic dimension, if specified; else it is set to the corresponding dimension of the background positioning area.
Applies to
All the HTML elements.
DOM Syntax
object.style.backgroundSize = "cover | contain | auto | <length> | <percentage>"
CSS background-size - <length> Value
The following example demonstrates the background-size: 150px property sets the size of the background image to 150px −
<html> <head> <style> .size-length { background-image: url('images/pink-flower.jpg'); background-size: 150px; background-clip: padding-box; width: 300px; height: 300px; border: 5px dashed; color: rgb(25, 6, 75); padding: 5px; } </style> </head> <body> <div class="size-length"></div> </body> </html>
CSS background-size - <percentage> Value
The following example demonstrates the background-size: 90% property sets the size of the background image to 90% −
<html> <head> <style> .size-percent { background-image: url('images/pink-flower.jpg'); background-repeat: no-repeat; background-size: 90%; background-clip: content-box; width: 300px; height: 300px; border: 5px dashed; color: rgb(25, 6, 75); padding: 5px; } </style> </head> <body> <div class="size-percent"></div> </body> </html>
CSS background-size - contain Value
The following example demonstrates the background-size: contain property sets the size of the image as large as possible to fit the container without cropping or stretching −
<html> <head> <style> .size-contain { background-image: url('images/pink-flower.jpg'); background-size: contain; background-clip: content-box; width: 300px; height: 300px; border: 5px dashed; color: rgb(25, 6, 75); padding: 5px; } </style> </head> <body> <div class="size-contain"></div> </body> </html>
CSS background-size - cover Value
The following example demonstrates the background-size: cover property sets the size of the image to smallest possible size to fit the container without leaving an empty space −
<html> <head> <style> .size-cover { background-image: url('images/pink-flower.jpg'); background-size: cover; background-clip: border-box; width: 300px; height: 300px; border: 5px dashed; color: rgb(25, 6, 75); padding: 5px; } </style> </head> <body> <div class="size-cover"></div> </body> </html>
CSS background-size - auto Value
The following example demonstrates the background-size: auto property automatically sets size of the image to maintained intrinsic proportions of the image −
<html> <head> <style> .size-auto { background-image: url('images/pink-flower.jpg'); background-size: auto; width: 300px; height: 300px; border: 5px dashed; color: rgb(25, 6, 75); padding: 5px; } </style> </head> <body> <div class="size-auto"></div> </body> </html>
CSS background-size - <length> <length> Value
The following example demonstrates the background-size: 500px 150px property sets the size of the background image to 500px wide and 150px high −
<html> <head> <style> .size-auto { border: 2px solid black; padding: 25px; background: url('images/scenery2.jpg'); background-repeat: no-repeat; background-size: auto; width: 100%; margin-bottom: 5px; } .size-length { border: 2px solid black; padding: 25px; background: url('images/scenery2.jpg'); background-repeat: no-repeat; background-size: 500px 150px; color: white; } </style> </head> <body> <div class="size-auto"> <h2>Background-size: auto</h2> <p>The background image is displayed in its original size.</p> </div> <div class="size-length"> <h2>background-size:500px 150px</h2> <p>The background image is set to 500px wide and 150px high.</p> </div> </body> </html>
CSS background-size - With Multiple Image
The following example demonstrates how to set the size of the background when multiple background images are present −
Here is an example with multiple images−
<html> <head> <style> .multiple-images { border: 2px solid black; padding: 25px; background: url('images/logo.png'), url('images/scenery2.jpg'); background-repeat: no-repeat; background-size: 400px 200px, cover; width: 500px; height: 200px; } </style> </head> <body> <div class="multiple-images"></div> </body> </html>
To Continue Learning Please Login
Login with Google