1background-image: url("image.png");
2background-position: center;
3background-repeat: no-repeat;
4background-size: cover;
1.wrapper {
2 background: url('./images/homeBg.png') no-repeat;
3 background-size: 100vw;
4 float: left;
5 height: 100vw;
6 width: 100vw;
7}
1/*Transparent Background Image*/
2
3background: linear-gradient(rgba(0,0,0,0.5),
4 rgba(0, 0, 0, 0.5)), url(milano-gallery.jpg) no-repeat center center fixed;
5 background-size: cover;
6/*
7Fills entire page with image, no white space
8Scales image as needed
9Retains image proportions (aspect ratio)
10Image is centered on page
11Does not cause scrollbars
12As cross-browser compatible as possible
13*/
1/* Answer to: "adding background image css" */
2
3/*
4 The background-image property sets one or more background images
5 for an element.
6
7 By default, a background-image is placed at the top-left corner
8 of an element, and repeated both vertically and horizontally.
9
10 Tip: The background of an element is the total size of the
11 element, including padding and border (but not the margin).
12
13 Tip: Always set a background-color to be used if the image is
14 unavailable.
15*/
16
17/* Set a background-image for the <body> element: */
18
19body {
20 background-image: url("paper.gif");
21 background-color: #cccccc;
22}
23
24/* Set two background images for the <body> element: */
25
26body {
27 background-image: url("img_tree.gif"), url("paper.gif");
28 background-color: #cccccc;
29}