|
Webdesign articles: CSS background tutorials |
Sample Web DesignsUser submitted Webdesign Articles and Tutorials CSS background tutorialsBy James Middleton - 26th of January 2007 Using Cascading Style SheetsPeople often ask me how to put an image like a drop shadow in the background of a page without relying too heavily on HTML. I always give the answer - I use CSS. CSS is such an incredible language; both easy to learn and time-saving. CSS will allow you to do things with text, images and standard HTML code that you cannot do with HTML alone. One feature that I think you find useful is the use of the background-image property within CSS. A background-image for page back-drops If I wanted to use an image as a background to my webpage, of course, I could always specify this in HTML: <body background="/images/background.gif"> Good stuff! However, I can gain little control over how the image will now display itself - how and in which direction I'd like to see it repeat or tile. Instead of relying too heavily on HTML to get the job done, I will now show you how to achieve a background image and gain greater control over its formatting using CSS. Example 1 <style type="text/css"> body {background-image: url("images/background.gif")} </style> This will put an image in the background of the body of your page. Now let’s look at adding a little more control to the image’s appearance. Example 2 <style type="text/css"> body {background-image: url("images/background.gif"); background-repeat: repeat-y; background-position: center; } </style> Now I have included the use of the ‘background-repeat’ and ‘background-position’ properties. My image will now repeat or tile in the ‘repeat-y’ direction (y = vertical, x = horizontal), and the image will remain central to the body of my page using the ‘background-position: center’ property and value. About this Article Author: James Middleton You are free to use this article on your own website or email newsletters on the condition that you do not change it in anyway. You must also acknowledge the author and leave a link to: www.turningturnip.co.uk/web-design-articles
Main SiteHome »Contact us» Articles & TutorialsPhotoshop Tutorials »Photoshop Articles » Webdesign Articles » Website Validation » SEO Facts » Content Management » Low Cost Hosting » Other PagesDisclaimer »Privacy Policy »  |