![]() ![]() ![]() These are: top left, top center, top right, center left, center center, center right, bottom left, bottom center and bottom right. background-position: position Positions the image using one of various positioning words. You can use any CSS units to specify the position. For example, "50px 25px" places the image 50 pixels to the right of the top left corner, and 25 pixels below it. background-position: x y Places the image x units across the page and y units down the page. Values of "0 0" indicate the top left hand corner. ![]() ![]() To position your image, use the background-position property as follows: background-position: x% y% Places the image x% across the page and y% down the page. Positioning the background imageĬSS gives you control over exactly where your background image is placed within the HTML element. This is good if you want to use a big image that isn’t designed to tile. Great for left-hand page borders! background-repeat: no-repeat No repeating takes place only one copy of the image is displayed. background-repeat: repeat-y Tiles the image in the vertical direction only. Good if you want the background running across the top of the page. background-repeat: repeat-x Tiles the image in the horizontal direction only. You can control this tiling effect using the background-repeat property, as follows: background-repeat: repeat Tiles the image both horizontally and vertically. You can see that the background image repeats itself many times, in order to fill the whole page. Try scrolling up and down! Specifying how the background image tiles To see how this looks, check out this example. However, using the background-attachment: fixed property, it’s possible to create a “watermark” background that stays fixed in the same place on the screen while the page scrolls: Creating a “watermark” background imageīy default, a page background image will scroll with the page. Note that you can also use the background-image property (and indeed any of the background properties) on divs, tables, table cells, paragraphs, etc. See this example in action! (Use your browser’s Back button to return here.) Here is my Web Page with a background image! For example, to set a background image for a Web page, you could use something like this: You can use the background-image property to specify a background image for an HTML element. This is a paragraph with a yellow background colour. The background-color property lets you set the background colour for an HTML element. However, it’s also very easy to make Web pages look horrible, or even unreadable with the wrong type of background! The section at the end of the tutorial will help you avoid some of the common pitfalls associated with backgrounds. Whether the background image scrolls with the page, or is fixed on the screenĪdding a nice coloured or graphical background to your Web pages is a quick and easy way to spice up your site.The background image for a Web page, table, paragraph, etc.The background colour to use for a Web page, table, paragraph, etc.This tutorial shows you how to work with the various CSS background properties. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |