Background Color

(How to write a CSS in HTML code)


<html>
<head>
<title>Background color</title>
<style>
.wrap1{width:90%; height:200px;
background-color:#FF0000;}
</style>
</head>
<body>
<div class="wrap1">
</div>
</body>
</html>

(How a background color Looks like on browser)


Background Image

(How to write a CSS in HTML code)


<html>
<head>
<title>Background Image</title>
<style>
.wrap2{width:90%; height:200px;
background-image:url(images/favicon.ico);}
</style>
</head>
<body>
<div class="wrap2">
</div>
</body>
</html>

(How a background image Looks like on browser)


Background Repeat

background repeat Controls repeatition of a background Image.

Values of Background-Repeat:

  • repeat ( By Default background is repeat )
  • no-repeat
  • repeat-x
  • repeat-y

no repeat

(How to write a CSS in HTML code)


<html>
<head>
<title>Background Repeat</title>
<style>
.wrap3{width:90%; height:200px; 
background-image:url(images/favicon.ico);
background-repeat:no-repeat;}
</style>
</head>
<body>
<div class="wrap3">
</div>
</body>
</html>

(How the HTML code above looks in a browser)

repeat-x

(How to write a CSS in HTML code)


<html>
<head>
<title>Background Repeat</title>
<style>
.wrap4{width:90%; height:200px;
background-image:url(images/favicon.ico);
background-repeat:repeat-x;}
</style>
</head>
<body>
<div class="wrap4">
</div>
</body>
</html>

(How the HTML code above looks in a browser)

repeat-y

(How to write a CSS in HTML code)


<html>
<head>
<title>Background Repeat</title>
<style>
.wrap5{width:90%; height:400px;
background-image:url(images/favicon.ico);
background-repeat:repeat-y;}
</style>
</head>
<body>
<div class="wrap5">
</div>
</body>
</html>

(How the HTML code above looks in a browser)


Background Position

Background Position Specify position of background image. By Default the pposition is left top.

top

(How to write a CSS in HTML code)


<html>
<head>
<title>Background Position</title>
<style>
.wrap7{width:90%; height:200px; 
background-image:url(images/favicon.ico);
background-repeat:no-repeat;
background-position:top left;}
</style>
</head>
<body>
<div class="wrap7">
</div>
</body>
</html>

(How the HTML code above looks in a browser)

bottom

(How to write a CSS in HTML code)


<html>
<head>
<title>Background Position</title>
<style>
.wrap8{width:90%; height:200px; 
background-image:url(images/favicon.ico);
background-repeat:no-repeat;
background-position:bottom;}
</style>
</head>
<body>
<div class="wrap8">
</div>
</body>
</html>

(How the HTML code above looks in a browser)

left

(How to write a CSS in HTML code)


<html>
<head>
<title>Background Position</title>
<style>
.wrap9{width:90%; height:200px; 
background-image:url(images/favicon.ico);
background-repeat:no-repeat;
background-position:left;}
</style>
</head>
<body>
<div class="wrap9">
</div>
</body>
</html>

(How the HTML code above looks in a browser)

right

(How to write a CSS in HTML code)


<html>
<head>
<title>Background Position</title>
<style>
.wrap10{width:90%; height:200px; 
background-image:url(images/favicon.ico);
background-repeat:no-repeat;
background-position:right;}
</style>
</head>
<body>
<div class="wrap10">
</div>
</body>
</html>

(How the HTML code above looks in a browser)

center

(How to write a CSS in HTML code)


<html>
<head>
<title>Background Position</title>
<style>
.wrap11{width:90%; height:200px; 
background-image:url(images/favicon.ico);
background-repeat:no-repeat;
background-position:center;}
</style>
</head>
<body>
<div class="wrap11">
</div>
</body>
</html>

(How the HTML code above looks in a browser)

Background Attachment

Background Attachment tells weather a background image scrolls or remain fixed when we scroll window. By Default it is scroll.
Two Values of Background Attachment

  • Scroll (Default)
  • Fixed

(How to write a CSS in HTML code)


<html>
<head>
<title>Background Position</title>
<style>
.wrap11{width:90%; height:200px; 
background:url(images/box-model.png) no-repeat;
background-attachment:fixed}
</style>
</head>
<body>
	<div class="wrap11">
	</div>
</body>
</html>

(How Background Attachment Fixed looks in a browser)

This is a para inside

fixed

This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.


Background Shorthand

We Can write all background properties in one by using property background. Here is an example

(How to write a CSS in HTML code)


<html>
<head>
<title>Background Position</title>
<style>
.wrap11{width:90%; height:200px; 
background:url(images/box-model.png) no-repeat left top aqua;;}
</style>
</head>
<body>
	<div class="wrap11">
	</div>
</body>
</html>

(How the HTML code above looks in a browser)