1 / 13

Introduction to CSS Backgrounds - Lesson 3

The CSS background properties are used to define the background effects for elements. It includes: background-color, background-image, background-repeat, background-attachment, background-position

trainingdevelopment
Download Presentation

Introduction to CSS Backgrounds - Lesson 3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to CSSBackgrounds - Lesson 3 Publisher : Attitude Academy

  2. What is Background CSS • In this lesson we will learn how to apply background Properties on a webpage or websites. We will also look at advanced methods to position and control background images. The following CSS properties will be explained: • Background-color • Background-image • Background-repeat • Background-attachment • Background-position • Background

  3. Background The Background-color The background-color property is used to set the background color of an element Following is the example, which demonstrates how to set the background color for an element. Example Here: <div style="background-color: green;" >This text has a Green background color. </div> This text has a Green background color.

  4. Background The Background-images The background-image property is used to set the background image of an element. Following is the example, which demonstrates how to set the background images for an element. Example Here: <div style="background-image:url(browse path); ">More css Property add for give size of images </div> This div show image according content area

  5. Background The Background-Repeat The background-repeat property is used to control the repetition of an image in the background. The following example demonstrates how to repeat the background image if an image is small. You can use no-repeat value for the background-repeat property if you don't want to repeat an image. In this case, the image will display only once. We have four type of repeat value Repeat = This property repeat to background images No-repeat = This property no-repeat to background images Repeat-x = This property repeat to background images only Horizontally Repeat-y = This property repeat to background images only Vertically By default, the background-repeat property will have a repeat value.

  6. Example Here: <div style=" background-image:url(browse path); background-repeat: repeat; ">More css Property add for give size of images </div> The following example demonstrates how to stop repeating the background images Example Here: <div style=" background-image:url(browse path); background-repeat: no-repeat; ">More css Property add for give size of images </div> The following example demonstrates how to repeat the background image horizontally

  7. Example Here: <div style=" background-image:url(browse path); background-repeat: repeat-x; ">More css Property add for give size of images </div> The following example which demonstrates how to repeat the background image vertically Example Here: <div style=" background-image: url (browse path); background-repeat: repeat-y; ">More css Property add for give size of images </div>

  8. Background The Background-Attachment Background attachment determines whether a background image is fixed or scrolls with the rest of the page. The following example demonstrates how to set the fixed background image.

  9. Example Here: <div style=" background-image: url (browse path); background-attachment: fixed;"> This paragraph has fixed background image. </div> The following example demonstrates how to set the scrolling background image. Example Here: <div style=" background-image: url (browse path); background-attachment:scroll;"> This paragraph has scrolling background image. </div>

  10. Background The Background-Position The following example demonstrates how to set the background image position 100 pixels away from the left side.

  11. Example Here: <div style=" background-image: url (browse path); background-position:100px;"> Background image positioned 100 pixels away from the left. </div> The following example demonstrates how to set the background image position 100 pixels away from the left side and 200 pixels down from the top. Example Here: <div style=" background-image: url (browse path); background-position:100px 200px;"> This table has background image positioned 100 pixels away from the left and 200 pixels from the top.</div>

  12. Background The Background You can use the background property to set all the background properties at once. For example: Example Here: <div style="background: url (/images/pattern1.gif) repeat fixed 100px 200px;"> This paragraph has fixed repeated background image. </div>

  13. Visit Us : Attitude Academy

More Related