HTML-CSS-Background



January 9, 2023



Blogs

CSS Background

The CSS background properties are used to define the background effects for elements. There are lots of properties to design the background.

Background-Color

The background-color property in CSS is used to specify the background color of an element.

Value of Background-color

Name (transparent by default) :- the background color is transparent, basically meaning that there is no background color. Other than this you can use one of the 140+ color names.
Hexadecimal (eg. #05ff0) :- You can use hexadecimal color codes.
Rgb (eg. 50,115,220 ) :- You can use rgb() color codes:

the first value is for red

the second value is for green

the third value is for blue

Each of them can have a value between 0 and 255.

Rgba (eg. 50,115,220, 0.3 ) :- You can use rgba() color codes:

the first 3 values are for rgb

the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .hex-1{
            border:2px;
          }
      .hex-color{
        background-color: #cf7cb3;}
      .rgb-color{
          background-color: rgb(169, 169, 239);
      }
    </style>
  </head>
<body>
    <div class="hex-color hex-1"><h2>Welcome to Yasham Acadamy</h2></div>
    <div class="rgb-color hex-1"><h2>Educational Institute</h2></div>
</body>
</html>

Background-Image

This property specify an image to use as the background of an element. By default, the image is repeated so it covers the entire element.

Value of Background-repeat

Repeat (default) :-
The image is repeated as much as needed to cover the whole background image painting area.Repeat in both direction. The last image will be clipped if it is not fit in the browser window.
No-repeat:- We can have our original image without repetition useing this value.
Repeat-X:-This value allows us to repeat the same image multiple times alongs the X-Axis as long as the screen space doesn’t end.
Repeat-y:- This one works the same way as “repeat-X”, but works along the Y-Axis as long as the Y-Axis as long as the screen space doesn’t end.
Space:-This works both along the X and Y axes… Never crop the image unless a single image is too large to fit.if multipale images can fit, space them out evenly images alwayes touching the edges.
Rounds:-As the allowed space increases in size, the repeated images will stretch (leaving no gaps ) until there is room (space left >= half of the image width)for another one to be added. Wheb the next image is added. When the next image is added. all of the current ones compress to allow room. Example: An image with an original width of 260px, repeated three times, might stretch until each repetition is 300px wide, and then another image will be added. Then another image will be added.They will then compress to 225px.

Background-attachment

The property background-attachment property in CSS is used to specify the kind of attachment of the background image with respect to its container.

Value of Background-repeat

Scroll (default) :- The background is fixed relative to the element itself and does not scroll with its contents. (It is effectively attached to the element’s border.)
Fixed :– The background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background doesn’t move with the element.
Vocal :– The background is fixed relative to the element’s contents. If the element has a scrolling mechanism, the background scrolls with the element’s contents, and the background painting area and background positioning area are relative to the scrollable area of the element rather than to the border framing them.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
     
      .bg-img{
            border:2px;
            height:400px;
            background-image:url(https://www.pixelstalk.net/wp-content/uploads/2016/08/1920x1080-Christmas-HD-Image.jpeg)}
         
    </style>
  </head>
<body>
    <div class="bg-img"><h2>Welcome to Yasham Acadamy</h2></div>
</body>
</html>

Background-position

The background-position property is used to define the initial position of the background image.

The background-position property in CSS is mainly used to sets the initial position for the background image ie., it is used to set an image at a certain position. The position is relative to the position layer set by background-origin.

Value of Background-position

The default values are 0 0. This places your background image at the top-left of the container.

Length values (e.g. 100px 5px) :- Length values are pretty simple: the first value is the horizontal position, second value is the vertical position. So 100px 5pxwill move the image 100px to the right and five pixels down. You can set length values in px, em, or any of the other CSS length values.
Percentage values (e.g. 100% 5%) :- Percentages work a little differently. Get your math hats out: moving a background image by X% means it will align the X% point in the image to the X% point in the container. For example, 50%means it will align the middle of the image with the middle of the container. 100% means it will align the last pixel of the image with the last pixel of the container, and so on.
Keywords (e.g. top right) :- Keywords are just shortcuts for percentages. It’s easier to remember and write top right than 0 100%, and that’s why keywords are a thing. Here is a list of all five keywords and their equivalent values:

Top: 0% vertically
Tight: 100% horizontally
Bottom: 100% vertically
Left: 0% horizontally
Center: 50% horizontally if horizontal isn’t already defined. If it is then this is applied vertically.

Background-origin

The background-origin is a property defined in CSS which helps in adjusting the background image of the webpage. This property is used to set the origin of the image in the background. By default, this property sets the background image origin to the upper-left corner of the screen/webpage

Value of Background-origin

Padding-box (default) :- It is the default value that positions the background relative to the padding-box. The background starts from the top left corner of the padding edge.
Border-box :- It positions the background relative to the border-box. The background starts from the top left corner of the border.
Content-box :- It positions the background relative to the content-box. The background starts from the top left corner of the content.

Background-size

The background-size CSS property is used to set the size of a background image of an element. The background image can be stretched or constrained to fit into the existing space. It allows us to control the scaling of the background image.

Value of Background-size

1)Keyword value

a) Auto (default) :- The default keyword (auto) tells the browser to automatically calculate the size based on the actual size of the image and the aspect ratio.

b)Cover :- This value is used to resize the background image to cover the entire container. Sometimes, it crops the little bit off one of the edges or stretches the image. It resizes the image to ensure the element is completely covered.

c)Contain :- Without stretching or cropping, it resizes the background image to ensure the image is completely visible.

2) Percentage values (e.g. 100% 5%) :- This value defines the width and height of the background image to the percentage (%) of the background positioning area. Negative values are not allowed.

3)Length values (e.g. 100px 5px) :- It is used to set the width and height of the background image. This value stretches the image in the corresponding dimension of the given length. Its single value specifies the width of the image, and the height sets to auto. If two values are given, the first value sets the width, and the second value sets the height. It does not allow negative values.