Embedded Files
CSS background-repeat
CSS background-repeat
Background pictures are repeated according to the background-repeat CSS property. A backdrop picture can be repeated horizontally and vertically, or it can be skipped entirely.
Example
CSS
body {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTUNpq1ezjI2yYaCiDZ3hvHgiAjysuASTmEVw&usqp=CAU");
}
CSS background-repeat: no-repeat
CSS background-repeat: no-repeat
repeat-x: This feature is used to horizontally repeat the backdrop picture. repeat-y: This value specifies if the background picture should be repeated just vertically. no-repeat: This attribute prevents the background picture from being repeated. It just shows the background image once.
Example
HTML
<!DOCTYPE html>
<html>
<body>
<p>In this example we have also added a margin on the right side.</p>
<p>So that the background image will not disturb the text.</p>
<p>Here, the background image is only shown once.</p>
<p>In addition it is positioned away from the text.</p>
</body>
</html>
CSS
body {
background-image: url("https://rimage.gnst.jp/livejapan.com/public/article/detail/a/00/01/a0001976/img/basic/a0001976_main.jpg?20210118175750");
background-repeat: no-repeat;
background-position: right top;
margin-right: 300px;
}
CSS background-position
CSS background-position
Each background image's starting location is determined by the background-position CSS attribute. The location is relative to the background-origin position layer.
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<body>
<h1>Hello There</h1>
<p>Here, the background image is only shown once.</p>
<p>In addition it is positioned away from the text.</p>
<p>In this example we have also added a background-size on the right side.</p>
<p>So that the background image will not disturb the text.</p>
</body>
</html>
CSS
body {
background-image: url("https://rimage.gnst.jp/livejapan.com/public/article/detail/a/00/01/a0001976/img/basic/a0001976_main.jpg?20210118175750");
background-repeat: no-repeat;
background-position: right top;
background-size: 40%
}
Page updated
Google Sites
Report abuse