Background Size in CSS

This property in CSS is used to set the size of the background image. The image may be positioned left from its natural size, stretched, or constrained to fit in the available space

value used for
auto It is used to set the background-size property to its default value. It is used to display the background-image to its original size.
cover set the origin of the background image to the padding edge in the upper left corner.
contain set the image to the border of the body of the webpage i.e. the absolute upper left corner.
length It is used to set the width and height of the background-image. The first value indicates the width, and the second value indicates the height of the background image in terms of px, pt, em, etc. If any value is not given then it is set to auto.
(ex : background-size: 500px 550px)
percentage It is used to set the width and height in terms of percentage as related to the parent element. The first value indicates the width, and the second value indicates the height of the background image.
(ex : background-size: 80% 75%)
cover It is used to resize the background image to cover a whole container element.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Background Size</title>
  <style>
    div{
      width: 900px;
      height: 500px;
      padding: 10px;
      background: teal url('bg.jpg') no-repeat;
      background-size: auto;
      background-size: 200px;
      background-size: 400px 200px;
      background-size: 100%;
      background-size: cover;
      background-size: contain;
    }
  </style>
</head>
<body>
  <h2>Background Size in CSS</h2>
  <div>
    <p>Doloribus ex recusandae illum, id magnam corporis tempora iusto sunt molestiae amet illo possimus aliquam iste reprehenderit nobis excepturi laborum porro. Nihil fugit, recusandae cum esse vero ea aspernatur officia voluptatem, nesciunt odio explicabo repellendus amet consequuntur quo nostrum velit quis suscipit odit. Nulla eum earum aliquid dolor, esse error maxime voluptatem quis! Expedita itaque exercitationem laudantium quod facere ut, assumenda at voluptas architecto placeat, perspiciatis optio unde! Tempora possimus sint, qui inventore optio ratione sit dolorem voluptates ex eius animi! Ipsa impedit recusandae praesentium similique ut. Accusantium quasi aperiam veritatis hic ea neque a, eos blanditiis, accusamus nulla voluptas, nemo quaerat sint? A veniam incidunt ipsam sit, beatae nihil assumenda? Quis repellendus ipsam quos cumque, numquam voluptatum et. Sapiente ipsa, nesciunt repudiandae labore soluta, hic eius nemo sed odit quisquam molestias enim nam obcaecati veritatis provident sint aperiam asperiores dolor omnis sunt. Magni nulla nesciunt doloribus, porro officiis, at nisi consectetur molestiae beatae, quibusdam omnis magnam eaque quas totam assumenda rerum hic temporibus! Nostrum, est! Ad, fugit! Distinctio nisi in eligendi esse velit sapiente hic. Dolorem quibusdam asperiores excepturi magnam consectetur placeat explicabo, sit, alias eligendi, soluta modi? Beatae culpa quidem ducimus quasi perferendis dolorem, sed consequuntur dolorum quam! Facilis commodi atque totam quam sit esse sed repudiandae vel, quaerat nesciunt! Ducimus totam recusandae aspernatur, quo quae labore ipsum aliquid eaque sint alias repudiandae tempore veniam minus, tenetur iusto fuga? Omnis, voluptates voluptas! Tempora laboriosam maiores, magnam voluptas placeat est eaque vel reiciendis dolorem, ex consequuntur? Enim id voluptas nisi impedit quae ipsam expedita libero repellendus aliquam vero esse ducimus possimus, nesciunt sint tenetur itaque odio necessitatibus sunt nihil animi repudiandae eius? Quos quo neque fugiat harum et facilis fugit voluptatibus vitae quidem nesciunt necessitatibus dignissimos dolor, sunt laborum eum, asperiores beatae eligendi deleniti quisquam dolore nam repellat! Labore, rem dignissimos quod quas dicta illum et laboriosam fugiat voluptatibus laborum distinctio iusto? A nulla eos id assumenda qui atque iure at ipsa totam accusamus sit, fuga debitis ullam repudiandae! Numquam eveniet ullam enim, recusandae nobis odit, nihil illo pariatur libero suscipit in voluptas similique accusamus cum distinctio repellendus autem ea dolores magnam deserunt. Modi error non iusto natus, quae aliquam eaque eos accusamus. Nemo ipsam harum excepturi vitae. Quos facilis cum dolore, quas odit molestias fugit quaerat, accusantium non corporis temporibus suscipit minima enim exercitationem! Beatae sit ullam, veritatis voluptatem, maiores fugit dicta illum dolores, totam natus fugiat fuga non nam. Doloribus non culpa voluptas maxime dolores? Esse commodi quo perspiciatis nostrum! Dolorem necessitatibus quia blanditiis consequatur doloribus dignissimos. Id aut explicabo, nihil corporis iure laudantium expedita suscipit magnam quisquam molestias doloribus fuga reiciendis porro itaque recusandae fugiat voluptas sapiente aliquid inventore illo. Illum, debitis! Temporibus nobis recusandae quo molestias quaerat adipisci error! Officia sit, quas, facere dolor tenetur sunt recusandae velit, ipsam obcaecati a autem similique reiciendis ab? Odio atque deleniti optio, et explicabo voluptatibus, nam placeat rem voluptate in ut iure facilis voluptatem amet ea eum accusamus aliquid. Eius.</p>
  </div>
</body>
</html>

Output

Background Attachment
Live Preview


CSS Tutorial

Properties Reference

Cascading Style Sheet

Flexbox Tutorial

CSS Grid Tutorial

Transitions Properties

CSS Properties with Examples

CSS Selectors

CSS Pseudo Elements

CSS Attribute Selectors

Input Pseudo Classes

CSS Examples

CSS Animation Projects

Learn All in Tamil © Designed & Developed By Tutor Joes | Privacy Policy | Terms & Conditions