---
title: CSS Арын товчлол
description: "> ## CSS background – товчлол Кодыг богиносгохын тулд бүх арын шинж чанаруудыг нэг шинж чанараар зааж өгөх боломжтой. Үүнийг стенограф шинж чанар гэж нэрлэдэг. Бичиж байхын оронд: `body { background-color: #ffffff; background-image: url(\"img_tree.png\"); background-repeat: no-repeat; background-position: right top; }`…"
url: "https://apprentice.mn/docs/css-background-shorthand/"
updated: "2021-07-23"
category: CSS
---

# CSS Арын товчлол

> ## CSS background – товчлол

Кодыг богиносгохын тулд бүх арын шинж чанаруудыг нэг шинж чанараар зааж өгөх боломжтой. Үүнийг стенограф шинж чанар гэж нэрлэдэг.

Бичиж байхын оронд:

     `body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}`

Та товчлолын шинж чанарыг ашиглаж болно: `background`:

Богино шинж чанарыг ашиглан нэг мэдэгдэлд арын шинж чанарыг тохируулна уу.

      `body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}`

Товчлолын шинж чанарыг ашиглахдаа шинж чанарын дараалал нь:

- `background-color`
- `background-image`
- `background-repeat`
- `background-attachment`
- `background-position`

Бүх CSS арын шинж чанарууд

| шинж чанарууд | Тайлбар |
| --- | --- |
| background | Бүх арын шинж чанарыг нэг мэдэгдэлд тохируулна |
| background-attachment | Арын дэвсгэр зургийг засах эсвэл хуудасны үлдсэн хэсгийг гүйлгэх эсэхийг тохируулна |
| background-clip | Арын дэвсгэрийн будгийн хэсгийг тодорхойлно |
| background-color | Элементийн дэвсгэр өнгийг тохируулна |
| background-image | Элементийн арын зургийг тохируулна |
| background-origin | Арын дэвсгэр зураг (ууд) хаана байрлаж байгааг тодорхойлно |
| background-position | Арын зургийн эхлэх байрлалыг тохируулна |
| background-repeat | Арын зургийг хэрхэн давтахыг тохируулна |
| background-size | Арын дэвсгэр зургийн хэмжээг тодорхойлно |

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-background-shorthand%2F&linkname=CSS%20%D0%90%D1%80%D1%8B%D0%BD%20%D1%82%D0%BE%D0%B2%D1%87%D0%BB%D0%BE%D0%BB](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-background-shorthand%2F&linkname=CSS%20%D0%90%D1%80%D1%8B%D0%BD%20%D1%82%D0%BE%D0%B2%D1%87%D0%BB%D0%BE%D0%BB)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-background-shorthand%2F&linkname=CSS%20%D0%90%D1%80%D1%8B%D0%BD%20%D1%82%D0%BE%D0%B2%D1%87%D0%BB%D0%BE%D0%BB](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-background-shorthand%2F&linkname=CSS%20%D0%90%D1%80%D1%8B%D0%BD%20%D1%82%D0%BE%D0%B2%D1%87%D0%BB%D0%BE%D0%BB)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-background-shorthand%2F&linkname=CSS%20%D0%90%D1%80%D1%8B%D0%BD%20%D1%82%D0%BE%D0%B2%D1%87%D0%BB%D0%BE%D0%BB](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-background-shorthand%2F&linkname=CSS%20%D0%90%D1%80%D1%8B%D0%BD%20%D1%82%D0%BE%D0%B2%D1%87%D0%BB%D0%BE%D0%BB)[https://www.addtoany.com/share](https://www.addtoany.com/share)