Styling background of elements in CSS

CSSWeb DevelopmentFront End Technology

We can specify the background properties of an element using the background attribute. It can take values for the following: background-color, background-image, background-repeat, background-position, background-clip, background-size, background-origin and background-attachment.

Syntax

The syntax of CSS background property is as follows −

Selector {
   background: /*value*/
}

Example

The following examples illustrate CSS background property −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
body {
   background: gray url("https://www.tutorialspoint.com/pytorch/images/pytorch.jpg") no-repeat;
   font-size: 1.2em;
   color: black;
}
h2 {
   -webkit-text-fill-color: transparent;
   -webkit-text-stroke: 1px black;
}
p {
   box-shadow: 0 0 5px 5px black;
}
</style>
</head>
<body>
<h2><i>PYTORCH Tutorial</i></h2>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</body>
</html>

Output

This gives the following output −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
   background-color: bisque;
}
div {
   margin: auto;
   background-color:orange;
   width: 40%;
}
</style>
</head>
<body>
<h2>Demo Text</h2>
<div>demo demo demo demo</div>
</body>
</html>

Output

This gives the following output −

raja
Published on 06-Jan-2020 07:50:50
Advertisements