Let us demonstrate how you can add and position a background image in an HTML document with CSS styles.
How to position a background image.background-image: defines one or more background images for the element.background-repeat: specifies if/how a background image is repeated.background-attachment: defines whether a background image scrolls with the rest of a page or is fixed.background-position: defines the starting position of a background image.Example of adding a background image: Title of the document body {background-image: url('https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg');background-repeat: no-repeat;background-attachment: fixed;background-position: center; } Try it Yourself »ResultIn the example above, the background image is positioned in the center (you can also use other values such as left top; left center; left bottom; right top; right center; right bottom; etc.).
Here are some ways of positioning a background image:
Repeat (vertically or horizontally)No repeatFull pageTo repeat a background image, you can use the following values:
repeat, which repeats the background image vertically and horizontally,repeat-x, which repeats the background image only horizontally, repeat-y, which repeats the background image only vertically.Is it possible to add a background image without a URL From the Computer?Unfortunately, it is not possible to add a background image to a webpage without specifying the image's URL. This is because web browsers need to know where to locate the image file in order to display it on the page.
Unfortunately, it is not possible to add a background image to a webpage without specifying the image's URL. This is because web browsers need to know where to locate the image file in order to display it on the page.
Example of adding a background image repeated vertically: Title of the document body {background-image: url("https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg");background-repeat: repeat-y; } Try it Yourself »In the example above, the background image is repeated only vertically.
Use the "no-repeat" value so as the background image won't be repeated (the image will only be shown once).
Example of adding a non-repeated background image: Title of the document body {background-image: url("https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg");background-repeat: no-repeat; } Try it Yourself »CSS3 introduced the background-size property, which helps us to control the background-image size as displayed in its parent element. In the following example, as a background-size value, we use “cover”, which scales the background image as much as possible so that the background image entirely covers the area.
To create a full-page background image, also add a background image to the container with the height set to 100%.
Example of adding a full-page background image: Title of the document body, html {height: 100%;margin: 0; } .bg {background-image: url("https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg");height: 100%;background-position: center;background-repeat: no-repeat;background-size: cover; } Try it Yourself »To add a transparent background image, you need the opacity property, which specifies the transparency of an element. Take a value from 0.0-1.0. to decrease the transparency (e.g. 0.2 is hazy, 0.5 makes half transparent).
Example of adding a background image with a specified opacity: Title of the document img {opacity: 0.5; } Try it Yourself »In the example above, the image has 50% opacity.