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 Position

The background-position property in CSS is used to set the initial position of a background image. You can use keywords like top, bottom, left, right, and center, or you can specify the position with length values or percentages. This allows for precise control over where the background image appears within its container.

Example 1: Using Keywords

.container {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  /* Positions the background image at the top right corner */
  background-position: top right;
  height: 300px;
  border: 1px solid #ccc;
}

Explanation

This code positions the background image at the top right corner of the element with the class .container. The keywords top and right are explicit and easy to understand for alignment.

Example 2: Using a Single Keyword

.container {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  /* Positions the background image at the horizontal center */
  background-position: center;
  height: 300px;
  border: 1px solid #ccc;
}

Explanation

When a single keyword is used, the other value is assumed to be center. In this case, center sets the image to be horizontally and vertically centered.

Example 3: Using Length Values (pixels)

.container {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  /* Positions the background 50px from the left and 20px from the top */
  background-position: 50px 20px;
  height: 300px;
  border: 1px solid #ccc;
}

Explanation

This example uses pixel values to position the background image. The first value (50px) represents the horizontal offset from the left edge, and the second value (20px) is the vertical offset from the top edge.

Example 4: Using Percentages

.container {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  /* Positions the background 25% from the left and 75% from the top */
  background-position: 25% 75%;
  height: 300px;
  border: 1px solid #ccc;
}

Explanation

Percentages are a flexible way to position a background image. A value of 25% 75% means that the point at 25% of the width and 75% of the height of the image is placed at the corresponding point within the container.

Example 5: Mixing Keywords and Length Values

.container {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  /* Positions the background at the horizontal center and 30px from the top */
  background-position: center 30px;
  height: 300px;
  border: 1px solid #ccc;
}

Explanation

You can combine keywords and length values for more specific positioning. Here, the background is horizontally centered and vertically positioned 30 pixels from the top.

Example 6: Using Four Values

.container {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  /* Positions the background 20px from the right and 10px from the bottom */
  background-position: right 20px bottom 10px;
  height: 300px;
  border: 1px solid #ccc;
}

Explanation

The four-value syntax provides explicit offsets from the specified edges. This code places the background image 20 pixels from the right edge and 10 pixels from the bottom edge of the container.

Example 7: Animating background-position

.container {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: left center;
  height: 300px;
  border: 1px solid #ccc;
  transition: background-position 2s ease-in-out;
}

.container:hover {
  /* Moves the background to the right on hover */
  background-position: right center;
}

Explanation

The background-position property can be animated to create dynamic effects. In this example, hovering over the container smoothly transitions the background image from the left to the right over two seconds.