Background images in web pages are best avoided in most circumstances. Very often the technique fails in execution due to issues with different browser portal size and legibility issues.
In this tutorial:
Required knowledge:
1. Background-image basics
It is possible to code a background image in an HTML element. This should be done using CSS as follows:
body {
background-image: url('big-bird-peak.png');
}
2. Fine-tuning
body {
background-image: url('big-bird-peak.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
}
By placing the image on the right-hand side of the page, I have avoided the problem of having text over the picture which can render the text unreadable. The image is fixed, meaning should the user scroll up and down, the image will stay fixed in the background.
3. Tiling
Adding a small, tiled background image used to be incredibly popular. This takes some planning and basic graphic editing skills. The below image is a PNG with a transparent background.
The above PNG is used as a “tile” in the background of the web page. Because legibility is often affected when a background image is present, I have added a background colour to the div containing the text and made it slightly transparent using background: rgba(213, 248, 211, 0.8); Use the following link to learn how to express colours in rgba notation: https://rgbacolorpicker.com/rgba-to-hex [2]
Play with the Codepen below:
See the Pen Tiled background image by David Fox (@foxbeefly) on CodePen.
4. “Hero” image
Background images are not all bad — have a look at W3School’s “Hero” image idea.
You can even use a video as a background! See the Video background in HTML using CSS tutorial.
References:
- W3schools. (2023). CSS background-position property. Available at: https://www.w3schools.com/cssref/pr_background-position.php (Accessed: 17 February 2023).
- (No date) RGBA to Hex. Available at: https://rgbacolorpicker.com/rgba-to-hex (Accessed: 25 June 2024).