How would you make this background work

[MrPaulsen]

I have made a nice design in photoshop and it’s time to get cracking with the code!

This is not my favorite part, but i’m getting the hang of it soon enough :)

My question is how can i make this ( http://img84.imageshack.us/i/backgroundhelp.jpg/ ) background as dynamically as possible?

Can i mimic the whole background using only CSS3 and no images?

Or..? What would you guys do?

Thanks :)

If you have any comments about the design, please don’t hesitate to let me know :)

[jacorre]

You could crop a 1 pixel in width sliver of the image and repeat it horizontally to get the background affect. The cropped height will go from the top to the very bottom of the dark stripe. Check out my tutorial on CSS repeating backgrounds.

[chrisburton]

Not CSS3 but you can make the same “noise” effect using only code. Javascript and Canvas. That would load instantaneously and you would just have to set the colors.

If you choose not to use that method, you can splice some of the needed image to make the same effect WITH CSS3. Not sure if 1px would work as it might cut off and will show where it repeats. On mine, I had to use 103px. There’s also ways to compress your images so they have a small file size to render a fast loading time.

[iancoates]

Design is fine but sort the spelling and grammar before making it live

[chrisburton]

yeah, that might help as well

[MrPaulsen]

Thanks for all the answers.. I will try to figure it out :)

And the copy on the site is just a “rough” the client still needs to go through it :)

Thanks again!

[MrPaulsen]

I ended up making the bg image a little wider, and then repeating it.

Take a look here if you like: http://www.rpgrafik.com/pokerzebra/Index.html

Thanks again :)

[Author]

Posts