CSS background property :
§ This property is used to define the background effects on Html element. There are 5 CSS background properties that affect the Html elements.
· background-color
color_name |hex
color value |rgb(0-255,0-255,0-255)
|rgba(0-255,0-255,0-255,0-1)|transparent
CSS Syntax
background-color:
color|transparent|initial|inherit;
|
Value |
Description |
|
color |
Specifies
the name of color |
|
transparent |
Specifies that the background color should be
transparent. |
|
inherit |
Inherits this property from its parent element. |
Example:-
Output:
Specify The background Color with different types values:-
§ Let’s see here what different way to provide a color value.
§ Specify the background color with a HEX value.
background-color: #2060d6;
§ Specify the background color with an RGB value:
§ What is RGB-
§
The
RGB color model is an additive color model in which red, green, and blue light
are added together in various ways to reproduce a broad array of colors.
background-color: rgb(red, green, blue);
background-color: rgb(209, 25, 25);
§
Specify
the background color with an RGBA value:
§ What is RGBA-
§
RGBA
color values are an extension of RGB color values with an alpha channel - which
specifies the opacity for a color.
background-color: rgba(13, 212, 40, 0.3);
§
Specify
the background color with a HSL value:
§ What is HSL-
§
HSL
color values are specified with: hsl(hue, saturation, lightness) . Hue. Hue is
a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue.
background-color: hsl(352, 43%, 51%);
§
Specify
the background color with a HSLA value:
§ What is HSLA-
§
HSLA
stands for Hue, Saturation, Lightness, and alpha. This HSLa Color Values method
is much more intuitive than RGBA or Hex values.
background-color: hsla(hue, saturation, lightness, alpha)
§ background-color: hsla(165, 43%, 51%, 0.3);
Setting the different background Color with different types values:-
Output:
Example:-
§ Set the background color for a page:
Output:-
CSS background-image Property
§ It is used to set the image in background of the Html element..
CSS Syntax
background-image: url|none|initial|inherit;
values:url('image-path')|none
§ Values that we can assign none or we can assign a URL function having a image path or image name URL stands for uniform resource locator.
Example
§ Setting a background-image for the <body> element:
§
Here
we have one HTML_CODE folder with-in this folder we have images folder and
images folder contains images.
Example:-
<html>
Output:-
§So watch the output here background image repeated. If image size is less than browser size then by default, the background-image property repeats the background image horizontally and vertically.
CSS
Syntax
background-repeat: repeat|repeat-x|repeat-y|no-
repeat|initial|inherit;
Example: repeat
in x-axis
Output:-
Example: repeat
in y-axis
Output:-
Example:
no-repeat
Output:-
Syntax:- background-attachment: scroll | fixed | inherit
background-attachment: fixed;
§ The
background image will not scroll with the page or against the containing block.
background-attachment: scroll;
§ The background image will scroll with the page or against the containing block.
Example
§ Here you can observe the behavior of the image when I start scrolling with the text image also gets scroll can see that images also moving up with the text and also you can observe the image is getting repeated right image is getting repeated but i move the text down the image is also moving down so images scrolling with the text as a default behavior I can stop that I can fix the image first thing what I do if I stop this repeating behavior of the image by applying background-repeat:no-repeat.
§ Save the file and refresh the browser in this time the text is moving up and scrolling images also moving up and scrolling but the images is not getting repeated .you can see with the text images scrolling but it is not repeating so we stop the repeating behavior so now stopping the scrolling behavior how do I do that by using the background-attachment property.
§ Save
your browser and refresh this time the background image is going to be fixed to
the wall of a page only the text is going to be scrolled you can see that only
text is moving up and down only text is getting scrolled not the background
image the background images fixed at the most of the time we fix the background
image sometimes we might need the background image also to be scrolled then we
can sign here value scroll.
