I've added background-size: cover; to .pattern-bg.
The background png on the homepage is 1920px wide, which works great on 1080p monitors. On 1440p and above however, it repeats in the x direction, giving an ugly line:
I think background-size: cover; offers a reasonable solution in my opinion, it keeps the image identical at a width of 1920px, while scaling it at the same aspect ratio at higher resolutions:
An alternative would be to create a png which repeats nicely, or generate the triangle pattern on the fly (https://github.com/qrohlf/trianglify).
I've added
background-size: cover;to.pattern-bg.The background png on the homepage is 1920px wide, which works great on 1080p monitors. On 1440p and above however, it repeats in the x direction, giving an ugly line:
I think
background-size: cover;offers a reasonable solution in my opinion, it keeps the image identical at a width of 1920px, while scaling it at the same aspect ratio at higher resolutions:An alternative would be to create a png which repeats nicely, or generate the triangle pattern on the fly (https://github.com/qrohlf/trianglify).