Scribd Logo
Upload

Welcome to Scribd!

  • 8 views

    HTML

    Uploaded by

    Edward Liew
    This document contains summaries of 4 HTML/CSS code examples: 1) An example using background images, positioning, and containers. 2) An example positioning a background image on the top right without disturbing text. 3) An example repeating a background image only horizontally. 4) An example setting font sizes in pixels for headings and paragraphs.

    Copyright:

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

    HTML

    Uploaded by

    Edward Liew
    8 views2 pages
    This document contains summaries of 4 HTML/CSS code examples: 1) An example using background images, positioning, and containers. 2) An example positioning a background image on the top right without disturbing text. 3) An example repeating a background image only horizontally. 4) An example setting font sizes in pixels for headings and paragraphs.

    Original Description:

    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?

    This document contains summaries of 4 HTML/CSS code examples: 1) An example using background images, positioning, and containers. 2) An example positioning a background image on the top right without disturbing text. 3) An example repeating a background image only horizontally. 4) An example setting font sizes in pixels for headings and paragraphs.

    Copyright:

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

    HTML

    Uploaded by

    Edward Liew
    This document contains summaries of 4 HTML/CSS code examples: 1) An example using background images, positioning, and containers. 2) An example positioning a background image on the top right without disturbing text. 3) An example repeating a background image only horizontally. 4) An example setting font sizes in pixels for headings and paragraphs.

    Copyright:

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

    Advanced background example

    <html><head>
    <style type="text/css">
    body
    {
    margin-left:200px;
    background:#5d9ab2 url('img_tree.png') no-repeat top left;
    }
    .container
    {
    text-align:center;
    }
    .center_div
    {
    border:1px solid gray;
    margin-left:auto;
    margin-right:auto;
    width:90%;
    background-color:#d0f0f6;
    text-align:left;
    padding:8px;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <div class="center_div">
    <h1>Hello World!</h1>
    <p>This example contains some advanced CSS methods you may not have learned yet. But, we
    will explain these methods in a later chapter in the tutorial.</p>
    </div>
    </div>
    </body></html>
    How to position a background image

    <html>
    <head>

    <style type="text/css">
    body
    {
    background-image:url('img_tree.png');
    background-repeat:no-repeat;
    background-position:right top;
    margin-right:200px;
    }
    </style>
    </head>

    <body>
    <h1>Hello World!</h1>
    <p>W3Schools background no-repeat, set postion example.</p>
    <p>Now the background image is only show once, and positioned away from the text.</p>
    <p>In this example we have also added a margin on the right side, so the background image will
    never disturb the text.</p>
    </body>

    </html>
    How to no repeat a background image only horizontally

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

    <body>
    <h1>Hello World!</h1>
    </body>

    </html>
    Set the size of the font in px

    <html>
    <head>
    <style>
    h1 {font-size:40px;}
    h2 {font-size:30px;}
    p {font-size:14px;}
    </style>
    </head>
    <body>

    <h1>This is heading 1</h1>


    <h2>This is heading 2</h2>
    <p>This is a paragraph.</p>
    <p>Specifying the font-size in px allows Firefox, Chrome, and Safari to resize the text, but not
    Internet Explorer.</p>

    </body>
    </html>
    http://www.w3schools.com/CSS/css_examples.asp

    You might also like