CSS Background Properties

Background Color - Color Name

Code: background-color: lightblue;
Description: Uses a named color.

Background Color - RGB

Code: background-color: rgb(255, 99, 71);
Description: Uses the RGB color model.

Background Color - HEX Code

Code: background-color: #ff6347;
Description: Uses a hexadecimal color value.

Linear Gradient

Code: background: linear-gradient(to right, red, yellow);
Description: Creates a smooth transition between colors in a linear direction.

Radial Gradient

Code: background: radial-gradient(circle, red, yellow);
Description: Creates a gradient that radiates outward in a circular pattern.

Background Image

Code: background-image: url('image_url');
Description: Sets an image as the background.

Example

HTML file


<!DOCTYPE html>
<html>
<head>
    <title>Background Properties</title>
    <link rel="stylesheet" type="text/css" href="bg-styles.css">
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo temporibus impedit 
    provident ad dignissimos, quasi molestias itaque totam aperiam et blanditiis incidunt 
    eaque, culpa cupiditate est nisi ullam minima facilis.</p>
</body>
</html>

Run Code

CSS file


body{
    /* background colors */
    background-color: darkorchid;
    background-color: rgb(106, 165, 220);
    background-color: #a34a93;
    
    /* background gradients */
    background: linear-gradient(red, yellow);
    background: linear-gradient(to right bottom, red, yellow, green);
    background: radial-gradient(violet, indigo);
   
     /* background image  */
    background-image: url(nature.webp);
    background-size: cover;
    }

Run Code

Previous Next