Prev Next

Background – Shorthand property

All of us like shortcuts so instead of writing a huge block of code as seen below

p {
  background-color: #ff00ff;
  background-image: url("myimage.png");
  background-repeat: no-repeat;
  background-position: right top;
}

We can write it as

p{
  background: #ffffff url("myimage.png") no-repeat right top;
  }

Complete example

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background: #ffffff url("myimage.png") no-repeat right top;
   
}
</style>
</head>
<body>

<h1>The background shorthand property</h1>

<p>The background property is a shortcut way of specifying all the background properties in one declaration.</p>

<p>Here, the background image is shown once, and is positioned at the top-right corner.</p>
 
</body>
</html>

Leave a Comment