Paano lumikha: Buong pahina na imahe

Learn how to use CSS to create a full-page background image.

Buong pahina na imahe

Learn how to create a background image that covers the entire browser window. The following example shows a full-screen (and half-screen) responsive background image:

Pamamahalan - Buong pahina na likas na imaheng background

Pamamahalan - Semi-buongsikang likas na imaheng background

Paano lumikha ng buong taas na imahe

Ginamit ang isang container element, at magdagdag ng isang background image na may taas na 100% sa container na iyon.

Tipan:Ginamit ang 50% upang lumikha ng semi-buongsikang likas na imaheng background. Pagkatapos, gamitin ang mga sumusunod na attribute ng background upang ganap na itumid sa gitna at pinagskalakal ang imahe:

Pagsisiwalat:Upang siguraduhin na ang imahe ay tutakpan ang buong screen, dapat mong ilagay din ang height: 100% ang ginagamit nang sabay-sabay <html> at <body>:

Buong pahina na likas na imaheng background:

body, html {
  height: 100%;
{}
.bg {
  /* Ginamit na imahe */
  background-image: url("dancer.jpg");
  /* Buong taas */
  height: 100%;
  /* Malinaw na tumutulig sa gitna at pinagskalakal ang imahe */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
{}

亲自试一试

半页背景图像：

.bg {
    height: 50%;
{}

亲自试一试