Grow your CSS skills. Land your dream job.

problem slicing and coding a background image

  • # March 23, 2009 at 4:14 pm

    Hi,
    I have designed a personal blog template, and went to Firebug to see how long the page loads. It is loading in 23.47s. I want to cut the load time down to about 10-15 seconds. I had been using this background image, [img]http://i212.photobucket.com/albums/cc284/mdkallas/blog%20re-design/bckgrndimage.png[/img] but it takes the longest to load. So, I decided to go back and slice it into a smaller image. The slice image is 490×525. Here is the image I have sliced smaller.[img]http://i212.photobucket.com/albums/cc284/mdkallas/blog%20re-design/backdropdots.png[/img].
    Then I would like this image to lay on top of the previous image. [img]http://i212.photobucket.com/albums/cc284/mdkallas/floralwatercolorbckgrnd.png[/img]

    I am following Chris’ video screen cast #12. When I coded it the way Chris showed, it is not showing up in my ff browser. I would also like to know the proper coding to make this site, expandable centered site.

    Here is the pertinent css coding:

    Code:
    * {
    margin: 0;
    padding; 0;
    }

    html, body {
    overflow-y: scroll;
    }

    img {
    border: 0;

    body {
    -x-system-font: none;
    background-image: url(http://i212.photobucket.com/albums/cc284/mdkallas/blog%20re-design/backdropdots.png) top left repeat;
    font-family: Arial, “Times New Roman”;
    font-size: 12px;
    font-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 20 px;
    }

    The following is what I am getting with a browser refresh:
    [img]http://i212.photobucket.com/albums/cc284/mdkallas/blogtemplatebckgrndissue.jpg[/img]

    Everything else is out of place/alignment, but I can fix those issues later.

    Thank you in advance for your kind and wonderful help.

    Rob
    # March 23, 2009 at 4:19 pm

    dude forget all that complicated stuff and just use this file:

    http://www.svgonline.co.uk/csshelp/bckgrndimage.jpg

    your file was 3.4mbs – mine is 86kb… Its all in the saving of the file dude :)

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".