آموزش زمینه های چندگانه CSS

مثال

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

دو مقدار ممکن دیگر برای background-sizeعبارتند از: contain و cover.

containکلمه کلیدی ترازو تصویر پس زمینه به عنوان بزرگ به عنوان امکان پذیر است (اما هر دو عرض و ارتفاع آن باید در داخل منطقه، محتوای مناسب). به همین ترتیب ، بسته به نسبت تصویر پس زمینه و منطقه موقعیت موقعیت ، ممکن است مناطقی از پس زمینه وجود داشته باشد که توسط تصویر پس زمینه پوشانده نشده است.

coverمقیاس کلمه کلیدی تصویر پس زمینه به طوری که منطقه محتوا به طور کامل توسط تصویر پس زمینه پوشش داده (هر دو عرض و ارتفاع آن برابر یا بیش منطقه محتوا). به همین ترتیب ، برخی از قسمتهای تصویر پس زمینه ممکن است در منطقه موقعیت پس زمینه قابل مشاهده نباشد.

مثال زیر استفاده از containو cover:

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}

#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

#example1 {
  background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

html {
  background: url(img_man.jpg) no-repeat center fixed;
  background-size: cover;
}

.hero-image {
  background: url(img_man.jpg) no-repeat center;
  background-size: cover;
  height: 500px;
  position: relative;
}

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}