CSS3 - Multi Background
CSS3 - Multi Background
The CSS3- multi background property sets one or more images with specified styles (size, position) without using HTML code. The most commonly used values are as below,
background-image: It is used to specify the images with path.
background-origin: It specifies the position of the setting background image.
background-size: It denotes the size in pixel of the background image.
Background: This value is used to set all background-image properties in one section.
Example:
<html>
<head>
<style>
#multi {
background-image: url(Test.jpg), url(Desert.jpg);
background-origin: right bottom, left top;
background-size:250px;
background-repeat: no-repeat, repeat;
padding: 70px;
}
</style>
</head>
<body>
<div id = "multi">
<h1>Multibackground image.</h1>
<p>
The CSS3- multi background property sets one or more images with specified styles (size, position) without using HTML code. The most commonly used values are as below,
background-image: It is used to specify the images with path.
background-origin: It specifies the position of the setting background image.
background-size: It denotes the size in pixel of the background image.
Background: This value is used to set all background-image properties in one section.
</p>
</div>
</body>
</html>
Output:
