6/12/21

CSS Tutorials : CSS Background Property Part - 2


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 

<html>
<head>
    <title> CSS Background Property </title>
 
    <style>
        body{
            background-image: url(ex.jpg);
            background-repeatno-repeat;
        }
        }
    </style>
</head>
<body>
   <h1> CSS Background Color Property.</h1>
   <h2> This is 2nd Heading.</h2>
   <p> This is a Paragraph. </p>
</html>

Output :-  

For Repeat

Example :-

<html>
<head>
    <title> CSS Background Property </title>
    <style>
        body {
            background-imageurl(ex.jpg);
            background-repeatrepeat;
        }
    </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:- 

 <style>
        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 :- 

<html>
<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>

Output:- 


0 comments:

Post a Comment

Like us on facebook

blogger templatesblogger widgets

Follow on Twitter

Linkedin

Categories

Mad About Computer. Powered by Blogger.