Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Alternative to image background for a grid-look-alike

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #238076
    psntrtr
    Participant

    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…

    #238077
    Paulie_D
    Member

    Use an SVG image.

    A small repeating image would probably be most performant.

    #238078
    Atelierbram
    Participant

    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.

    #238081
    psntrtr
    Participant

    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

    #238084
    Atelierbram
    Participant

    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.

    #238085
    psntrtr
    Participant

    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!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.