Previous Next

CSS

CSS Overview Selectors Declarations Rule Sets Comments Reset/Normalize Origin Importance Order Specificity Inheritance Cascade Layers Inline Styles Internal Styles External Styles @import Absolute Units Relative Units Dynamic Viewport Angle Units Time Units Frequency Units: Resolution Units Keywords Color Formats Color Functions & Spaces Background Color Background Image Background Repeat Background Position Background Size Background Attachment Background Shorthand Multiple Backgrounds Linear Gradients Radial Gradients Conic Gradients Font Family Font Size Font Weight Font Style Line Height Text Align Text Decoration Text Transform Letter Spacing Word Spacing Text Shadow Text Wrap Variable Fonts Content Box Padding Box Border Box Margin Box Box Sizing Property Margin Padding Border Outline Box Shadow Block Display Inline Display Inline Block Display Static Position Relative Position Absolute Position Fixed Position Sticky Position Top Element Position Right Element Position Bottom Element Position Left Element Position Z Index Flexbox Box Layout Display Flex Flex Direction Flex Wrap Justify Content Align Items Align Content Gap, Row Gap & Column Gap Flex Grow Flex Shrink Flex Basis Flex Shorthand Order Property Align Self Practical Applications CSS Grid Layout Grid Display Grid Template Columns Grid Template Rows Grid Template Areas Justify Items Grid Auto Columns Justify Self Nested Grids Responsive Web Design Min Width Max Width Orientation Logical Operators Pointer Hover Prefers Color Scheme Fluid Images Flexible Typography Viewport Width Advanced CSS Features Defining variables Using variables Scope & Inheritance of CSS Variables Property Value Fallback Practical Applications :Hover :Active :Focus :Focus Visible :Visited :Link :First Child :Last Child :Nth Child :Nth of Type :Empty :Checked :Disabled :Enabled :Valid :Invalid :Required :Has :Not :Is :Where ::Before Pseudo Element ::After Pseudo Element ::First Letter ::First Line ::Selection ::Marker CSS 2D Transformations CSS 3D Transformations Transform Origin Transform Style Backface Visibility Transition Property Transition Duration Transition Timing Function Transition Delay Transition Shorthand Ease Timing Function Linear Timing Function Ease In Timing Function Ease Out Timing Function Ease In Out Timing Function Cubic Bezier Function Animations (@keyframes) Defining @keyframes Animation Name CSS Animation Duration Animation Timing Function CSS Animation Delay CSS Animation Iteration Count Animations Direction CSS Animation Fill Mode CSS Animation Play State CSS Filter Blur CSS Filter Brightness CSS Filter Contrast() CSS Drop Shadow CSS Grayscale CSS Hue Rotate CSS Invert CSS Opacity CSS Saturate CSS Sepia Mix Blend Mode Background Blend Mode Object Fit & Object Position Scroll Snap Type Scroll Snap Align Scroll Padding Scroll Margin Scroll Triggered Animations JS Variables

Background Size

The background-size property specifies the size of the background image. You can use keywords like auto, cover, and contain, or you can provide specific length or percentage values to control the dimensions of the image. This is essential for responsive design and ensuring your background images look great on all screen sizes.

Example 1: Using the cover Keyword

.container {
  background-image: url('image.jpg');
  /* Scales the image to cover the entire container, may crop the image */
  background-size: cover;
  background-position: center;
  height: 400px;
  border: 1px solid #ccc;
}

Explanation

The cover keyword scales the background image to be as large as possible while still completely covering the container. This may result in some parts of the image being cut off if the aspect ratios of the image and container differ.

Example 2: Using the contain Keyword

.container {
  background-image: url('image.jpg');
  /* Scales the image to be as large as possible without cropping */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 400px;
  border: 1px solid #ccc;
}

Explanation

contain scales the image to the largest size possible where both its width and height can fit inside the container. This ensures the entire image is visible but may result in empty space around the image.

Example 3: Using a Single Length Value

.container {
  background-image: url('image.jpg');
  /* Sets the width of the background to 200px, height is auto */
  background-size: 200px;
  background-repeat: no-repeat;
  height: 300px;
  border: 1px solid #ccc;
}

Explanation

When one length value is provided, it sets the width of the background image, and the height is automatically adjusted to maintain the original aspect ratio.

Example 4: Using Two Length Values

.container {
  background-image: url('image.jpg');
  /* Sets the width to 250px and the height to 150px */
  background-size: 250px 150px;
  background-repeat: no-repeat;
  height: 300px;
  border: 1px solid #ccc;
}

Explanation

Providing two length values allows you to set a specific width and height for the background image. The first value corresponds to the width, and the second to the height.

Example 5: Using Percentages

.container {
  background-image: url('image.jpg');
  /* Sets the background width to 50% of the container's width */
  background-size: 50%;
  background-repeat: no-repeat;
  height: 300px;
  border: 1px solid #ccc;
}

Explanation

Using a single percentage value sets the width of the background image relative to the container's width. The height will be scaled automatically to preserve the aspect ratio.

Example 6: Using Two Percentage Values

.container {
  background-image: url('image.jpg');
  /* Sets the background width to 100% and height to 50% of the container */
  background-size: 100% 50%;
  background-repeat: no-repeat;
  height: 300px;
  border: 1px solid #ccc;
}

Explanation

Two percentage values set the width and height of the background image relative to the container's dimensions. This can be useful for stretching an image to fit a portion of the container.

Example 7: Using auto with a Length Value

.container {
  background-image: url('image.jpg');
  /* Sets the height to 100px and auto-adjusts the width */
  background-size: auto 100px;
  background-repeat: no-repeat;
  height: 300px;
  border: 1px solid #ccc;
}

Explanation

The auto keyword can be used in conjunction with a length value. In this case, the height is fixed at 100 pixels, and the width is automatically calculated to maintain the image's aspect ratio.