CSS Background-size Property - Dofactory

• SQL SQL Tutorial SQL Reference Connection Strings
• .NET C# Design Patterns C# Coding Standards C# Code Examples Visual Studio Shortcut Keys
• HTML HTML Tutorial HTML Reference
• CSS CSS Tutorial CSS Reference
• JavaScript JavaScript Tutorial JavaScript Design Patterns

• SQL
• .NET
• HTML
• CSS
• JavaScript

Select tutorial

× Sql Tutorial Sql Reference Connection Strings

Select tutorial

× C# Design Patterns C# Coding Standards C# Code Examples Visual Studio Shortcut Keys

Select tutorial

× HTML Tutorial HTML Reference

Select tutorial

× CSS Tutorial CSS Reference

Select tutorial

× JavaScript Tutorial JavaScript Design Patterns CSS Reference CSS Reference CSS Properties CSS Selectors CSS Length CSS Entities CSS Functions CSS Default Values CSS Properties align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iter-count animation-name animation-play-state animation-timing-fn backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-rad border-bottom-right-ra border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radiu border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-kerning font-size font-stretch font-style font-variant font-weight gap grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows height hyphens @import justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes right row-gap scroll-behavior table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-fn user-select vertical-align visibility white-space width word-break word-spacing word-wrap writing-mode z-index Back to CSS Select Tutorial

• HTML Tutorial
• HTML Reference
• CSS Tutorial
• CSS Reference
• SQL Tutorial
• SQL Reference
• JavaScript Tutorial
• JavaScript Patterns
• C# Design Patterns
• C# Coding Standards
• Connection Strings
• Visual Studio Shortcuts

Earn income with your CSS skills Sign up and we'll send you the best freelance opportunities straight to your inbox. We're building the largest freelancing marketplace for people like you. Send Me Opportunities By adding your name & email you agree to our terms, privacy and cookie policies. CSS background-size CSS background-repeat CSS border

The background-size property sets the background image size.

It accepts two values: width and height.

Example

#

A resized background image using background-size.

<style> .withbg { background-image: url("/img/css/cardplayers.jpg"); background-repeat: no-repeat; background-size: 200px 150px; height: 200px; } </style> <div class="withbg"></div> Try it live Tip: It's recommended to use the exact image size instead of resizing with CSS to reduce the page loading time and resources used.

Using background-size

#

background-size accepts 2 values: the width and the height.

Values are set as length units, such as, px, %, em, and others.

If only one value is provided, it will be used as both width and height.

Multiple background sizes can also be specified for multiple images.

background-repeat border

Syntax

#

background-size: auto | length | cover | contain | initial | inherit;

Values

#

Value	Description
auto	Default. Displays background image original size.
length	Sets width (first value) and height (second value) of background image. If the second value is not given, it will be set to auto.
percentage	Sets width (first value) and height (second value) of background image in percent. If the second value is not given, it will be set to auto.
cover	Stretch or crop background image to cover the entire container.
contain	Resize background image to make it fully visible.
initial	Sets the value to its default value.
inherit	Inherits the value from its parent element.

More Examples

#

Click the buttons to see the different background-size values.

auto length: 200px 180px percentage: 65% cover contain initial inherit

<style> .bg-example { background-image: url("/img/css/cardplayers.jpg"); background-repeat: no-repeat; background-size: contain; height: 300px; } </style> <div class="bg-example"></div> Try it live

Browser support

#

This table shows when background-size support started for each browser.

Chrome	4.0	Jan 2010
Firefox	4.0	Mar 2011
IE/Edge	9.0	Mar 2011
Opera	10.5	Mar 2010
Safari	3.0	Jun 2007

You may also like

#

• Our CSS background-repeat Property Reference
• Our CSS background-position Property Reference
• Our HTML Background Images Tutorial

background-repeat border Jack Poorte Last updated on Sep 30, 2023 Earn income with your CSS skills Sign up and we'll send you the best freelance opportunities straight to your inbox. We're building the largest freelancing marketplace for people like you. Send Me Opportunities By adding your name & email you agree to our terms, privacy and cookie policies. Feedback Guides

• CSS Tutorial
• CSS Selectors
• CSS Borders

• CSS Flex
• CSS Grid
• CSS Tables

• CSS Length
• CSS Fonts
• CSS Animation

• CSS Hover
• CSS Images
• CSS Comments

On this page

• CSS background-size
• Example
• Using
• Syntax
• Values
• More Examples
• Browser support
• You may also like