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
   87   88   89   90   91   92   93   94   95   96   97