Saturday 7 December 2013

CSS » Backgrounds


There's 4 CSS properties used for background effects:
  • background-color
  • background-image
  • background-repeat
  • background-position



Background Color

The background-color property specifies the background color of an element.
In the below example we have created div element with red background color.
If You want to set background-color to the main page just replace #demo with body.

» EXAMPLE:


<html>
<head>
<style>
#demo {
width: 350px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="demo">
</div>
</body>
</html>


» Result:









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.
Learn how to use background-image:


» EXAMPLE:


<html>
<head>
<style>
#demo {
width: 350px;
height: 200px;
background-image:url('human.jpg');
}
</style>
</head>
<body>
<div id="demo">
</div>
</body>
</html>



» Result:




Note: You have to use Your own image, because this image is available only in our server.






Background Repeat - Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and vertically.
We are gonna show You how to repeat only horizontally or vertically.


Repeating horizontally

» EXAMPLE:


<html>
<head>
<style>
#demo {
width: 350px;
height: 200px;
background-color: gray;
background-image:url('human.jpg');
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div id="demo">
</div>
</body>
</html>



» Result:




Note: We added background-color to can be more easier for You to see the effect.

Repeating vertically


» EXAMPLE:


<html>
<head>
<style>
#demo {
width: 350px;
height: 200px;
background-color: gray;
background-image:url('human.jpg');
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div id="demo">
</div>
</body>
</html>



» Result:











Background Image - no-repeat


Background image without repeating.


» EXAMPLE:


<html>
<head>
<style>
#demo {
width: 350px;
height: 200px;
background-color: gray;
background-image:url('human.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="demo">
</div>
</body>
</html>


» Result:







Background Position
In this example we want to change the position of the image, so that it does not disturb the text too much.

» EXAMPLE:


<html>
<head>
<style>
#demo {
width: 350px;
height: 200px;
background-color: gray;
background-image: url('human.jpg');
background-repeat: no-repeat;
background-position: right top;
}
</style>
</head>
<body>
<div id="demo">
</div>
</body>
</html>


» Result:







Background - Shorthand property

To shorten the code, it is also possible to specify all the properties in one single property, because the above properties are too much. This is called a shorthand property.
The shorten property is "background". See example:

» EXAMPLE:


<html>
<head>
<style>
#demo {
width: 350px;
height: 200px;
background: gray url('human.jpg') no-repeat right top;
}
</style>
</head>
<body>
<div id="demo">
This is simple paragraph. Hi World.<br />
This is simple paragraph. Hi World.<br />
This is simple paragraph. Hi World.<br />
This is simple paragraph. Hi World.<br />
This is simple paragraph. Hi World.
</div>
</body>
</html>


» Result:



This is simple paragraph. Hi World.
This is simple paragraph. Hi World.
This is simple paragraph. Hi World.
This is simple paragraph. Hi World.
This is simple paragraph. Hi World.



Click Here To Get Our Background Image.

No comments:

Post a Comment