Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 50 views

    Ishu Jain..

    Uploaded by

    Sonam Gaurav Bhutani
    The document describes different ways to style background images and colors in HTML using CSS, including: 1) Setting background colors for body, headers and paragraphs. 2) Setting a background image for the body and repeating it. 3) Repeating a background image vertically, horizontally or only once. 4) Positioning a background image using pixels, percentages or center alignment. 5) Creating a fixed background image that does not scroll with the page. 6) Declaring all background properties in a single declaration.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd

    Ishu Jain..

    Uploaded by

    Sonam Gaurav Bhutani
    50 views4 pages
    The document describes different ways to style background images and colors in HTML using CSS, including: 1) Setting background colors for body, headers and paragraphs. 2) Setting a background image for the body and repeating it. 3) Repeating a background image vertically, horizontally or only once. 4) Positioning a background image using pixels, percentages or center alignment. 5) Creating a fixed background image that does not scroll with the page. 6) Declaring all background properties in a single declaration.

    Original Title

    ishu jain..

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document describes different ways to style background images and colors in HTML using CSS, including: 1) Setting background colors for body, headers and paragraphs. 2) Setting a background image for the body and repeating it. 3) Repeating a background image vertically, horizontally or only once. 4) Positioning a background image using pixels, percentages or center alignment. 5) Creating a fixed background image that does not scroll with the page. 6) Declaring all background properties in a single declaration.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    50 views4 pages

    Ishu Jain..

    Uploaded by

    Sonam Gaurav Bhutani
    The document describes different ways to style background images and colors in HTML using CSS, including: 1) Setting background colors for body, headers and paragraphs. 2) Setting a background image for the body and repeating it. 3) Repeating a background image vertically, horizontally or only once. 4) Positioning a background image using pixels, percentages or center alignment. 5) Creating a fixed background image that does not scroll with the page. 6) Declaring all background properties in a single declaration.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    You are on page 1of 4

    1.

    Set the background color


    <html> <head> <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html>

    2.Set an image as the background


    <html> <head> <style type="text/css"> body { background-image: url('bgdesert.jpg') } </style> </head> <body> </body> </html>

    3.How to repeat a background image


    <html> <head> <style type="text/css"> body { background-image: url('bgdesert.jpg'); background-repeat: repeat } </style>

    </head> <body> </body> </html>

    4.How to repeat a background image only vertically


    <html> <head> <style type="text/css"> body { background-image: url('bgdesert.jpg'); background-repeat: repeat-y } </style> </head> <body> </body> </html>

    5.How to repeat a background image only horizontally


    <html> <head> <style type="text/css"> body { background-image: url('bgdesert.jpg'); background-repeat: repeat-x } </style> </head> <body> </body> </html>

    6.How to display a background image only one time


    <html> <head> <style type="text/css"> body { background-image: url('bgdesert.jpg'); background-repeat: no-repeat } </style> </head> <body> </body> </html>

    7.How to place the background image


    <html> <head> <style type="text/css"> body { background-image: url('smiley.gif'); background-repeat: no-repeat; background-position: center; } </style> </head> <body> </body> </html>

    8.How to position a background image using %


    <html> <head> <style type="text/css"> body { background-image: url('smiley.gif'); background-repeat: no-repeat; background-position: 30% 20%; } </style> </head> <body> </body> </html>

    9.How to position a background image using pixels


    <html> <head> <style type="text/css"> body { background-image: url('smiley.gif'); background-repeat: no-repeat; background-position: 50px 100px; } </style>

    </head> <body> </body> </html>

    10.A fixed background image (this image will not scroll with the rest of the page)
    <html> <head> <style type="text/css"> body { background-image: url('smiley.gif'); background-repeat: no-repeat; background-attachment: fixed } </style> </head> <body> <p>The image will not scroll with the rest of the page</p> <p>The image will not scroll with the rest of the page</p> <p>The image will not scroll with the rest of the page</p> <p>The image will not scroll with the rest of the page</p> <p>The image will not scroll with the rest of the page</p> <p>The image will not scroll with the rest of the page</p> <p>The image will not scroll with the rest of the page</p> <p>The image will not scroll with the rest of the page</p> <p>The image will not scroll with the rest of the page</p> <p>The image will not scroll with the rest of the page</p> <p>The image will not scroll with the rest of the page</p> <p>The image will not scroll with the rest of the page</p> <p>The image will not scroll with the rest of the page</p> <p>The image will not scroll with the rest of the page</p> <p>The image will not scroll with the rest of the page</p> <p>The image will not scroll with the rest of the page</p> <p>The image will not scroll with the rest of the page</p> <p>The image will not scroll with the rest of the page</p>
    </body> </html>

    11.All the background properties in one declaration


    <html> <head> <style type="text/css"> body { background: #00ff00 url('smiley.gif') no-repeat fixed center; } </style> </head> <body> <p>This is some text</p> <p>This is some text</p> <p>This is some text</p> <p>This is some text</p> <p>This is some text</p> <p>This is some text</p> <p>This is some text</p>

    <p>This is some text</p> <p>This is some text</p> <p>This is some text</p> <p>This is some text</p> <p>This is some text</p> <p>This is some text</p> <p>This is some text</p> <p>This is some text</p> <p>This is some text</p> <p>This is some text</p> <p>This is some text</p> <p>This is some text</p> <p>This is some text</p> </body> </html>

    You might also like