Web Analytics Made Easy -
StatCounter CSS Background Problem with Length - CodingForum

Announcement

Collapse
No announcement yet.

CSS Background Problem with Length

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS Background Problem with Length

    Hello All,

    The site I am developing is:

    http://autumninthecotswolds.co.uk/

    I am using the following CSS:

    html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: verdana;
    font-size: 10pt;
    color: #000000;
    z-index: 1;
    }
    img#background{
    position:absolute;
    display: inline;
    height:100%;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: -1;
    }

    And the top of my page is:
    <body topmargin="0" leftmargin="0" onload="initalt()" bgcolor="#353534">
    <img src="images/siteBG.gif" alt="" id="background">
    <div id="content">


    The problem that I have is the it sizes the image to fit the screen, but where the page is longer then the initial load size, the image is too short and if you scroll down it is very noticable.

    My ideal solution would be either resize the image and then display as a static background, or less ideal would be to have the background resize but then repeat itself vertically.


    Can anyone help me with this?

    Thanks in advance

    Alex

  • #2
    My suggestion is to take a larger image according to the maximum screen resolution available and use following code:
    Code:
    * {
    margin:0;
    padding:0;
    }
    
    body {
    background:url(images/bgimage.png) center no-repeat;
    }

    Comment


    • #3
      In cases like this - I usually use a background image that is about 2000 pixels by 2000 pixels. However, my background are simply fading colours - not actual images or photos, so it really depends on the background itself.

      Comment

      Working...
      X