Page 92 - Plus_V2.2_C7_Flipbook
P. 92
background-repeat
It specifies how the background image should be repeated.
Values:
repeat: The background image will be repeated both horizontally and vertically.
repeat-x: The background image will be repeated only horizontally.
repeat-y: The background image will be repeated only vertically.
no-repeat: The background image will not be repeated.
Example: background-image: url('background.jpg');
background-repeat: repeat-x;
background-attachment
It specifies whether the background image should scroll or be fixed in place when the user scrolls
through a web page.
Values:
scroll: The background image will scroll with the content as the user scrolls down the page.
fixed: The background image will stay fixed in its position relative to the viewport. When the user
scrolls, the background image will not move.
Example: background-image: url('background.jpg');
background-attachment: fixed;
Let us create a web page using background properties:
<!DOCTYPE html>
<HTML>
<HEAD>
<STYLE>
body { background-color: purple;
background-image: url('cat.jpg');
background-position: right;
background-repeat: no-repeat;
background-attachment: fixed; }
</STYLE>
<TITLE>Background Properties Example</TITLE>
</HEAD>
<BODY>
<H1>Background Properties</H1>
<P>This is a simple web page
demonstrating background
properties in CSS.</P>
</BODY>
</HTML> Using Background Properties
90 Premium Edition-VII

