Results 1 to 2 of 2

Thread: how to display full bg image on web page

  1. #1
    Join Date
    Jan 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default how to display full bg image on web page

    Joined: Sep 25, 2010
    Posts: 14
    posted Today 20:13:50
    Hi,

    i have added a background image to my content in html but, the image is small so it does not fit to whole browser screen and
    image gets repeated. any one help me out , how to cover the entire image on to the browser.

    The code is :


    Code:
    body{  
        font-family:"sans-sherif";  
        background: #bbb url(../images/background-tree.gif) no-repeat;  
        height:100%;  
        width:100%;
        margin: 0;  
        padding: 0;  
    }
    the Image which has the Dimensions of 840*623 and its gif image, when i apply the this image it get repeated at the right edge. so i want the single image to be displayed on the entire screen. i am attaching the image in the attachment. please help me out.


  2. #2
    Join Date
    Apr 2010
    Posts
    89
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    If you want it to stretch, it's going to be pixelated the larger the browser window. However, if you just want it to be the image then white space around it, use this code:

    Code:
    body{  
        font-family:"sans-sherif";  
        background: #bbb url(../images/background-tree.gif);
        background-repeat:no-repeat;
        height:100%;  
        width:100%;
        margin: 0;  
        padding: 0;  
    }

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •