Scribd Logo
Upload

Welcome to Scribd!

  • CSS Background Properties

    Uploaded by

    Sonam Gaurav Bhutani
    35 views4 pages
    Background-image: url('bgdesert.jpg'); background-repeat: repeat 4.How to repeat a background image only vertically body background-image; background-position: center; background-attachment: fixed.how to set the background color body background-color: #00ff00 h1 this is header 1 this is header 2 this is a paragraph 1.Set the background-color: yellow h2 this is header 3 this is

    Original Description:

    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?

    Report this Document
    Background-image: url('bgdesert.jpg'); background-repeat: repeat 4.How to repeat a background image only vertically body background-image; background-position: center; background-attachment: fixed.how to set the background color body background-color: #00ff00 h1 this is header 1 this is header 2 this is a paragraph 1.Set the background-color: yellow h2 this is header 3 this is

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    35 views4 pages

    CSS Background Properties

    Uploaded by

    Sonam Gaurav Bhutani
    Background-image: url('bgdesert.jpg'); background-repeat: repeat 4.How to repeat a background image only vertically body background-image; background-position: center; background-attachment: fixed.how to set the background color body background-color: #00ff00 h1 this is header 1 this is header 2 this is a paragraph 1.Set the background-color: yellow h2 this is header 3 this is

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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