CSS Backgrounds

CSS can assign different background styles to the HTML elements.
These include background color and background image effects.

Example

An <Input> element with a background-color.

Code

 <!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>

<style>
  .bg-color {
    background-color: #dfe7ff;
  }
</style>
</head>
<body>

<input type="text" class="bg-color"
       placeholder="Enter your name">
</body>
</html> 

Output



The background property specifies 5 background properties in a single declaration.

In CSS, shorthand properties are used to shorten the code.

The background property sets these properties in order:

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

Background-color

The background-color property defines the element's background color.
Here is an element with a background color.

Code

 <!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
</head>
<body>

<div style="background-color: lightblue; 
            padding:20px;">
  An element with a background color
</div>
</body>
</html> 

Output

Code
 
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
</head>
<body>

<p style="background-color:#302ea3; 
          padding:20px; color: white;">
  An element with a #302ea3 background color
</p>
</body>
</html> 

Output

Background-image

The background-image property sets an image as the element's background.
By default, the image is tiled until it covers the entire element.


An element with background image.

Code

 <!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
  body {
  background-image: url("pattern.png");
    height:200px;

}
</style>
</head>
<body>
</body>
</html> 

Output


Background repeat

By default, a background image is repeated, both horizontally and vertically). Using the background-repeat property, background image repeat behavior can be specified:

repeat
The value repeat ensures that the background-image is repeated in both directions (that is, left and right, and up and down), and along both axes, until the element’s background is fully covered.
repeat -x
The value repeat-x ensures that the background-image is repeated only along the x axis (that is, the horizontal axis in both directions—left and right) until the element’s background is fully covered along that axis.
repeat -y 
The value repeat-y ensures that the background -image is repeated only along the y axis (that is, the vertical axis in both directions—up and down) until the element’s background is fully covered along that axis.
no-repeat
The value no -repeat ensures that the background -image is not repeated in any direction, and that only a single instance of the image will be placed at the coordinates specified by the background-position.
If no background-position  has been specified,
the image is placed at the element’s default left-top position (0,0).
Code

 <!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
  body {
  background-image: url("pattern.png");
    background-repeat: repeat-x;
    height: 200px;
}
</style>
</head>
<body>
</body>

</html> 


Output


Code

 <!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
  body {
  background-image: url("pattern.png");
    background-repeat: repeat-y;
    height: 200px;

}
</style>
</head>
<body>
</body>
</html> 

Output

Code

 <!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
  body {
  background-image: url("pattern.png");
    background-repeat: no-repeat;
    height: 200px;

}
</style>
</head>
<body>
</body>
</html> 

Output


Background -position

The background-position property sets the position of the background image.

An element with a background image positioned at the top right corner.

Code

 <!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
  body {
  background-image: url("pattern.png");
  background-repeat: no-repeat;
   background-position: top right;
    height: 200px;

}
</style>
</head>
<body>
</body>
</html> 

Output
Code

 <!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
  body {
  background-image: url("pattern.png");
    background-repeat: no-repeat;
background-position: right 80px top 20px;
    height: 200px;

}
</style>
</head>
<body>
</body>
</html> 

Output


Background-attachment

The background-attachment property specifies how a background image will attach to the element. Background images may scroll with the rest of the page or have a fixed position.

A background image with a fixed position in the document.
Scroll the page and the images will stay fixed.

Code

 <!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
  body {
  background-image: url("pattern.png");
   height: 300px;
    width: 300px;
    background-attachment: fixed;
}
</style>
</head>
<body>
</body>
</html> 

Output



Background-size

The background-size property sets the background image size.
It accepts two values : width and height.

Syntax:
background-size : auto | length | contain | cover | initial | inherit

Value

DESCRIPTION

auto

Default. Displays background image original size.

length

Sets width (first value) and height (second value) of background image. If the second value is not given, it will be set to auto.

percentage

Sets width (first value) and height (second value) of background image in percent. If the second value is not given, it will be set to auto.

cover

Stretch or crop background image to cover the entire container.

contain

Resize background image to make it fully visible.

initial

Sets the value to its default value.

inherit

Inherits the value from its parent element.


auto

Code
 <!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
  body {
  background-image: url("pattern.png");
   background-repeat: no-repeat;
    background-size: auto;
height:200px;
}
</style>
</head>
<body>
</body>
</html> 

Output

length

Code
 <!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
  body {
  background-image: url("pattern.png");
   background-repeat: no-repeat;
    background-size: 200px 200px;
}
</style>
</head>
<body>
</body>
</html> 

Output

percentage

Code
 <!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
  body {
  background-image: url("pattern.png");
   background-repeat: no-repeat;
    background-size: 50%;
}
</style>
</head>
<body>
</body>
</html> 

Output

cover

Code
 <!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
  body {
  background-image: url("pattern.png");
   background-repeat: no-repeat;
    background-size: cover;
}
</style>
</head>
<body>
</body>
</html> 

Output

contain

Code

 <!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
  body {
  background-image: url("pattern.png");
   background-repeat: no-repeat;
    background-size: contain;
   height:200px;
}
</style>
</head>
<body>
</body>
</html> 

Output
inherit

Code
 <!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
  body {
  background-image: url("pattern.png");
   background-repeat: no-repeat;
    background-size: inherit;
height:200px;
}
</style>
</head>
<body>
</body>
</html> 

Output








No comments:

Post a Comment

Subscribe to: Posts (Atom)