Alternative to image background for a grid-look-alike

[psntrtr]

Dear all,

I’m wondering if there is another alternative to the background-image with transparent PNG?

As you can see on this website, http://www.blackhorseworkshop.co.uk/

they use a PNG image repetition to make this grid, I try to achieve the same but without an image, I was wondering if there is a way to do this with only code, as such as SVG? Wonder if it make the website slightly faster if the browser doesn’t load the image and repeat it.

Thanks for your opinion.

EDIT: I also think that as a matter of responsiveness, it doesn’t look good, and on retina screen, the PNG looks also blurry…

[Paulie_D]

Use an SVG image.

A small repeating image would probably be most performant.

[Atelierbram]

Totally, embedded SVGs in data-URIs is a thing. Certainly for those geometric patterns, like in the example you linked to; see also this example.

[psntrtr]

Thank you guys for your reply, meanwhile a friend told me about this technic, what do you think would be the best? my grid is something like squarish, 130×130 pixel, with a solid black border of 4px.

https://codepen.io/jasonadelia/pen/DnrAe

http://enjoycss.com/gallery/gradient_patterns/hj

[Atelierbram]

For this I think a SVG data URI would be best, for it could be smaller in size, and easier to maintain. Maybe also less taxing on the browser-rendering, and therefor more performant.

[psntrtr]

I see, thank you I will try with the SVG data URI, it’s something new to me but as you said it seems to be the best solution so far.

Thank you again!

[Author]

Posts