background

با استفاده از ویژگی background می توان همه ویژگی های مربوط به پس زمینه عنصر را در یک جا بصورت خلاصه تعیین کرد.

به عنوان مثال می توان نوشت:

 

div {
  background: url(something.png) deepPink center center padding-box border-box;
}

 

اگر در زمان استفاده از background فقط تعدادی از ویژگی های مربوط به پس زمینه را تعیین کنیم. این ویژگی باعث می شود تا مقادیر تمام ویژگی هایی که مقدار نگرفته اند به مقدار initial خود ریست شوند.

فرض کنید داشته باشیم:

 

.element {
  background: fixed;
}

 

این بدین معنی است که تمام ویژگی های دیگر مربوط به پس زمینه عنصر به مقدار اولیه شان ریست می شوند. یعنی عبارت بالا برابر با این خواهد بود:

 

.element {
  background-color: transparent;    /* initial value */
  background-position: 0% 0%;       /* initial value */
  background-size: auto auto;       /* initial value */
  background-repeat: repeat repeat; /* initial value */
  background-clip: border-box;      /* initial value */
  background-origin: padding-box;   /* initial value */
  background-attachment: fixed;     
  background-image: none;           /* initial value */
}

 

ترتیب نوشتن ویژگی ها می تواند متفاوت باشد. مثلا می تواند بصورت زیر باشد:

 

background: background-image background-position background-size background-repeat background-attachment background-origin background-clip background-color;

 

نکته مهمی که باید توجه کنیم این است که background-size حتما باید بعد از background-position باشد و حتما باید یک اسلش بین آنها قرار بگیرد:

 

.element {
  background: #eee url(path/to/image.jpg) top 50% / contain fixed no-repeat;

  /* background-position: top 50%; */
  /* background-size: contain; */
}

 

مثل دیگر ویژگی های مربوط به پس زمینه از طریق این ویژگی مختصر نویسی نیز می توان چندین لایه پس زمینه برای یک عنصر مشخص کرد, کافی است لایه ها را توسط ویرگول از هم جدا کنیم.

تنها نکته ای باید مراقب باشیم این است که چون عنصر فقط می توان یک background-color داشته باشد، زمانی که چند لایه پس زمینه تعریف می کنیم مقدار مربوط به رنگ پس زمینه را باید در لایه آخر مشخص کنیم.

 

background: url(images/bee.png) 0 0 / contain no-repeat,
            url(images/flower-bg.jpg) 0 / contain no-repeat,
            url(images/pattern.png) space red
            ;

 

همانطور که مشاهده می کنید رنگ قرمز فقط در لایه آخر تعریف شده است در غیر این صورت دستور صحیح نیست.

 

همانطور که می دانید مقادیر background-clip و background-origin یکسان و مشابه می باشند. حال اگر در زمان مختصر نویسی مثلا فقط یک مقدار padding-box تعریف کنیم، مربوط به کدام یک از این ویژگی ها خواهد بود؟

اگر فقط یک مقدار تعریف شود آن مقدار برای هر دو ویژگی تنظیم می شود و اگر دو مقدار تعریف شود مقدار اول مربوط به background-origin و مقدار دوم مربوط به background-clip خواهد بود.

 

.element {
  background: #eee url(image.jpg) top 50% / contain fixed no-repeat border-box;
}

 

این مثال برابر است با:

 

.element {
  background-image: url(image.jpg);
  background-color: #eee;
  background-position: top 50%;
  background-size: contain;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-origin: border-box;
  backgrounnd-clip: border-box;
}

 

دموی زیر را بررسی کنید:

 

See the Pen background by Mojtaba Seyedi (@seyedi) on CodePen.