Treehouse: Grow your CSS skills. Land your dream job.

Textured backgrounds

  • # January 6, 2012 at 6:45 pm

    I have a general question.

    I tried uploading a textured background to my blog instead of just a color. However, when I did, the site loaded extremely slow and the background would load in “waves” instead of all at once. This is probably because I actually uploaded an image that I just tiled.

    But I’m puzzled because there are sites like this, where they have a slightly textured background, but no loading problems like I had. Or even this site, where they obviously have an image in the background but it loads just as fast as my single-color background. This site—CSS Tricks—is another option. The lines in the background, are they an image file?

    I want to know how to have a textured background without making the site load suffer, as apparently these other examples have done.

    # January 6, 2012 at 6:55 pm

    What size is the image you are loading?

    # January 6, 2012 at 7:20 pm

    @jatthey The lines in the background of this site are using CSS gradients. The loading issue is because of the file size. Try reducing the image.

    # January 6, 2012 at 7:32 pm

    The image is 2000×2000, 4.9 MB. I know that’s huge. I tried using a free image compressor I found online, but it didn’t help much at all.

    Another thing about the image is that it doesn’t look 2000×2000 on the site, it looks much smaller.

    Is using an image the only way to do this? What about “CSS gradients” or something else?

    # January 6, 2012 at 7:35 pm

    Yeah, that is way too large. Can you link to the image?

    # January 6, 2012 at 7:47 pm

    Holy hell that’s a massive file! Assuming it’s a repeating texture, you should only need a very small image.

    # January 6, 2012 at 7:51 pm

    @joshuanhibbert @ChristopherBurton @TheDoc haha, I know that’s huge. So should I make the image really tiny, try to compress it, and see how that works? I can try linking it too, instead of uploading it, will that help?

    Again, is this the only way to do it? An image file? Is there some other way? How do you think those other guys do it?

    # January 6, 2012 at 7:53 pm

    @jatthey Can we please see the textured image you are speaking of to further help you?

    # January 6, 2012 at 7:53 pm

    Two options with this really, create a small version – I’m thinking 64×64 px and set it to repeat, provided the joins aren’t obvious. Or, apply a CSS3 gradient and then overlay a noise layer PNG (that is small and repeating).

    # January 6, 2012 at 7:55 pm

    Like Chris is suggesting, the only way we can provide accurate help is by seeing what you’re dealing with!

    # January 6, 2012 at 8:03 pm

    Here’s the image: https://lh5.googleusercontent.com/-eSc-_yjgbl4/TweZSOGF0OI/AAAAAAAABkI/2qAtrREz8kE/s720/Background%252520test%2525203.png

    It’s huge, but obviously I can make it smaller.

    It’s just barely textured, and the joins aren’t obvious.

    # January 6, 2012 at 8:09 pm

    Here’s a replacement image for you – 16KB.

    http://www.unleash-it.co.uk/images/replacement.jpg

    Basically you would put the below in your stylesheet (obviously replacing my link with yours.) and editing .div to whatever the background is for – I imagine for body?

    .div {background:url(http://www.unleash-it.co.uk/images/replacement.jpg) repeat;}

    Result here: http://jsfiddle.net/5fDf5/

    # January 6, 2012 at 8:13 pm

    Actually PNG is even less. (6KB)

    http://www.unleash-it.co.uk/images/replacement.png

    http://jsfiddle.net/5fDf5/2/

    # January 6, 2012 at 8:16 pm

    Check it out

    How’s the speed?

Viewing 15 posts - 1 through 15 (of 23 total)

You must be logged in to reply to this topic.