CODEWITHSUNDEEP
htmlcss
Claire
Claire

Reputation: 3775

Efficient way to display background image with css

I want to add a torn, old page background image to my website. It has uneven edges and the uneven edges have a drop shadow. Here is the image. Now how am I best adding this as my background image because at the moment is almost 1mg! I am trying to reduce it in photoshop but with it having transparency, there seems little I can do with this png.

I have also thought about having nested divs, so I made this structure:

 <div id="page-top">
        <div id="page-left">
            <div id="page-right">
                <div id="page-bottom">
                    <div id="page-content">

                    </div>
                </div>
            </div>
        </div>
    </div>

I then sliced up my image and used css to style it. But the page was ignoring the parent div and just overwriting it's background image over the parent's when I wanted it to start after the parent's bg image, not overlay itself, it wasn't paying attention to the parent's div height.

Here is a screenshot of how my page looked with my body bg img of grass applied (just in case you were wondering where that came from!).

Here's the css

body{
background:url('../images/bg1.jpg') repeat-x top left;
}

#page-top{
width:100%;    
background:url('../images/pagebgTOP.png') no-repeat top left;

}

#page-left{
background:url('../images/pagebgLEFT.png') no-repeat top left;
height:640px;
margin-top:20px;
}

#page-content{
width:100%;
 background:url('../images/pageBG.png') repeat top left;
}

What do you think the best way is to do this? Bearing in mind I need to be able to have a drop shadow on the image's actual edges not the image's boundary box. PLus, it needs to be a lot smaller.

Upvotes: 0

Views: 1498

Answers (3)

Litek
Litek

Reputation: 4888

Divide this image into to separate ones.

  1. Jpeg with the inside. It can be compressed pretty efficiently - experiment with compression, you can go down to 60 or even 50 with satisfying results.
  2. png with just uneven parts and shadows and transparent rectangle in the middle.

Set the png one as background of outer wrapper, and jpg for the inner.

The extra HTTP request is well worth the image size you save. To go one step further - if you're good with Photoshop you can try to make seamless tile for the inside, but it's not gonna be easy.

Upvotes: 0

SeanCannon
SeanCannon

Reputation: 77996

This is an interesting question, because I believe the answer goes far deeper than simple CSS tricks. Do you really need that photo as your background image? Compare sites from the late 90's to sites of today - huge photoshopped images with drops-shadows requiring code hacks to implement when all it does is slow down the site and distract the user from the content, which is, hopefully, what you want the user to view, right?

As for dealing with the size of your background image, you will definitely want to take advantage of image compression tools at your disposal. My favorite by far is Yahoo's smush.it. Unfortunately with your particular image, it's a transparent PNG so you'll have a hard time getting it < 1mb as is without reducing the dimensions of the graphic. If you simply give it a white background and save it as a JPEG, you can reduce the size significantly - smush.it took the JPEG down to 50k.

I'd recommend visiting a site like http://www.templatemonster.com to get an idea of what the generally accepted current web design trends are, and see what kind of CSS tricks they are using to accomplish their design implementations.

I can't in all good conscience help you implement that background image with the torn edges and the drop shadow, but hopefully I can help you find a much better solution which will help you excel dramatically in web design.

Upvotes: 1

Dash
Dash

Reputation: 17428

In Photoshop, go to File -> Save for Web & Devices. If you save it as a JPEG and check "Progressive" this will let the photo load in resolution increments. This means the user will first see a low res version and then the resolution will increase as it loads in.

Another option would be to use JavaScript to have the image fade in. This doesn't shorten loading time but it will look lest abrupt than just popping in when it's ready.

//page fade in
$(function () {
    var img = new Image();
    $(img).load(function () {
            $("#loaded").fadeIn();
            $("#loader").removeClass('loading');
    }).error(function () {
        // notify the user that the image could not be loaded
    }).attr('src', '../picturename.jpg');
});

Upvotes: 0

Related Questions