3) CSS Background Repeat
If your image is small then by default image is repeated horizontally and vertically. Sometimes the user does not want to repeat its background image. Then in this situation, you can set the no-repeat value in the background-repeat CSS property.
But if the user wanted to repeat it background image only horizontally not vertically then you have to use the repeat-x value in the background-repeat CSS property. And it also applies vertically you just need to change x and change it to y. x is used horizontally and y is used vertically.
Let us see through an example
Example:-
For no-repeat CSS Value
<head>
<title> CSS Background Property </title>
body{
background-image: url(ex.jpg);
background-repeat: no-repeat;
}
}
</style>
</head>
<body>
<h1> CSS Background Color Property.</h1>
<h2> This is 2nd Heading.</h2>
<p> This is a Paragraph. </p>
</html>
For Repeat
Example :-
<head>
<title> CSS Background Property </title>
<style>
body {
background-image: url(ex.jpg);
background-repeat: repeat;
}
</style>
</head>
<body>
<h1> CSS Background Color Property.</h1>
<h2> This is 2nd Heading.</h2>
<p> This is a Paragraph. </p>
</body>
</html>
Output :-
4) Background Attachment
This Background CSS property is used when the user doesn’t want to scroll the background image. He just wanted to scroll only the content written on the Html document. You can either scroll the image of the background or fixed it in that position.
Let’s us see through Example
Example:-
body {
background-image: url(ex.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
}
</style>
Output :-
5) Background Position
This Background CSS Property is used to position the background image on the browser. You can place the background image anywhere in the browser you just need to write the background-position property. Let’s see it through an example.
Example :-
<head>
<title> CSS Background Property </title>
<style>
body {
background-image: url(ex.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position: center;
}
</style>
</head>
<body>
<h1> CSS Background Color Property.</h1>
<h2> This is 2nd Heading.</h2>
<p> This is a Paragraph. </p>
<P>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem deleniti rerum, nobis ipsum neque eveniet ullam et ab voluptate cum quod, dicta beatae sed rem? Nam distinctio quis obcaecati sit.
</body>
</html>
0 comments:
Post a Comment