Hi friends in this post I am sharing about css background properties.I want to mention kindly use the HTML tag <body> where body is the selector.If you use the code <div> this css background code will not work.
<style>
.pqr {
background-image: url("image file path");
background-repeat: no-repeat;
background-position: right top;
}
</style>
<body class= "pqr">
</body>
How to take image path?
- Choose a picture and right click on it.
- Click open with google chrome(or)any browser
- Copy the url in the browser and paste that url in the above code by replacing the yellow highlighted code .
Example:
background-image: url("file:///C:/Users/Public/Pictures/Sample%20Pictures/Desert.jpg");Background repeat property
Kindly I suggest you to take a small image then only you can understand the difference.Suppose if you use the below code you will get the output like below image.
<style>
.pqr {
background-image: url("file:///D:/desk/authorcopy.png");
background-repeat: repeat-x;
}
</style>
<body class= "pqr">
</body>
- If background-repeat: repeat-y; Output will be like below,
- If background-repeat: repeat-z; Output will be like below,
- If background-repeat: no-repeat; Output will be like below,
We will see about background css more in further posts.
0 comments :
Post a Comment