HTML can set any image that you choose as the background of a Web page. Depending on the properties that you set, this image can stretch across the entire screen. But if the user resizes the page after opening it, the background image will remain the same size. A scroll bar will then usually appear. To autofit the background, letting it change its size along with the window, edit the page's CSS properties.
- Skill level:
Other People Are Reading
Insert the following code within your stylesheet's "body" declaration block:
overflow-y: hidden ! important;
overflow-x auto ! important;
Create a new declaration block labelled "bg_image." Insert the following code in it:
Though it seems intuitive to add "height: 100%" in this block, leave that line out. It will affect the image's aspect ratio.
Create another declaration block labelled "content." Insert the following code in it:
Move from the stylesheet to the web page itself. Add the following code right after your <body> tag:
<img src="photos/landscape.jpg" />
Replace "photos/landscape.jpg" with your background image address.
Place all of the page's content between the following two tags:
- 20 of the funniest online reviews ever
- 14 Biggest lies people tell in online dating sites
- Hilarious things Google thinks you're trying to search for