CSS Backgrounds:Background-color, Background-image, Background-repeat, Background-position, Background-attachment,css border

Todaynews September 17, 2024

CSS Backgrounds

The CSS background properties are used to add background effects for elements.

In these chapters, you will learn about the following CSS background properties:

Background-color
Background-image
Background-repeat
Background-position
Background-attachment

1.Background-color

It is used to add background color of an element.

Example :

Body {

Background-color : Blue;

}

Opacity / Transparency

The Opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The lower value, the more transparent.

Example :

div { background-color: green; opacity: 0.3;}

<html>

<head>

<title>Background and Opacity Example</title>

<style>

/* Container div with green background and opacity */

div p{

background-color: green;

opacity: 0.3;

}

</style>

</head>

<body>

<h2>CSS Background and Opacity Example</h2>

<div>

<p>This box has a green background with 30% opacity.</p>

</div>

</body>

</html>

Background Image

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

Example :

body { background-image: url(" ganpat.jpg ");}

Background Image Repeat

By default, the Background-Image property repeats an image both horizontally and vertically.
If the image is repeated only horizontally (background-repeat: repeat-x;) the background will look better.

Example :

body {background-image: url(" ganpat.jpg ");

background-repeat: repeat-x;

}

By default, the Background-Image property repeats an image both horizontally and vertically.
If the image is repeated only horizontally (background-repeat: repeat-x;) the background will look better.

Example :

body { background-image: url(" ganpat.jpg ");

background-repeat: repeat-x;}

Example :

body { background-attachment: fixed; }

Property Values :

The CSS border properties allow you to specify the style, width, and color of an element's border.

Example :

P {

border-style : solid;

}

Dotted : Defines a dotted border
Dashed : Defines a dashed border
Solid : Defines a solid border
Doubled : Defines a double border
Groove : Defines a 3D grooved border. The effect depends on the border-color value.
Ridge : Defines a 3D ridged border. The effect depends on the border-color value
Inset : Defines a 3D inset border. The effect depends on the border-color value
Outset : Defines a 3D outset border. The effect depends on the border-color value

This property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick:

Example :

p { border-style: solid;

border-width: 5px;

border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */}