100% width background image with an 'auto' height

html

responsive-design

background-image

css-tricks

byNikita Barsukov·Nov 20, 2024

Want a responsive background-image in CSS with full width and adaptable height? Use the background-size: cover property. It resizes the image to cover the entire container, proportionally. Plus, set background-repeat: no-repeat to prevent the image from repeating itself. The use of height: auto is redundant as cover inherently manages height relative to the width.

Here is a simple implementation:

.bg-cover {
  /* This comment gone to space 🚀 */
  background-image: url('your/path/to/image.jpg'); 
  background-size: cover; /* Expands like Uncle Bob's waistline at Thanksgiving */
  background-repeat: no-repeat; /* Because nobody likes dejavù */
}

You just need to replace 'your/path/to/image.jpg' with your image path and assign .bg-cover class to the desired container.

Achieving a consistent aspect ratio

Maintaining a consistent aspect ratio can sometimes pose a challenge. Here is a neat trick: use height: 0 and padding-bottom. The percentage value for padding is calculated based on the image's aspect ratio.

Media queries for the win

You can use media queries to serve different background-images depending on the screen resolution. This helps optimize page load time and maintain image quality on various devices.

Smarter choice with srcset

For greater control over responsive images, leverage the srcset attribute of the img element. It allows the browser to choose from multiple sources depending on screen size and DPI, serving the best image for the situation.

More ways to perfecting backgrounds

Being JavaScript free

Opt for CSS over JavaScript solutions when possible. Apart from making your code simpler, this also ensures faster page load times.

Catering to high-resolution displays

For crisp images on high-DPI devices, specify @2x or @3x versions. These high-resolution variants can be defined within your media queries or srcset.

Keeping the container clean

Avoid any padding or margin on the container having the background image to maintain the full-width view.

Keeping aspect ratio in check

The div height might need to scale proportionally with the background image, keeping the aspect ratio constant. This fine-tuning allows for consistency across different screen sizes.

explain-codes / Html / 100% width background image with an 'auto' height

Linked

How to stretch the background image to fill a div



Resize image proportionally with CSS?



Changing image sizes proportionally using CSS



How to create a responsive image that also scales up in Bootstrap 3



Css background image to fit width, height should auto-scale in proportion

