Paggamit ng Background ng CSS

CSS background-repeat

Sa normal na kalagayan,background-image Ang atributo ay pinapatuloy sa horizontal at vertical na direksyon ng imahen.

Ang ilang imaheng dapat lamang magpalit sa horizontal o vertical, kung hindi, sila ay magiging kakaiba, tulad nito:

Example

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

Try It Yourself

Kung ang imaheng ito ay pinapatuloy lamang sa horizontal (background-repeat: repeat-x;) sa ganito, ang background ay mas maganda:

Example

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

Try It Yourself

Mga Babala:Kung gusto mong magpalit ng imaheng pinapatuloy sa vertical, i-set mo: background-repeat: repeat-y;。

CSS background-repeat: no-repeat

background-repeat The attribute can also specify that the background image is displayed only once:

Example

The background image is displayed only once:

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

Try It Yourself

In the above example, the background image and text are placed in the same position. We want to change the position of the image so that it does not interfere with the text too much.

CSS background-position

background-position The attribute is used to specify the position of the background image.

Example

Place the background image at the upper right corner:

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Try It Yourself