Menu
On the web page, I'm scaling all of my images by 50% with CSS to make them look sharp on retina screens but that doesn't work for tiled images, there seems to be no way to scale a tile background image so that it will be sharp and not doubled sized on the retina screens. Sorry if this question is confusing.
632
repeat-y: This property is used to set the background image repeated only vertically.
By default, a background-image is repeated both vertically and horizontally. Tip: The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element's top left corner.
Using CSS, you can set the background-size property for the image to fit the screen (viewport). The background-size property has a value of cover . It instructs browsers to automatically scale the width and height of a responsive background image to be the same or bigger than the viewport.
The background-repeat property in CSS is used to repeat the background image both horizontally and vertically.
Setting background-size: 150px 150px; for a 300x300 background image seems to do the trick. Note that background-size: 50%; will not do what you might expect, as it sets the width and height to 50% of the parent container.
58
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
