CSS - właściwości background-position


background-position:

kod wynik kodu
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<title>Example of CSS background-position property</title>
<style>
p {
  width: 150px;
  height: 150px;
  background-color: gold;
}
.position_left {
  background-image: url("grafika/buzia_02.png");
  background-position: left;
  background-repeat: no-repeat;
}
.position_center {
  background-image: url("grafika/buzia_02.png");
  background-position: center;
  background-repeat: no-repeat;
}
.position_right {
  background-image: url("grafika/buzia_02.png");
  background-position: right;
  background-repeat: no-repeat;
}
.position_top {
  background-image: url("grafika/buzia_02.png");
  background-position: top;
  background-repeat: no-repeat;
}
.position_bottom {
  background-image: url("grafika/buzia_02.png");
  background-position: bottom;
  background-repeat: no-repeat;
}
 </style>
</head>
<body>

<p class="position_left"></p>

<p class="position_center"></p>

<p class="position_right"></p>

<p class="position_top"></p>

<p class="position_bottom"></p>

</body>
</html>


background-position:

kod wynik kodu
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<title>Example of CSS background-position property</title>
<style>
p {
  width: 150px;
  height: 150px;
  background-color: gold;
}

.position_left_top {
  background-image: url("grafika/buzia_02.png");
  background-position: left top;
  background-repeat: no-repeat;
}

.position_left_center {
  background-image: url("grafika/buzia_02.png");
  background-position: left center;
  background-repeat: no-repeat;
}

.position_left_bottom {
  background-image: url("grafika/buzia_02.png");
  background-position: left bottom;
  background-repeat: no-repeat;
}

.position_center_top {
  background-image: url("grafika/buzia_02.png");
  background-position: center top;
  background-repeat: no-repeat;
}

.position_center_center {
  background-image: url("grafika/buzia_02.png");
  background-position: center center;
  background-repeat: no-repeat;
}

.position_center_bottom {
  background-image: url("grafika/buzia_02.png");
  background-position: center bottom;
  background-repeat: no-repeat;
}

.position_right_top {
  background-image: url("grafika/buzia_02.png");
  background-position: right top;
  background-repeat: no-repeat;
}

.position_right_center {
  background-image: url("grafika/buzia_02.png");
  background-position: right center;
  background-repeat: no-repeat;
}

.position_right_bottom {
  background-image: url("grafika/buzia_02.png");
  background-position: right bottom;
  background-repeat: no-repeat;
}
 </style>
</head>
<body>

<p class="position_left_top"></p>

<p class="position_left_center"></p>

<p class="position_left_bottom"></p>

<p class="position_center_top"></p>

<p class="position_center_center"></p>

<p class="position_center_bottom"></p>

<p class="position_right_top"></p>

<p class="position_right_center"></p>

<p class="position_right_bottom"></p>

</body>
</html>


background-position: procenty

kod wynik kodu
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<title>Example of CSS background-position property</title>
<style>
p {
  width: 150px;
  height: 150px;
  background-color: gold;
}
.position_0 {
  background-image: url("grafika/buzia_02.png");
  background-position: 0%;
  background-repeat: no-repeat;
}
.position_25 {
  background-image: url("grafika/buzia_02.png");
  background-position: 25%;
  background-repeat: no-repeat;
}
.position_50 {
  background-image: url("grafika/buzia_02.png");
  background-position: 50%;
  background-repeat: no-repeat;
}
.position_75 {
  background-image: url("grafika/buzia_02.png");
  background-position: 75%;
  background-repeat: no-repeat;
}
.position_100 {
  background-image: url("grafika/buzia_02.png");
  background-position: 100%;
  background-repeat: no-repeat;
}
.position_25_0 {
  background-image: url("grafika/buzia_02.png");
  background-position: 25% 0%;
  background-repeat: no-repeat;
}
.position_25_25 {
  background-image: url("grafika/buzia_02.png");
  background-position: 25% 25%;
  background-repeat: no-repeat;
}
.position_25_50 {
  background-image: url("grafika/buzia_02.png");
  background-position: 25% 50%;
  background-repeat: no-repeat;
}
.position_25_75 {
  background-image: url("grafika/buzia_02.png");
  background-position: 25% 75%;
  background-repeat: no-repeat;
}
.position_25_100 {
  background-image: url("grafika/buzia_02.png");
  background-position: 25% 100%;
  background-repeat: no-repeat;
}
 </style>
</head>
<body>

<p class="position_0"></p>

<p class="position_25"></p>

<p class="position_50"></p>

<p class="position_75"></p>

<p class="position_100"></p>

<p class="position_25_0"></p>

<p class="position_25_25"></p>

<p class="position_25_50"></p>

<p class="position_25_75"></p>

<p class="position_25_100"></p>

</body>
</html>