Hi, I am wondering can anyone point me to references for best practice in terms of patterned fills of DIVs, I am using a one pixel PNG or GIF, I suppose I could use SVG either and filling a div with it as a background repeat pattern.
It looks fine on desktop or mobile but looks pretty bad on large televisions, which are being used in meeting rooms a lot by corporates.
I noticed this before when I used a patterned fill as a screen over a photo, it displayed quite badly on TV.
Hi Michael, I have done a bit more experimenting on it. I am getting best results using a PNG that has 1 black pixel and 2 transparent on a row and filling the shape with that. The TV resolution seems to need a 2px gap between lines to render in a way that is not distorted. Here is the read only link, if you compare the 1st box to the 4th box you can see the difference in clarity.
Saving the PNG somewhere between 50% and 80% opacity also helps to make the lines look more refined, particularly when the overlay repeat of lines is at an angle.
This works me for me, but would be happy to hear any further suggestions!
This might seem like a small thing but frequently websites are viewed in meeting rooms and TVs and this makes the difference between an overlay screen looking wrong or right.
Here are photos from the TV screen showing the difference (close up), the first photo is clearer and the lines are less distorted.
