CSS Backgrounds

CSS background properties are used to define the background effects for elements. You can set a background color, image, position, size, and other properties to create visually appealing web pages. Understanding these properties helps you control how backgrounds are displayed in your web design

Background Properties

1) Solid Background: Single Color

A solid background is the simplest form of background, using a single color to fill the entire background of an element. This approach helps create a clean and uniform look and can be used to highlight or differentiate sections of a webpage

html

 <section class="solid-bg">
      <h2>Welcome to Desishub</h2>
    </section>

css

.solid-bg {
  background: blue; /* blue background */
}

Usage: Commonly used for setting a solid color background for elements Usage:

Headers and Footers: Define a clear boundary for these sections.

Highlighting Content: Use contrasting colors to draw attention to specific content areas.

Overall Layout: Establish a consistent look and feel for the page.

2) Gradient Background => 2 or more colors

A gradient background smoothly transitions between two or more colors. Gradients can be linear or radial and offer a visually appealing alternative to solid colors

html

 <section class="gradient-two-color">
      <h2>Welcome to Desishub</h2>
    </section>

css

.gradient-two-color {
  background: linear-gradient(to right, red, yellow);
}
 

Usage: Used to apply an image as the background, providing more visual interest than a solid color

3) Image Background => Plain Image

Using an image as a background involves placing a static image behind the content of an element. This can create a visually rich and engaging design.

Values:

repeat: The background image is repeated both horizontally and vertically (default).

repeat-x: The background image is repeated only horizontally.

repeat-y: The background image is repeated only vertically.

no-repeat: The background image is not repeated.

html

 <section class="image-bg">
      <h2>Welcome to Desishub</h2>
    </section>

css

 
.image-bg {
  background: url("./lions.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
 

Usage:

Hero Images: Set a large, impactful image as the background for the top section of the page.

Content Sections: Add visual interest to specific content areas.

Full-page Backgrounds: Create immersive web experiences with full-page background images.

4) Image Background => Blendmode bg

Blend modes allow you to blend the background image with a background color, creating unique visual effects. This technique is useful for overlaying colors on images to enhance their appearance.

html

 <section class="image-bg-blend">
      <h2>Welcome to Desishub</h2>
    </section>

css

 
.image-bg-blend {
  background: url("./lions.jpg");
  background-size: cover;
  background-color: rgb(255, 158, 2);
  background-blend-mode: multiply;
  /* background-repeat: no-repeat;
  background-position: center center; */
}

Usage:

Enhancing Readability: Improve the readability of text over images by adding a semi-transparent color.

Design Effects: Create artistic and visually striking effects by blending images with colors.

Branding: Reinforce brand colors subtly over image backgrounds

5) Image with Gradient

Combining an image with a gradient overlay allows for more complex and visually appealing background designs. This technique involves layering a gradient over an image to add color transitions and depth.

html

 <section class="image-bg-grad">
      <h2>Welcome to Desishub</h2>
    </section>

css

 
.image-bg-grad {
  background: linear-gradient(to right, #ff004ce1, #ffffff00, #0099ffe7),
    url("./lions.jpg");
  background-size: cover;
}

Usage:

Enhanced Images: Add color gradients to images to highlight specific areas or create a mood.

Overlay Effects: Use gradients to create overlays that make text stand out over images.

Complex Backgrounds: Combine images and gradients to produce sophisticated and dynamic background designs.

Some of Other Background Properties

background-position:

Description: Sets the initial position of the background image

Values: Can be set using keywords (top, bottom, bottom, right, center) or specific positions (pixels, percentages)

 
body {
    background-image: url('background.jpg');
    background-repeat: no-repeat;
    background-position: center;
}
 

Usage: Positions the background image exactly where you want it within the element

background-size:

Description: Specifies the size of the background image

Values:

auto: Default value; the background image is displayed at its original size.

cover: Scales the background image to cover the entire element.

contain: Scales the background image to be fully visible, fitting within the element. Specific values (pixels, percentages).

 
body {
    background-image: url('background.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
 

Usage: Ensures the background image fits well within the element, either by covering it entirely or fitting within its bounds

background-attachment:

Description: Determines whether the background image scrolls with the page or is fixed.

Values:

scroll: The background image scrolls with the page (default).

fixed: The background image is fixed and does not scroll.

local: The background image scrolls with the element's content

 
body {
    background-image: url('background.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}
 

Usage: Creates a parallax effect by fixing the background image while the content scrolls.