How to Add CSS Background Image and Color

• Introduction
• Background color
• Background image
• Combine background image and color
• Background attachment
• Conclusion

Introduction

  Looking at any design or website, CSS background is one of the most important. Without the background it would not be nice and attractive to look at. Just as a movie needs bgm, so does a website need a background. Set the background to your liking and it is most important for users. Because a lot of people use the website just looking at design and animation.

CSS Background Color:

  CSS background color property is used to specify the background color for an HTML element. Various values you can assign to background color property are assign a color name like yellow, red, black, blue, silver etc. You can assign a hexadecimal color value. You know that hexadecimal color values begin with a hash (#) symbol. There are six digits first two digits dedicated for red color , second two digits dedicated for green color and third two digits dedicated for blue. You can also assign RGB function for background color and the first position for red, second position for green and third position for blue. Minimum value you can passed is zero and maximum value you can pass is 255. That 0 indicates absence of the color and 255 indicates full present of the color.

  You can also assign RGBA, the first three positions are similar to RGB and last position is dedicated for alpha. Alpha indicates transparency 0 indicates full transparency and 1 indicates no transparency. The difference between alpha and the opacity property there is a property called as opacity in CSS. The important thing you need to observe is by default web pages are going to have the background color set. You can change the background color by using the CSS background color property. The background color property using mainly four methods are:

Syntax:

Color Name:

.name{ 
background-color: red; 
}

Hexadecimal color value:

.hexadecimal{ 
background-color: #ff0000; 
}

RGB function:

<!-- r=red value is 0, g=green value is 255,
 b=blue value is 0 -->
.rgb{
background-color: rgb(0, 255, 0); 
}

RGBA function:

<!-- r=red value is 255, g=green value is 0,
 b=blue value is 0, a= alpha value is 1 -->
.rgba{
background-color: rgba(255, 0, 0, 1); 
}

CSS Background Image :

  It is used to specify the background image for any HTML element various values that, you can assign the value none or assign URL function having an image path/image name. URL stands for Uniform Resource Locator. In the body style tag type , background-image colon URL bracket semicolon in between single quotations. you have an image in jpg format take down in desktop and size is 100×100 that means width is 100 height is 100. You have copy this name pattern go to code editor paste it on .jpg format and save. Now you goto bowser and refresh you can see that the background images is set. Pattern image has filled the entire page when the image is of 100 by 100. But the background image was repeated so many times by default. The background image repeats horizontally and vertically. To solve this repetition problem using background-repeat property.

  This background repeat is used to specify how the background image to be repeated. Whether the image to be repeated or not repeated. If it repeated whether it should repeat horizontally or vertically or it should repeat both direction. If you assign a value of no-repeat to the background repeat property the images in the background will not be repeated. You can see the image in original size and the image was not repeating neither horizontally nor vertically. Instead of no-repeat the value to assign is repeat-x, it repeats the background image horizontally or in x-direction. You can save and see that background image is repeating in X-direction or horizontally. And you can assign repeat-y, it repeats vertically or y-direction. If you give the background repeat property a value is “repeat”, then repeat the BG image horizontally as well as vertically and it is default value.

Syntax:

Background Image:

Bg_image{
background-image: url(images.jpg); 
}

Background Repeat:

Bg_repeat{
background-repeat: no-repeat /repeat /repeat-x 
                   /repeat-y ; 
}

Combine Background Image and Color:

  Combine bg color and bg image to create an cool image using background-blend-mode. You can choose any image from your file and upload on CSS background-image property. And add any color for background-color. To combine or mix bg-color and bg-image use background-blend-mode semicolon many option are here. Use whatever property value you have suitable for your image and colors. This color image is so beautiful when even an image is mixed.

Syntax:

Background-blend-mode:

bg_blend_mode{
background-image: url(images.jpg);
background-size: cover;
background-position: center;
background-color: red;
background-blend-mode: normal/ multiply/ overlay/ difference/ lighten/ soft-light 
hard-light/ exclusion/ screen/ luminosity;
}

CSS Background Attachment:

  It is used to specify, how the background image is to be attached to the wall of a webpage. Various values that we can assign our scroll or fixed. By default background image attachment behavior will be scroll. You can add background image to use URL function in between the single quotations and you give the image name or image path with image extension. You can save and see, the behavior of the image when you start scrolling with the text the image also gets scroll.

  So, image is scrolling with the text that’s default behavior. You can stop that by using the background-attachment property.  Assign the value for background-attachment is fixed. You can see, this time the background image is fixed to the wall of a page only the text is going to be scrolled. Scroll the text is only moving up and down. So, most of the time you fix the background image. Sometimes you might need the background image also to be scrolled so, you can leave the default behavior. You can assign the value scroll for background-attachment property.

Syntax:

Background Attachment:

bg_attach{
background-image: url(images.jpg);
color:white;
background-repeat: no-repeat;
background attachment: fixed/ scroll;
}

Conclusion:

  Finally, these are very important to use background in CSS. Many web developers are using these property fluently. They are many properties in background but, this is what a lot of people use. Learn and use background properties for build a own website.