Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Senior Member
    Join Date
    Oct 2007
    Posts
    241
    Member #
    15910
    For the following html code
    HTML Code:
    <div class="mainarea2">
    <img src="pictures/mbg1.jpg" width="100%" height="100%">
    </div>
    and the css code
    .mainarea2
    {
    position:absolute; 
    top:0px; 
    left:905px; 
    height:1300px;
    background: url('pictures/mbg1.jpg') repeat-x 0 0;
    }
    the image mbg1.jpg is 1px wide only. (height is 300px but doesnt matter here)
    the 1px image correctly repeats itself horizontally just enough to fill the rest of the screen on the right side. So, for a wider screen, the filled width is more than a narrower screen, which is correct. However, for a narrower screen, there is a left - right scroll bar appears unnecessarily at the bottom of the browser. I am saying unnecessary because as I said the image fills the right side just enough and it doesnt extend beyong screen width... (plus I dont want to see that either)..
    1 - So for the narrow screen, why might there be a bottom left right scroll bar at the bottom? And how can I eliminate it? The website address is robotdukkani.com

    2- ALso, one more question. the image, before i modified to 1px, was about 2300 bytes. Now the 1px image is about 300 bytes. when you consider the image repeats horizontally about 300 times or so, does it mean the whole loaded quantity is about 300x300 which is 90000, much more than the original 2300 byte single image? (I am asking as I am concerned about page loading speed)

  2.  

  3. #2
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    1 - So for the narrow screen, why might there be a bottom left right scroll bar at the bottom? And how can I eliminate it? The website address is robotdukkani.com
    Not sure if your problem would be from that div, could be something else. Absolute positioning will do that with a lower res monitor. Plus you are using a bg image the same as the image in the div?


    EDIT::: Ok I just took a look. You problem lies with the "rightside" div. It's set too far over, that's why the scroll bar.

    2- ALso, one more question. the image, before i modified to 1px, was about 2300 bytes. Now the 1px image is about 300 bytes. when you consider the image repeats horizontally about 300 times or so, does it mean the whole loaded quantity is about 300x300 which is 90000, much more than the original 2300 byte single image? (I am asking as I am concerned about page loading speed)
    No, it will only need to download the image once. From there it goes in the cache and is called upon when needed.

  4. #3
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    % in <img is flakey at best. you should upload the image at the size it needs to be or use px in place of % in the <img tag. as well the only way to set bg to screen size is to set
    { position: relative; width: 100%; height: 100%; } but for your use it probably needs to be absolute; . if untrue give more info on its implimentation and i will check back and offer advice if you are interested. also if this is inside of a container div i would add borders to all divs and elements one at a time until you track down the offending div or element, be sure to crossbrowser check it before calling it a day. CSS border { border-style: solid; }

    while($get_it !== true){ continue; }


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:05 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com