---
title: CSS арын давтамж
description: "> ## CSS арын давталт Үндсэн тохиргоогоор,  `background-image` нь дүрсийг хэвтээ ба босоо байдлаар давтана. Зарим зургийг зөвхөн хэвтээ эсвэл босоо байдлаар давтах ёстой, эс тэгвэл хачин харагдана. `body { background-image: url(\"gradient_bg.png\"); }` Хэрэв дээрх зургийг зөвхөн хэвтээ байдлаар давтвал…"
url: "https://apprentice.mn/docs/css-background-repeat/"
updated: "2021-07-23"
category: CSS
---

# CSS арын давтамж

> ## CSS арын давталт

Үндсэн тохиргоогоор,  `background-image` нь дүрсийг хэвтээ ба босоо байдлаар давтана.

Зарим зургийг зөвхөн хэвтээ эсвэл босоо байдлаар давтах ёстой, эс тэгвэл хачин харагдана.

     `body {
  background-image: url("gradient_bg.png");
}`

Хэрэв дээрх зургийг зөвхөн хэвтээ байдлаар давтвал (`background-repeat: repeat-x;`),арын дэвсгэр нь илүү сайн харагдах болно

     `body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}`

Зөвлөгөө: Зургийг босоо байдлаар давтахын тулд`background-repeat: repeat-y;` тохируулна.

---

## CSS арын дэвсгэр-давталт: давтахгүй

Арын зургийг зөвхөн нэг удаа харуулахыг хүсвэл`background-repeat` ашиглана:

Арын зургийг зөвхөн нэг удаа харуулах:

      `body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}`

Дээрх жишээнд дэвсгэр зургийг тексттэй ижил газарт байрлуулсан болно. Бид зурагны байрлалыг өөрчлөхийг хүсч байгаа бөгөөд ингэснээр текстэнд хэт их саад учруулахгүй байх болно.

---

## CSS background-position

`background-position` нь арын зургийн байрлалыг тодорхойлоход ашиглагддаг.

Арын зургийг баруун дээд буланд байрлуулах.

      `body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}`        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-background-repeat%2F&linkname=CSS%20%D0%B0%D1%80%D1%8B%D0%BD%20%D0%B4%D0%B0%D0%B2%D1%82%D0%B0%D0%BC%D0%B6](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-background-repeat%2F&linkname=CSS%20%D0%B0%D1%80%D1%8B%D0%BD%20%D0%B4%D0%B0%D0%B2%D1%82%D0%B0%D0%BC%D0%B6)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-background-repeat%2F&linkname=CSS%20%D0%B0%D1%80%D1%8B%D0%BD%20%D0%B4%D0%B0%D0%B2%D1%82%D0%B0%D0%BC%D0%B6](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-background-repeat%2F&linkname=CSS%20%D0%B0%D1%80%D1%8B%D0%BD%20%D0%B4%D0%B0%D0%B2%D1%82%D0%B0%D0%BC%D0%B6)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-background-repeat%2F&linkname=CSS%20%D0%B0%D1%80%D1%8B%D0%BD%20%D0%B4%D0%B0%D0%B2%D1%82%D0%B0%D0%BC%D0%B6](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-background-repeat%2F&linkname=CSS%20%D0%B0%D1%80%D1%8B%D0%BD%20%D0%B4%D0%B0%D0%B2%D1%82%D0%B0%D0%BC%D0%B6)[https://www.addtoany.com/share](https://www.addtoany.com/share)