CSS · Web

Background Color, Image | CSS Tutorial -Part 4

We will be learning about all the possible design techniques we can apply to the background of the web pages. Below is the sample code to add background color to the body tag of web page:

body {
width: 100%;
font-family: monospace;
font-size: 18px;
font-weight: normal;
background-color: rgba(226, 215, 215, 0.35);
}

Similar to normal color attribute , background color can be also set as hexadecimal number, rgba, hsl and by name. It will set background color as below along with other styling which we might apply to our page.

Backgroundcolor

Fig 1

You can change the color to whatever color you like using ctrl+shift+i or using web developer tool on any browser as below:

browrserwindow.png

click on rgba and it will help you change it by adjusting the color you like.

We can have some background color added to individual tags also like to h1, h2 or any tag we want as below:

h1, h2 {
font-weight: 700;
line-height: 1;
margin: 20px 0;
color: #2f2b2b;
background-color: #c5baba
}

The change in the h1 will be same as in fig 1.

Background Images: We can add background image to our web page using css. We can add any type of pic i.e. jpg, png, gif(moving pic) etc as below:

html {
width: 100%;
font-family: monospace;
font-size: 18px;
line-height: 1.5;
font-weight: normal;
background-image: url(“images/giphy.gif”);
background-repeat : repeat-y;
background-size: cover;
}

It will appear like : MovingPic.png

Note: When you actually apply .jif pic to your web page it is moving like an animation.

background-image is the attribute which helps us providing the url of the picture we want to add to out web page along with relative or absolute path.

background-repeat is defined to describe if we want to repeat background image to fill into complete page or not. Default value is no i.e. Only part of web page may be covered according to original size of the picture. Repeat-y means it will be only repeated vertically. For more info you can check https://www.w3schools.com/cssref/pr_background-repeat.asp

background-size property specify the background size of the image. Default value is auto i.e. the background-image contains its width and height. we have selected cover to to stretch it as possible to cover entire page.

For box model in CSS , click here

There are lot many other attributes can be added to web page. Watch out this place for more articles.

 

 

Advertisements

One thought on “Background Color, Image | CSS Tutorial -Part 4

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s