This is a Premium Blog

HTML and CSS Background

Written on July 27, 2007 by admin

In this tutorials, you will learn how to set the background color with CSS.

How to set background color

PLAIN TEXT
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  6. <title>this is the title of the web page</title>
  7.  
  8. <style type="text/css">
  9. body {background-color: yellow;}
  10. h1 {background-color: #00ff00;}
  11. h2 {background-color: red;}
  12. p {background-color: rgb(250,0,255);}
  13. </style>
  14.  
  15. </head>
  18. This is a level 1 header
  19. </h1>
  21. This is a level 2 header
  22. </h2>
  24. This is a paragraph
  25. </p>
  26. </body>
  27. </html>

How to set an image as the background

PLAIN TEXT
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  6. <title>this is the title of the web page</title>
  7.  
  8. <style type="text/css">
  9.  
  10. body
  11. {
  12. background-image:
  13. url('csshtmltutorial-image.jpg')
  14. }
  15.  
  16. </style>
  17.  
  18. </head>
  20. </body>
  21. </html>

How to repeat a background image

PLAIN TEXT
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  6. <title>this is the title of the web page</title>
  7.  
  8. <style type="text/css">
  9.  
  10. body
  11. {
  12. background-image:
  13. url('csshtmltutorial.jpg');
  14. background-repeat: repeat;
  15. }
  16.  
  17. </style>
  18.  
  19. </head>
  21. </body>
  22. </html>

How to repeat an image vertically only

PLAIN TEXT
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  6. <title>this is the title of the web page</title>
  7.  
  8. <style type="text/css">
  9.  
  10. body
  11. {
  12. background-image:
  13. url('csshtmltutorial.jpg');
  14. background-repeat: repeat-y;
  15. }
  16.  
  17. </style>
  18.  
  19. </head>
  21. </body>
  22. </html>

How to repeat a background image horizontally only

PLAIN TEXT
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  6. <title>this is the title of the web page</title>
  7.  
  8. <style type="text/css">
  9.  
  10. body
  11. {
  12. background-image:
  13. url('csshtmltutorial.jpg');
  14. background-repeat: repeat-x;
  15. }
  16.  
  17. </style>
  18.  
  19. </head>
  21. </body>
  22. </html>

How to repeat one background image at a time

PLAIN TEXT
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  6. <title>this is the title of the web page</title>
  7.  
  8. <style type="text/css">
  9.  
  10. body
  11. {
  12. background-image:
  13. url('csshtmltutorial.jpg');
  14. background-repeat: no-repeat;
  15. }
  16.  
  17. </style>
  18.  
  19. </head>
  21. </body>
  22. </html>

Posted in HTML Tutorials
Tags: , , , , ,

If you enjoyed this post Subscribe to our feed

One Comment on “HTML and CSS Background”

  1. cyberst0rm | August 13th, 2007at 12:49 am

    Thanks. Been trying to find how to do this for a while now. Helpful.

    cyberst0rm’s tech blog
    http://cyberst0rm.blogspot.com

Leave a Reply