CSS Backgrounds

CSS Tutorial

CSS-Home CSS-Environment CSS-Basic syntax CSS-Selector CSS-How To Add CSS CSS-Comment CSS-Color CSS-Background CSS-Font CSS-Text CSS-Boarder CSS-Margin CSS-Padding CSS-Height/Width CSS-Link CSS-Table CSS-Visibility CSS-Scrollable CSS-Float/Clear CSS-Line CSS-Align CSS-Dimension CSS-Event CSS-Pusedo class CSS-Position CSS-Transparency CSS-Dropdown CSS-Form CSS-List/Counter CSS-Website layout CSS-Text effect CSS-Image effect CSS-Button effect CSS-page number CSS-Box CSS-@media CSS-Multi device CSS-Multi device 1 CSS-Multi device 2

« Previous Next »

You can set backgrounds of various HTML elements

can set the following background properties of an element −

background-color

background-image

background-repeat

background-position

background-attachment

background-shorthand

CSS - Background-Color

This property is used to set the background color of an element.

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

Example : CSS - Background-Color

<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: rgb(0, 0, 255);
color: white;
}
div {
background-color: green;
color: red;
} </style>
</head>
<body>
<p>Code Always.</p>

<div>
This is a text inside a div element.
So we can set a color for div element.
</div>
</body>
</html>

When the above code is compiled , it produces the following result.

Result

Code Always.

This is a text inside a div element. So we can set a color for div element.

CSS - Background-Image

This property is used to set the background image by calling local stored images.

The background-Image property specifies the background image of an element

Example : CSS - Background-Image

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("backgroundimage.png");
border: 2px solid rgb(3, 3, 99);
}
</style>
</head>
<body>
<p>Code Always.</p>
<p>Code Always To Become Best Programmer.</p>
</body>
</html>

By default, the image is repeated so it covers the entire element.

When using a background image, use an image that does not disturb the text.

When the above code is compiled , it produces the following result.

Result

Code Always.

Code Always To Become Best Programmer.

All CSS Background Properties

The table shown below describes different type of background properties.

Background Property	Description
background	uses to set all the background properties in one declaration
background-attachment	uses to set whether a background image is fixed or scrolls with the rest of the page
background-clip	uses to set the painting area of the background
background-color	uses to set the background color of an element
background-image	uses to set the background image for an element
background-origin	uses to set where the background image(s) is/are positioned
background-position	uses to set the starting position of a background image
background-repeat	used to set how a background image will be repeated
background-size	used to set the size of the background image(s)

« Previous Next »

C++ Tutorial	CSS Tutorial	C# Tutorial	PHP Tutorial
Java Tutorial	SQL Tutorial	JQuery Tutorial	MySQL Tutorial
HTML - Tutorial	Node.Js Tutorial	JavaScript Tutorial	Python Tutorial
MySQL Installation	Node.js Installation	XAMPP -- Installation	Python Installation
C++ - Environment Setup	Java - Environment Setup	C# - Environment Setup	Responsive Web Design

CSS - Colors

CSS - Background-Color

Example : CSS - Background-Color

Result

CSS - Background-Image

Example : CSS - Background-Image

Result

All CSS Background Properties