Textured backgrounds

[jatthey]

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.

[joshuanhibbert]

What size is the image you are loading?

[chrisburton]

@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.

[jatthey]

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?

[chrisburton]

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

[TheDoc]

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

[jatthey]

@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?

[chrisburton]

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

[TheDoc]

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

[jatthey]

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.

[jatthey]

Check it out

How’s the speed?

[chrisburton]

You can also just check with developer tools to see how fast it loads if you’re using Chrome. Well done, Andy.

[jatthey]

@joshuanhibbert @ChristopherBurton @TheDoc @andy_unleash You guys rock. Thank you.

[jatthey]

Sounds great to me!

[joshuanhibbert]

Glad to see this got sorted out :)

[Author]

Posts