CSS Background

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

Background

CSS Background is a powerful tool used by web developers to create stunning visuals for web pages. It allows developers to set the background color, image, and other properties of elements on a webpage. It is a very powerful tool and can be used to create a wide variety of visual effects.

CSS background property is used to define the background effects on an element.

background-color

The background-color property in CSS applies solid colors as a background on an element.

p {
   background-color: #82a43a; 
}

Background Color

opacity/transparency

By using the opacity/transparency property, you can define a custom CSS transparency level for an element.

p {
  background-color: #82a43a;
  opacity: 0.6;
}

Background Color

Transparency Using RGBA

You can also define the color you want to use in RGBA values. The A in the acronyms stands for the alpha channel which is defined as the fourth value.

p {
   background: rgba(80, 180, 90, 0.4);  
}

Background Color

background-image

The background-image property is used to set an image as a background of an element.

p {
   background-image: url("backimage.gif");  
}

background-repeat

The background-repeat CSS property sets how background images are repeated.

The background-repeat property can take the following values ​​single or in combination:

selector{
  background-repeat: inherit | initial | no-repeat | repeat | repeat-x | repeat-y | round | space;
}

p{
   background-repeat: no-repeat; 
}

background-position

The background-position property in CSS allows you to defines the position of the background image and move a background image (or gradient) around within its container.

It has three different types of values:

• Length values (100px 5px)
• Percentages (100% 5%)
• Keywords ( top right)

p{
   background-position: center;
}

background-attachment

The background-attachment CSS property sets whether a background image’s position is fixed within the viewport, or scrolls with its containing block. This property can take the following values.

selector{
      background-attachment: scroll|fixed|local|initial|inherit;
}

p{
   background-attachment: fixed;
}

Multiple Background Images

You can set multiple background images if you want. different images are separated by commas.

selector{
   background: background1, background 2, ..., backgroundN;
}

p{
   background-image: url(bg1.gif), url(bg2.gif);  
}

background – Shorthand

You can use the shorthand property background.

selector {
      background: background-color background-image background-repeat background-attachment background-position;
}

p{
    background-color: #fcc4;
    background-image: url("bg1.png");
    background-repeat: no-repeat;
    background-position: right bottom;
 }

The above code is written as follows, short and in one line:

body {
    background: #fcc4 url("bg1.png") no-repeat right bottom;
}