CSS Background

The CSS Background is basically a background property in CSS that allows the user to control the background of any element, it is also known as a shorthand property.

There are five CSS background properties :

background-color
background-image
background-repeat
background-attachment
background-position

CSS background-color

It defines the background color of the element.

Let's take an example of css background-color:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h2,p{  
    background-color: #b0d4de;  
}  
</style>  
</head>  
<body>  
<h2>My first CSS background color page.</h2>  
<h4>Hello Phptpoint. This is an example of CSS background-color.</h4>  
</body>  
</html>

Output :

My first CSS background color page.

Hello Phptpoint. This is an example of CSS background-color.

CSS background-image

This property is used to set an image in background. By default the entire element is covered by image.

Note: you can set the background image according to text color.

Let’s take an example of CSS background-image:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
body {  
background-image: url("../bg.jpg");  
margin-left:100px;  
}  
</style>  
</head>  
<body>  
<h1>Hello phptpoint.com</h1>  
</body>  
</html>

CSS background-repeat

By default sometimes, the background-image property repeats the background image in a single page. Most of the images are repeated horizontally or vertically.

background-repeat: repeat-x;

Let's take an example of css background-repeat-x:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
body {  
    background-image: url("gradient_bg.png");  
    background-repeat: repeat-x;  
}  
</style>  
</head>  
<body>  
<h1>Hello phptpoint.com</h1>  
</body>  
</html>

background-repeat: repeat-y;

Let's take another example of css background-repeat-y:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
body {  
    background-image: url("gradient_bg.png");  
    background-repeat: repeat-y;  
}  
</style>  
</head>  
<body>  
<h1>Hello phptpoint.com</h1>  
</body>  
</html>

CSS background-attachment

This property defines whether the background image should scroll or be fixed (will not scroll with the rest of the page).

The image will not move during scrolling in the browser if you can fixed the background image.

Let’s take an example of CSS background-attachment:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
  background-attachment: fixed;
}
</style>
</head>
<body>
<h1>The background-attachment Property</h1>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
<h5> Try to scroll down the page.</h5>
</body>
</html>

CSS background-position

This property is used to define the position of the background image.

The background positon is set by following five ways:

center
top
bottom
left
right

Let's take an example of CSS background-position:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
}
</style>
</head>
<body>
<h1>Welcome to phptpoint!</h1>
</body>
</html>

« Previous Next »

CSS Tutorial What is CSS CSS Syntax CSS Selectors How to add CSS CSS Colors CSS Comments CSS Background CSS Border CSS Display property How do I hide an element when printing a web page CSS Float CSS Font CSS Line Height CSS Opacity property CSS Overflow CSS Padding CSS Margin property CSS Position CSS Vertical align CSS White Space CSS Width CSS Word Wrap CSS Outline CSS Visibility CSS Media Queries CSS Animation CSS Gradient CSS Transition CSS Tooltips CSS Tooltip Animation CSS Arrow CSS Flexbox CSS 2D Transforms CSS 3D Transform CSS Aural Media CSS User Interface CSS Pagination CSS Table

No Sidebar ads