Skip to main content

Images

Images in CSS can be used in various ways to enhance the visual appeal and functionality of a website.

Ways to Use Images in CSS​

  1. Background Images: You can set images as backgrounds for elements using the background-image property.

    .element {
      background-image: url('image.jpg');
    }

  2. Image Sprites: A single image containing multiple images can be used to reduce HTTP requests, improving performance.

    .icon {
      background-image: url('sprite.png');
      background-position: -20px -10px;
    }

  3. Content Images: The content property can be used to insert images in pseudo-elements like ::before and ::after.

    .element::before {
      content: url('icon.png');
    }

  4. Gradients: CSS also allows you to create gradient backgrounds, which are technically treated like images.

    .element {
      background-image: linear-gradient(to right, red, blue);
    }

  5. Cursor: Custom cursors can be set using images.

    .element {
      cursor: url('cursor.png'), auto;
    }

  6. List Markers: Custom list markers can be set using images.

    ul {
      list-style-image: url('marker.png');
    }

Best Practices​

  1. Optimization: Always use optimized and appropriately sized images to ensure quick loading times and better performance.

  2. Responsive Design: Use CSS properties like background-size and media queries to make images responsive.

  3. Retina Displays: Provide high-resolution images for retina displays using media queries or srcset attributes.

  4. Fallbacks: Always provide a fallback background color or alternative text for better accessibility.

  5. File Formats: Choose the appropriate image format (JPEG, PNG, SVG, etc.) based on the use case.

  6. Lazy Loading: For content images, consider using lazy loading to improve page load performance.

  7. Semantic HTML: For content images that convey meaning, it's better to use the HTML <img> tag with proper alt attributes for accessibility.

  8. Cross-Browser Compatibility: Test image rendering across different browsers to ensure a consistent experience.

  9. CSS Variables: Use CSS variables to easily switch between different images in various contexts.

Examples​

Background Image with Fallback Color​

.element {
  background-image: url('image.jpg');
  background-color: #f4f4f4;  /* Fallback color */
}

High-Resolution Image for Retina Displays​

@media (min-resolution: 192dpi) {
  .element {
    background-image: url('image@2x.jpg');
  }
}

Lazy Loading in HTML​

<img src="image.jpg" alt="Description" loading="lazy">

img properties​

The <img> element in HTML is used to embed images in web pages, and CSS can be applied to these <img> elements to control their appearance and layout.

Common CSS Properties for <img>​

  1. Width and Height: You can set the dimensions of an image.

    img {
      width: 300px;
      height: 200px;
    }

  2. Max-Width and Max-Height: To make images responsive, you can set maximum dimensions.

    img {
      max-width: 100%;
      height: auto;
    }

  3. Border: Add a border around an image.

    img {
      border: 2px solid black;
    }

  4. Border Radius: To create rounded images.

    img {
      border-radius: 50%;
    }

  5. Box Shadow: Add shadows for depth or focus.

    img {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

  6. Object-Fit: Control how an image should be resized within its container.

    img {
      object-fit: cover;
    }

  7. Opacity: Control the transparency of an image.

    img {
      opacity: 0.5;
    }

  8. Transform: Apply 2D or 3D transformations like rotate or scale.

    img {
      transform: rotate(45deg);
    }

  9. Filter: Apply graphical effects like blur or brightness.

    img {
      filter: grayscale(100%);
    }

  10. Display: Control the display type (block, inline, etc.).

    img {
      display: block;
    }

Best Practices​

  1. Aspect Ratio: Maintain the aspect ratio to avoid distortion by using width and height responsibly.

  2. Responsive Design: Use max-width and height: auto for responsive images.

  3. Retina Displays: Provide high-resolution images for retina displays using srcset attributes in HTML.

  4. Accessibility: Always include an alt attribute in the <img> tag for screen readers.

  5. Lazy Loading: Use the loading="lazy" attribute in HTML to improve page load performance.

  6. Optimization: Use optimized and compressed images for faster loading.

  7. Semantic HTML: Use the <figure> and <figcaption> elements when an image needs an associated caption.

Examples​

Responsive Image​

img {
  max-width: 100%;
  height: auto;
}

Rounded Image with Shadow​

img.rounded {
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

Grayscale Image​

img.grayscale {
  filter: grayscale(100%);
}