Background Origin in CSS

This property is used to set the origin of the image in the background. By default, this property sets the background image origin to the upper-left corner of the screen/webpage.

value	used for
initial	setting the background origin to the padding edge in the upper left corner.
padding-box	set the origin of the background image to the padding edge in the upper left corner.
border-box	set the image to the border of the body of the webpage i.e. the absolute upper left corner.
content-box	set the origin of the background according to the content of the division/body wherever the property is being used.

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 Origin</title>
  <style>
    body{
      background: aliceblue;
    }
    div{
      background-color: #fff;
      width: 800px;
      height: 600px;
      padding:25px;
      border: 20px dashed black;
      background-image: url('bg.jpg');
      background-origin: padding-box;

      background-repeat: no-repeat;
      background-origin: content-box;

      background-origin: border-box  ;
    }
  </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 Origin in CSS

Source Code :

Output

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