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 for a page can be set like this :
Example
<!DOCTYPE html>
<html>
<head>
<title>Css Background-Image</title>
<style>
body {
background-image : url (" http://bit.ly/2I0mKOM");
}
</style>
</head>
<body>
<h1>This is heading.</h1>
<p>This page has an image as the background.</p>
</body>
</html>
Result
Background-Image - Repeat Horizontally or Vertically
By Default - The background-Image Property repeats an image both horizontally or vertically.
some images should be repeated and horizontally or vertically, or they will look strange
Example
!DOCTYPE html>
<html>
<head>
<title>Background-Image - Repeat Horizontally or Vertically</title>
<style>
body {
background-image : url (" http://bit.ly/2U0QFIb");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Strange background image...</p>
</body>
</html>
Result
- If the image above is repeated only horizontally (background-repeat: repeat-x;), the background will look better:
Example
!DOCTYPE html>
<html>
<head>
<style>
body {
background-image : url (" http://bit.ly/2U0QFIb");
background-repeat : repeat-x;
}
</style>
<title></title>
</head>
<body>
<h1>Hello World!</h1>
<p>Here, a background image is repeated only horizontally!</p>
</body>
</html>
Result
- Tip: To repeat an image vertically, set background-repeat: repeat-y;
Background-Image : Set Position and no-repeat
showing the background-image only once is also specified by the background-repeat property.
Example
!DOCTYPE html>
<html>
<head>
<title>Background-Image : Set Position and no-repeat</title>
<style>
body {
background-image : url ("http://bit.ly/2I0mKOM");
background-repeat : no-repeat;
background-size : cover;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>kumarAtuljaiswal background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>
</body>
</html>
Result
- In the example above, the background image is shown in the same place as the text.
- We want to change the position of the image, so that it does not disturb the text too much.
- The position of the image is specified by the background-position property:
!DOCTYPE html>
<html>
<head>
<style>
body {
background-image : url ("http://bit.ly/2I957wz");
background-repeat : no-repeat;
background-position : right top;
margin-right : 200px;
}
</style>
<title></title>
</head>
<body>
<h1>Hello World!</h1>
<p>kumarAtuljaiswal background no-repeat, set position example.</p>
<p>Now the background image is only shown once, and positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p>
</body>
</html>
Result
Background-Image - Fixed position
Example
!DOCTYPE html>
<html>
<head>
<title>Background-Image - Fixed position</title>
<style>
body {
background-image : url ("http://bit.ly/2VqBSrP");
background-repeat : no-repeat;
background-position : right top;
background-attachment : fixed;
margin-right : 200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>kumarAtuljaiswal background no-repeat, set position example.</p>
<p>Now the background image is only shown once, and positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p>
</body>
</html>
Result
0 comments:
Post a Comment
For Any Tech Updates, Hacking News, Internet, Computer, Technology and related to IT Field Articles Follow Our Blog.