Basic HTML Version

|  | Table of Contents |  | View Full Version

Page 92 - 2626_South Point_C-7
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

| 87 88 89 90 91 92 93 94 95 96 97 |