IT With Erangi: CSS Background Styling

CSS Background Styling

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

CSS most common background properties are:

1. CSS Background Color

The background-color property specifies the background color of an element.

You can set the background color for any HTML element.

With CSS, a color is most often specified by:

a valid color name - like "red"

a HEX value - like "#ff0000"

an RGB value - like "rgb(255,0,0)"

2. CSS 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.

The background image can also be set for specific elements, like the <p> element.

3. CSS Background-repeat

The background-image property repeats an image both horizontally and vertically.

Some images should be repeated only horizontally or vertically, or they will look strange.

4. CSS Background-position

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

5. CSS Background Attachment

The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page).

Code:-

<!DOCTYPE html>

<html>

<head>

<style>

body {

  background-image: url("https://www.wallpapertip.com/wmimgs/183-1835329_royalty-free-wallpapers-copyright-free-background.jpg");

  background-attachment: scroll;

</style>

</head>

<body>

<h1>The background-image Properties</h1>

<p>

The background is changed using CSS properties. Click HTML tab to see code.

</p>

</body>

</html>

Output:-

Written by: W.A. Eranga Dewmini

IT With Erangi