The background property in css is really one of the most awesome properties in css.
For now let us see one of the good thing it bring with the background property.
You can define beautiful backgrounds using images or you can say that you can use any image as your background.
Final Output :
So let's see the code implementation :
Step 1 : First of all create a proper html structure.
step 2 : create a para in it and then define following code inside style tag.
Step 3 : run the file with browser to see the result.
Full Code :
<!DOCTYPLE HTML>
<html>
<head>
<meta charset="utf-8">
<title>DIV AND SPAN</title>
<style>
.boxliliput{
color: White;
font-weight:600;
font-size: 32.22px;
height: 50%;
background-color: #232A34;
width: 70%;
padding: 25px 10px;
border-width: 10px 7px;
border-color: #96B8A8;
border-style: ridge;
border-radius: 20px;
background-image: url(IMAGES/image2.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="boxliliput">
<p> <b>DESCRITION :</b> </p>
<p id="p2"> Hello , @sct.blurt</p>
</div><br/>
</body>
</html>
Explanation :
Here we have a single div i.e a description for @sct.blurt.
background-image: url(IMAGES/image2.jpg); // url is the Uniform Resource Locator that is the location of our image ,in our case the image is in the folder name IMAGES and the name of our file is image2.jpg
background-size: 100% 100%; // the proper complete size will be consumed by the background
background-repeat: no-repeat; // it will prevent the background to repeat itself in any situation
For any further queries write in comments below.
Thank You
Link For Previous Tutorials
- Inline CSS
- Internal CSS and Its Implementation
- External CSS
- ID's And Classes In CSS
- DIVS AND SPAN with CSS
- PADDING PROPERTY IN CSS #1
- PADDING PROPERTY IN CSS #2
- BOX MODEL BORDER PROPERTY IN CSS
- BOX MODEL BORDER PROPERTY IN CSS #2
- CREATE A CIRCLE USING BOX MODEL BORDER PROPERTY IN CSS #3
- OUTLINE BORDERS IN CSS
- MARGIN PROPERTY IN CSS
Congratulations! This post has been upvoted by the @blurtcurator communal account,
You can request a vote every 12 hours from the #getupvote channel in the official Blurt Discord.Don't wait to join ,lots of good stuff happening there.