Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,487
    Thanks
    279
    Thanked 32 Times in 31 Posts

    preload background image

    Hi, i have a background image and decided rather than have it on repeat to just have it as one image with no repeat, its big enough i think it will be ok 1280 x 720.

    I have noticed that the site does hessitate just for a moment when it loads so i thought i might preload that image before anything else loads.

    I have seen several methods, css, js, jquery, but all of those do more than i want to do, those examples have to do with preloading if you have a hover and all that.

    What i want to know is that is the most efficient method of preloading a large background image? That is all it has to do is load it before anything else loads.

    Do i use an onload in the body or do i use css?

    Just not sure on this one.

    Thanks

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,932
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Well, what’s the point? Why make people wait for the content for which they are coming just to display a background image at first (or at the same time)? As simple solution I’d really suggest that you should make the image as small as possible and use repeating if possible.

  • #3
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,487
    Thanks
    279
    Thanked 32 Times in 31 Posts
    Yeah i kinda figured i was headed the wrong direction when i did that. Ill reduce it and use repeating, thanks.

  • #4
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,487
    Thanks
    279
    Thanked 32 Times in 31 Posts
    OK done, 500x500 loads nice but how do i get rid of the lines? I am using a gif as the background, should i use jpg would that help?

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,932
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Which lines? I can’t sense your image/page, you have to show it.

  • #6
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,487
    Thanks
    279
    Thanked 32 Times in 31 Posts
    yes i know and i wish i could but i cant, the client has specifically said no links to the site anywhere, so i have to abide by their wishes. I guess i could create another file and take a snapshot of it and send you that.

    Basically what it is is a 500x500 image and it has a slight horrizontal line across the page where the repeat images meet. Nothing vertical, just horrizontal. I did try both jpg and gif and same thing.

    If it was both vert and horriz i would say it was the image, the image was made in ps so it should be ok regarding border area.

    here is the css if you want that for now.

    Code:
    body{
    font-family:verdana;
    font-size:11px;
    background-image:url(images/bg.gif);
    background-position:top;
    /* background-color:#000000; */
    color:#000000;
    }

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,932
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Well, yeah, create a similar image and post it here. There must be something at the edge. This can happen if the edge of the object doesn’t match the pixel edge and some anti-aliasing occurs.

  • #8
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,487
    Thanks
    279
    Thanked 32 Times in 31 Posts
    ok there is the sample attached, i put an arrow that shows the issue. The little box is actually a copy and paste from the site that shows the horrizontal line. Look close its there lol.. Its alot more obvious on the site.

    Also it is the css i think because i even took that 500x500 block and cut it smaller in paint and tried it as jpg and still same line.
    Attached Thumbnails Attached Thumbnails preload background image-linesample.jpg  

  • #9
    Regular Coder
    Join Date
    Mar 2012
    Posts
    102
    Thanks
    2
    Thanked 5 Times in 4 Posts
    It looks like a color then a background image lol. Why not just use
    Code:
    background-color:#####;
    and make it the same color as the so called "image" lol.


    EDIT: Or you can make the images height 1000 (then the line will go off the screen) and then use repeat.
    Last edited by bigcasey123; 11-02-2012 at 01:17 AM.

  • #10
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,487
    Thanks
    279
    Thanked 32 Times in 31 Posts
    Because it is not just a bg color, it had the site image logo on there in photoshop many times all over that in all directions, but i took them out and just left the first layer for you to view.

    And i dont want to make it really long because if i do that i might as well just go back to my large image background that i had in my first post of this topic.

  • #11
    Regular Coder
    Join Date
    Mar 2012
    Posts
    102
    Thanks
    2
    Thanked 5 Times in 4 Posts
    Save the image as .png and see if that works, .png takes away the background color behind the image. If that don't work then i have no clue lol.

  • #12
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,487
    Thanks
    279
    Thanked 32 Times in 31 Posts
    tried png and still same line, so im lost as well. lol thanks for your effort it is appreciated.

  • #13
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,932
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Please attach the very image you created in Photoshop so I can download it and have a closer look myself.


  •  

    Posting Permissions

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