Setting the Background Color and Image

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        p { 
            border: medium solid black; 
            background-color: lightgray; 
            background-image: url(http://java2s.com/Book/HTML-CSSImages/star.png); 
            background-size: 40px 40px; 
            background-repeat: repeat-x; 
        } 
        </style> 
    </head> 
    <body> 
        <p> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
        </p> 
    </body> 
</html>
Click to view the demo

The background-repeat Values

ValueDescription
repeat-xRepeats the image horizontally and the image may be fragmented.
repeat-yRepeats the image vertically and the image may be fragmented.
repeatRepeats the image in both directions and the image may be fragmented.
spaceThe image is repeated to fill the space without creating fragments.
roundThe image is scaled to repeat without creating fragments.
no-repeatThe image is not repeated.

You can specify a value for both the horizontal and vertical repeats. If you provide only one value, the browser will use that repeat style in both directions.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        p { 
            background-image: url(http://java2s.com/Book/HTML-CSSImages/star.png); 
            background-repeat: repeat-x; 
        } 
        </style> 
    </head> 
    <body> 
        <p> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
        </p> 
    </body> 
</html>
Click to view the demo
Home 
  HTML CSS Book 
    CSS  

Background:
  1. Setting Element Backgrounds
  2. Setting the Background Color and Image
  3. Setting the Background Image Size
  4. Setting the Background Image Position
  5. Setting the Attachment for the Background
  6. Setting the Background Image Origin
  7. Using the background Shorthand Property
Related: