CSS background properties

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

image

  • Copy the url in the browser and paste that url in the above code by replacing the yellow highlighted code .
  • image

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>

image

  • If background-repeat: repeat-y; Output will be like below,

image

 

  • If background-repeat: repeat-z; Output will be like below,

image

 

  • If background-repeat: no-repeat; Output will be like below,
image

We will see about background css more in further posts.

Print Friendly and PDF
SHARE

About me

Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.

    Blogger Comment
    Facebook Comment

0 comments :

Post a Comment

Pages