It’s All Relative
The viewport you view pages on comes in many sizes. The viewport is not the page. You have to scroll inside the viewport to see the entire page. Setting up a clear difference is going to help understand how background images work.
HTML5 CSS3 Background Positions
top left, top right, bottom left, bottom right, and center. These positions can be used to position an element relative to either the viewport or the page itself. These positions are used to control the placement and layout of elements on a web page.
Here are the values for background-image positions:
background-image: url(…), url(…); /* two images if you’d like */
background-attachment: value; /* scroll OR fixed which centers it in the viewport*/
background-position: horizontal vertical; /* replace horizontal with left, center or right – the vertical is optional – default is center, or specify top, center or bottom */
background-repeat: repeat or no-repeat or repeat-y or repeat-x; /* default is top left for no-repeat */
background-size: width height; (unit of measure); OR auto; (maintain aspect ratio); OR cover; (no distortion sizes the image to fill the height and width, some clipping of the image will occur to avoid distorting the image); OR contain; (will have gaps around it to preserve proportion) /* this is the file’s properties set in a unit of measure. */
CSS3 multiple background images
body { /* Four corner images and one background image repeated */
background-image:
url (thefile/imagecorner1.png),
url (thefile/imagecorner2.png),
url (thefile/imagecorner3.png),
url (thefile/imagecorner4.png),
url (thefile/background.png);
/* Their positions followed by a comma */
top left,
top right,
bottom left,
bottom right,
top left;
/* How each repeats */
background-repeat:
no-repeat,
no-repeat,
no-repeat,
no-repeat,
repeat;
background-attachment: fixed;
background-color: #ff0072;
It all happens in the CSS….
The shorthand property – easy on the code, but doesn’t work in older browsers:
The syntax for the shorthand property to specify the different stylistic values on a single line using spaces to separate the values:
background: url (path) position / size repeat-style attachment color; /* the syntax */
background: url (path) center / contain no-repeat fixed black; /* an example */
Remember:
By default, the size of an image is determined by the dimensions specified in the image file. The default tiling for an image is set to repeat in all directions.
If you do not specify the background attachment or if the page does not have any content (meaning it has no height), the center position will place the image at the top of the viewport in the center.
You can position images relative to either the page or the viewport. If you use the background-attachment: fixed property along with the background-position: center and no-repeat properties, the image will be contained in the center of the viewport, even if the page is empty.
To get the perfect image background, you can use the background-position: left top property along with the background-size: cover property and specify the desired image size (in pixels) using the background-size property. You can also set the opacity of images using the opacity property, as covered in my article on Design with Color Control and Opacity.
Different Images for Different Devices
To reduce the load time for users on small devices, it is a good idea to serve smaller images and use @media queries to serve larger images to users with larger screens. One way to do this is to use the following
/* for width smaller than 400px; */
body {
background-image: url(img_smallimage.jpg’);
}
/* for width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url(‘img_largerimage.jpg’);
}
}
Improving the load time and page speed for mobile device users is an important factor in optimizing a website. By reducing the load time and page speed, you can improve the user experience and make your website more efficient.
For more information about Responsive Web Design – Images, visit www.w3schools.com
2023