The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

problem slicing and coding a background image

  • # March 23, 2009 at 4:14 pm

    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][/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][/img].
    Then I would like this image to lay on top of the previous image. [img][/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:

    * {
    margin: 0;
    padding; 0;

    html, body {
    overflow-y: scroll;

    img {
    border: 0;

    body {
    -x-system-font: none;
    background-image: url( 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:

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

    Thank you in advance for your kind and wonderful help.

    # March 23, 2009 at 4:19 pm

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

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed