Whenever we think of styling our webpage, the very first, common and most appealing styling that comes to our mind is about including an image in the background.
Our webpage may look very attractive upon the use of background image
Background image falls under the background properties category
Let us explore background properties.
| background-image | Description |
|---|---|
| URL | Specifies the source of the background-image |
| none | Specifies that there is no background image.Default value |
| background-attachment | Description |
|---|---|
| scroll | When the webpage is scrolled the background-image also scrolls. Default value |
| fixed | When the webpage has scrolled the position of the image remains fixed |
| background-repeat | Description |
|---|---|
| repeat | Repeat will repeat the image across x and y-axis.Default Value |
| repeat-x | Repeat-x will repeat the image across the x-axis. |
| repeat-y | Repeat-y will repeat the image across the y-axis. |
| no-repeat | No-repeat will not repeat the image. |
We can assign the background color to any element.
We can assign color using the name of color, hexadecimal code or RGB values
Let us discuss the different ways of specifying color using CSS in detail.
Demo :
<!doctype html>
<head>
<title>Background Properties</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="background.css">
</head>
<body>
<h1>Training Offerings</h1>
<h3>UI Courses</h3>
<P> Our focus is to enable participants to develop single page applications efficiently by teaching:
<br>The various popular UI libraries and frameworks with real time examples.
<br>Providing progressive assignments to give more hands on experience</p>
<h2>Popular sessions</h2>
<ul>
<li>HTML5</li>
<li>JavaScript</li>
<li>Angular</li>
<li>React</li>
<li>Polymer</li>
</body>
</html>
//background.css
body {
background-image:url("tile_new1.jpg" width="1157" style="width:100%; heigth: auto; max-width:1157");
background-repeat:repeat;
font-family:sans-serif;
}