Styling Background of Elements Using CSS

CSSWeb DevelopmentFront End Technology

To style background of elements, you can set the background image, background position. With that, also set background repeat to repeat an image horizontally or vertically.

background-position

Background position is to set the beginning position of a background image. For this, use the background-position property.

Example

Let us now see an example −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
body {
   background-image: url("https://www.tutorialspoint.com/images/Swift.png");
   background-repeat: no-repeat;
   background-attachment: fixed;
   color: blue;
   background-position: left center;
}
.demo {
   text-decoration: overline underline;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

Output

background-repeat

Background repeat in CSS is used to set how a background image is repeated on a web page. For this, use the background-repeat property. Following can be the property values −

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

Example

Let us now see an example −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
body {
   background-image: url("https://www.tutorialspoint.com/images/Swift.png");
   background-repeat: repeat-x;
   background-color: blue;
   color: white;
}
.demo {
   text-decoration: overline underline;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

Output

raja
Published on 31-Dec-2019 11:04:01
Advertisements