Stretch background image CSS?

html

responsive-design

css

best-practices

byAlex Kataev·Oct 27, 2024

Want to properly stretch a background image using CSS? Bingo! You have two quick options to get the job done:

background-size: cover; to maintain the image's aspect ratio
background-size: 100% 100%; to fit exactly to the formal dimensions of the element.

Now, let's dive into the magic land of CSS Snippet:

.element {
  background-image: url('image.jpg'); /* Specify the path of your magestic image */
  background-size: cover; /* Like a magical cloak! Keeps aspect ratio intact */
  /* OR */
  background-size: 100% 100%; /* Stretch armstrong style! Fits exactly to size */
  background-repeat: no-repeat; /* Break the loop cycle! Prevents image tiling */
  background-position: center; /* Hold the center! Aligns the image centrally */
}

Ensure width and height are 100% for cover to work efficiently. Also, store images in an organized folder to prevent future headaches.

Taking control of the stretch

Ensuring browser compatibility

We are gentle folks, we do not discriminate among browsers:

.element {
  background: url('image.jpg') no-repeat center; /* Everyone loves a centered background */
  -webkit-background-size: cover; /* For the Slick Chrome and Classy Safari */
  -moz-background-size: cover;    /* For our dear Firefox */
  -o-background-size: cover;      /* Opera is also invited to the party */
  background-size: cover;         /* For others, no CSS rule behind! */
}

Cross-verify compatibility at the ever-helpful Can I use.

Embracing the Internet explorer's identity

For those who are still lingering with the classic Internet Explorer:

.element {
  background-image: url('image.jpg');
  background-size: cover; /* Took care of modern browsers, yay! */
  
  /* Fallback for the Classic IE */
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg', sizingMethod='scale'); /* Just IE things */
  zoom: 1; /* IE has its own little kingdom */
}

Dealing with responsive design and overlaying content

We all love responsive designs and overlaying content. Here's how we handle these:

Min-height approach: Let the content understand who's boss, it doesn't dictate the size of the image.
CSS pseudo-element usage: Maintains HTML structure purity.
Overflow control: overflow: hidden, to manage unruly content crossing borders.

Going old school: img tag route

Sometimes, going old school with img tag is the way to go:

<div class="bg-container">
  <img src="image.jpg" class="bg-image" alt="Background image"> <!-- Our good old img tag -->
  <div class="content"> /* Your meaningful content here... */ </div>
</div>

.bg-container {
  position: relative;
}
.bg-image {
  position: absolute; /* Takes the space it deserves, awesomely */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;  
}