DEV Community


Posted on

CSS tutorial series: Styling Images

Images are an important part of a web page, which is why it is crucial to know how styling images is done since it can impact the way they appear on your web page.

There are various CSS properties which help you style images.

how to center an image?

You can center an image by selecting it and setting both margin-right and margin-left to auto and giving it a width of 50%. The display value of an image is inline by default so do not forget to change it to block.

img {
  display: block;
  margin: 0 auto;
  width: 50%;
Enter fullscreen mode Exit fullscreen mode

Opacity on an image

We can use the property opacity on an image to define the transparency of your image as seen in the example below.

How to make an image fit in its container?

As seen previously in the example below, we've used object fit to fit an image in its container using object-fit property.

Property Values
object-fit fill, contain, cover, none, scale-down
  • The fill property value is the default which either will stretch or be squished or even resized to fit specified dimensions.

  • The contain property will resize the image to fit within the specified dimension while maintaining its aspect ratio.

  • The cover property value will clip the image to fit and fill the specified dimensions while preserving its aspect ratio.

  • The none property value will not resize the image.

  • The scale-down property value will size down your image between the none and contain property values.

img {
  opacity: 0.5;
Enter fullscreen mode Exit fullscreen mode

Object position

With the object-fit property comes a long the object-position property which helps you display the part of the image that you want for example.

img {
 height: 300px;
 width: 300px;
 object-fit: cover;
Enter fullscreen mode Exit fullscreen mode

Background images

By using the background-image property we can add a background image to a <div>. This property can sets one or multiple images as a background for an element.

div {
  background-image: url("image.jpg");
Enter fullscreen mode Exit fullscreen mode

This property comes with a handful of other properties such as:

background-repeat, background-position, background-size, and background-attachement.

  • The background-position property specifies the starting point of the background-image property. This property has multiple values
top left, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom, x-axis position, y-axis position, x%, y%, initial, inherit
  • The background-repeat property specifies if the background image will be repeated.
repeat, repeat-x, repeat-y, no-repeat, initial, inherit
  • The background-size property defines the size of the background image.
auto, length, cover, contain, initial, inherit
  • The background-attachement property specifies if a background scrolls along the page of is fixed.

Top comments (0)

Super Useful CSS Resources

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.