Computer >> Computer tutorials >  >> Programming >> CSS

Styling background of elements in CSS


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 −

<!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 −

Styling background of elements in CSS

Example

<!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 −

Styling background of elements in CSS