Background Image Repeat X Y
Syntax:
Selector{Property:url(image.gif/jpg)
The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element’s top left corner.
A background image can be repeated vertically (y), horizontally (x), in both directions, or in neither direction.
Example: 1
<html>
<head>
<style type="text/css">
body
{
</style>
</head>
<body>
</body>
</html>
<head>
<style type="text/css">
</head>
</html>
Whole background is filled with the image Background.jpg.<head>
<style type="text/css">
body
{
background-image:url(Background.jpg)
}</style>
</head>
<body>
</body>
</html>
Another Way:
<html><head>
<style type="text/css">
.background
{
background-image:url(Background.jpg)
}
</style>{
background-image:url(Background.jpg)
}
</head>
<body class="background">
</body></html>
Use background image as vertically
[repeat-y]
The repeat-y value will repeat the image vertically.
Repeat a background-image only vertically:
Example: 2
<html>
<head>
<style type="text/css">
body
{
</style>
</head>
<body>
</body>
</html>
<head>
<style type="text/css">
</head>
</html>
The background is filled by vertically the image Background.jpg.<head>
<style type="text/css">
body
{
background-image:url(Background.jpg);
background-repeat:repeat-y;
}background-repeat:repeat-y;
</style>
</head>
<body>
</body>
</html>
Another Way:
<html><head>
<style type="text/css">
.background
{
background-image:url(Background.jpg);
background-repeat:repeat-y;
}
</style>{
background-image:url(Background.jpg);
background-repeat:repeat-y;
}
</head>
<body class="background">
</body></html>
Example: 3
<html>
<head>
<style type="text/css">
body
{
</style>
</head>
<body>
</body>
</html>
<head>
<style type="text/css">
</head>
</html>
Image Background.jpg will be tiled vertically in the background in the center of the page.<head>
<style type="text/css">
body
{
background-image:url(Background.jpg);
background-repeat:repeat-y;
background-position: center;
}background-repeat:repeat-y;
background-position: center;
</style>
</head>
<body>
</body>
</html>
Another Way:
<html><head>
<style type="text/css">
.background
{
background-image:url(Background.jpg);
background-repeat:repeat-y;
background-position: center;
}
</style>{
background-image:url(Background.jpg);
background-repeat:repeat-y;
background-position: center;
}
</head>
<body class="background">
</body></html>
Use background image as horizontally
[repeat-x]
The repeat-x value will repeat the image horizontally.
Repeat a background-image only horizontally:
Example: 4
<html>
<head>
<style type="text/css">
body
{
</style>
</head>
<body>
</body>
</html>
<head>
<style type="text/css">
</head>
</html>
The background is filled by horizontally the image Background.jpg.<head>
<style type="text/css">
body
{
background-image:url(Background.jpg);
background-repeat:repeat-x;
}background-repeat:repeat-x;
</style>
</head>
<body>
</body>
</html>
Another Way:
<html><head>
<style type="text/css">
.background
{
background-image:url(Background.jpg);
background-repeat:repeat-x;
}
</style>{
background-image:url(Background.jpg);
background-repeat:repeat-x;
}
</head>
<body class="background">
</body></html>
Use background image as single view
[no-repeat]
Example: 5
<html>
<head>
<style type="text/css">
body
{
</style>
</head>
<body>
</body>
</html>
<head>
<style type="text/css">
</head>
</html>
The background-image will not be repeated this time.<head>
<style type="text/css">
body
{
background-image:url(Background.jpg);
background-repeat:no-repeat;
}background-repeat:no-repeat;
</style>
</head>
<body>
</body>
</html>
Another Way:
<html><head>
<style type="text/css">
.background
{
background-image:url(Background.jpg);
background-repeat:no-repeat;
}
</style>{
background-image:url(Background.jpg);
background-repeat:no-repeat;
}
</head>
<body class="background">
</body></html>