Using CSS to Scale a Background Size
Here is a quick CSS code snip to scale a background image of an element.
You must first declare the background-size then set the width and height.
1 2 3 4 5 6 |
/*Scale the background image to a fixed dimension*/ div { background: url(img_flwr.gif); background-size: 80px 60px; background-repeat: no-repeat; } |
or
1 2 3 4 5 6 |
/*Scale the background image to a variable dimension*/ div { background: url(img_flwr.gif); background-size: 100% 100%; background-repeat: no-repeat; } |
You can find more information at w3schools.com
Alternatively there is a background cover attribute you may also use:
1 2 3 4 5 6 7 |
/*Background Cover*/ div { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } |
Recent Comments