How to Input Scalable CSS Backgrounds With PNG
A scalable background for a website is one that automatically resizes to be larger or smaller depending on the screen resolution people who view your page are using, always filling the entirety of the page. You can easily set a scalable background for your website using a high-quality PNG image and the "background-size" CSS 3 property, supported by recent versions of all modern browsers.
Other People Are Reading
Instructions
-
-
1
Create or locate an appropriate background image in PNG format. The larger the image is, the better: the image will reduce to a smaller size smoothly, but may look grainy or blurry when enlarged beyond its actual size.
-
2
Upload the image to your website, making a note of its URL.
-
-
3
Decide how the background should be aligned on the website, both vertically and horizontally. You can align the background at the top, center or bottom of the page vertically, and at the left, center or right of the page horizontally.
-
4
Add the following code to your CSS style sheet, replacing "IMAGE_URL" with the URL of the background image, "VERTICAL" with your chosen vertical alignment and "HORIZONTAL" with your chosen horizontal alignment:
html {
background:url("IMAGE_URL") no-repeat VERTICAL HORIZONTAL fixed;
background-size: cover;
}
-
1
