Friday, 8 December 2017

, , , ,

Lesson 5: CSS Background - arcreationsweb

css background tutorial

In earlier lesson we have discussed about CSS color and it's implementations and i hope you all understand the CSS colors very well, until if you are not aware about the CSS color please read our lesson 4: CSS colors and it's Implementations. In today's lesson we will move to the next topic that is CSS Background. In CSS we use CSS Background elements to edit the background of the particular web page. We can edit a Background in 5 different ways:






The CSS background properties are used to define the background effects for elements. CSS background properties:
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

what are the properties of the css background

1. BACKGROUND - COLOR

The background-color property is specifies the color of the background. This property specifies under the <Body> tag. The background-color can be set like this - 

<html>
<head>
<style>
body
{
    background-color: Orange;
}
</style>
</head>
<body>

<h1>ARCREATIONSWEB</h1>

<p>This page has a Orange background color!</p>

</body>
</html>

NOTE: Color of the background can be specified in 3 different ways to know click here

2. BACKGROUND - IMAGE 






The background-image property is used to set the image in the web page background. By default the image is repeated so it covers the entire element. The background-image can set like this - 

<html>
<head>
<style>
body {
    background-image: url("paper.gif");
}
</style>
</head>
<body>

<h1>ARCREATIONSWEB</h1>

<p>This page has an image as the background!</p>

</body>
</html>

NOTE: Insert any image that is not disturbing the appearance of text or any other element of the web page.

3. BACKGROUND - REPEAT

Background - image can be repeated only horizontally and vertically. By default the element background - image property repeats the both horizontally and vertically. You can use this property like this:

<html>
<head>
<style>
body {
    background-image: url("apple.png");
}
</style>
</head>
<body>

<h1>ARCREATIONSWEB</h1>
<p>This is an background repeated image!</p>

</body>
</html>

4. BACKGROUND - ATTACHMENT 

This property specifies the whether a background image is fixed or scrolls with the rest of the page. It can be done like this:


<html>
<head>
<style>
body {
    background-image: url("tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    margin-right: 200px;
    background-attachment: fixed;
}
</style>
</head>
<body>

<h1>ARCREATIONSWEB</h1>
<p>The background-image is fixed. Keep scrolling</p>
<p>The background-image is fixed. Keep scrolling</p>

<p>The background-image is fixed. Keep scrolling</p>
<p>The background-image is fixed. Keep scrolling</p>
<p>The background-image is fixed. Keep scrolling</p>
<p>The background-image is fixed. Keep scrolling</p>
<p>The background-image is fixed. Keep scrolling</p>
<p>The background-image is fixed. Keep scrolling</p>
<p>The background-image is fixed. Keep scrolling</p>
<p>The background-image is fixed. Keep scrolling</p>
</body>
</html>

5. BACKGROUND - POSITION

The property background - position specifies the starting position of the background image. 

So guys this is all about the CSS background. Through this property you can edit your background of the web page. It helps to enhance the look of we page. CSS background helps to make your page more beautiful. Read this all first if you are getting any problem please let me know, i will help you with the solution of your problem. You can share your doubts in comments or you can directly mail me on arcreationsweb@gmail.com

Thank you
Ashutosh Kumar
(writer and editor)
arceationsweb


  
Share:

0 comments:

Post a Comment

JOIN OUR DISCUSSION CORNER...