---
title: CSS Арын зураг
description: "> ## CSS background-image > > > > `background-image` шинж чанар нь элементийн дэвсгэр болгон ашиглах зургийг зааж өгдөг. > > > > Үндсэн тохиргооггоор зураг давтагддаг тул элементийг бүхэлд нь хамардаг. ### Жишээ Хуудасны арын зургийг тохируулах: `body {…"
url: "https://apprentice.mn/docs/css-background-image/"
updated: "2021-07-23"
category: CSS
---

# CSS Арын зураг

> ## CSS background-image
>
>
>
> `background-image` шинж чанар нь элементийн дэвсгэр болгон ашиглах зургийг зааж өгдөг.
>
>
>
> Үндсэн тохиргооггоор зураг давтагддаг тул элементийг бүхэлд нь хамардаг.

### Жишээ

Хуудасны арын зургийг тохируулах:

     `body {
  background-image: url("paper.gif");
}`

Энэ жишээ нь текст болон арын зургийн муу хослолыг харуулж байна. Текстийг бараг унших боломжгүй байна.

     `body {
  background-image: url("bgdesert.jpg");
}`

**Тэмдэглэл**: Арын дэвсгэр зургийг ашиглахдаа текстэнд саад болохгүй зургийг ашиглана уу.

Арын зургийг мөн адил тодорхой элементүүдэд тохируулж болно:

      `p {
  background-image: url("paper.gif");
}`        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-background-image%2F&linkname=CSS%20%D0%90%D1%80%D1%8B%D0%BD%20%D0%B7%D1%83%D1%80%D0%B0%D0%B3](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-background-image%2F&linkname=CSS%20%D0%90%D1%80%D1%8B%D0%BD%20%D0%B7%D1%83%D1%80%D0%B0%D0%B3)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-background-image%2F&linkname=CSS%20%D0%90%D1%80%D1%8B%D0%BD%20%D0%B7%D1%83%D1%80%D0%B0%D0%B3](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-background-image%2F&linkname=CSS%20%D0%90%D1%80%D1%8B%D0%BD%20%D0%B7%D1%83%D1%80%D0%B0%D0%B3)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-background-image%2F&linkname=CSS%20%D0%90%D1%80%D1%8B%D0%BD%20%D0%B7%D1%83%D1%80%D0%B0%D0%B3](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-background-image%2F&linkname=CSS%20%D0%90%D1%80%D1%8B%D0%BD%20%D0%B7%D1%83%D1%80%D0%B0%D0%B3)[https://www.addtoany.com/share](https://www.addtoany.com/share)