Images
CSS background-image Property
The background-image property sets one or more background images for an element. As the name suggests the images are placed in the background of an element meaning that you can place content (such as text) on top (within the same element).
By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
You can control the repetition, placement and size of a background-image with additional "background" properties.
CSS code:
body { background-image: url(../images/water-tile.jpg); } <br>
<body><br />
</body>
The background-repeat property:
With the background-repeat property you can have an image repeat wither horizontally only ("repeat-x"), vertically ("repeat-y") or not at all ("no-repeat").
CSS code:
body { <br>
background-image: url(../images/water-tile.jpg);<br>
background-repeat: repeat-x;<br>
} <br>
The background-position property:
It sets the starting position of a background image. The default values are "0% 0%" which means the distance from the left side of the browser is 0% and the distance from the top of the browser is 0%;
Other position values are "left top", "left center", "left bottom", "right top", "right center", "right bottom", "center top", "center center", "center bottom".
CSS code:
body { <br>
background-image: url(../images/water-tile.jpg);<br>
background-repeat: no-repeat;<br>
background-position: 50% 10%;<br>
} <br>
The background-size property:
Yes, you guessed it: The background-size property specifies the size of the background images. The default value is "auto" which is the size of the actual image (non-scaled).
Values are:
- percentage or pixels ("30% 60%") of which the first value specifies with width and the second value the height.
- "cover" scales the background image to fit the element without distorting the image (not all of the image may show).
- "contain" scales the background image to fit loosing the aspect ratio.
-
CSS code:
body { <br>
background-image: url(../images/water-tile.jpg);<br>
background-repeat: no-repeat;<br>
background-position: center center;<br>
background-size: cover;<br>
} <br>
The background-attachment property:
The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.
Most common values are "scroll", "fixed" and "local".
CSS code:
body { <br>
background-image: url(../images/water-tile.jpg);<br>
background-repeat: no-repeat;<br>
background-position: center center;<br>
background-attachment: fixed;<br>
} <br>
Layering Background-Images:
It's possible to layer background images. Just list two properties with separated by a comma. Individual background propertiy values can be applied to each image. In the example below two backgrounds are layers, the water pattern graphic and straight black horizontal lines. The water pattern doesn't repeat in this case and is set to scale ("cover"). The lines repeat but and are shown 1:1 scale ("auto"). The first image listed will show in the top layer.
CSS code:
body { <br>
background-image: url(../images/h_b-10_w-40.png), url(../images/water-tile.jpg);<br>
background-repeat: repeat, no-repeat;<br>
background-size: auto, cover;<br>
} <br>
CSS ("Regular") Images
Regular/non-background images are placed/linked within the HTML markup. Below are a few styling option available. For a full list of possibilities please check this page on w3schools.com
HTML code:
<body class="water-tile"><br />
<br />
<div class="boat-1"><br />
<img src="images/paper_boat.png" alt="paper-boat"/> <br />
</div><br />
<br />
<div class="boat-2"><br />
<img src="images/paper_boat.png" alt="paper-boat"/> <br />
</div><br />
<br />
<div class="boat-3"><br />
<img src="images/paper_boat.png" alt="paper-boat"/> <br />
</div><br />
<br />
<div class="boat-4"><br />
<img src="images/paper_boat.png" alt="paper-boat"/> <br />
</div><br />
<br />
</body>
.water-tile { <br>
background-image: url(../images/water-tile.jpg) ; <br>
} <br>
.boat-1 { <br>
width: 500px; <br>
margin: 50px auto; <br>
} <br>
.boat-1 img { <br>
width: 100%; <br>
height: auto; <br>
} <br>
.boat-2 { <br>
width: 500px; <br>
margin: 50px auto; <br>
} <br>
.boat-2 img { <br>
width: 100%; <br>
height: auto; <br>
border: 1px solid #000; <br>
border-radius: 50px; <br>
background-color: hsla(0,0%,0%,0.20); <br>
} <br>
.boat-3 { <br>
width: 500px; <br>
margin: 50px auto; <br>
} <br>
.boat-3 img { <br>
width: 100%; <br>
height: auto; <br>
-webkit-filter: blur(9px); /* Chrome, Safari, Opera */ <br>
filter: blur(9px); <br>
} <br>
.boat-4 { <br>
width: 500px; <br>
margin: 50px auto; <br>
} <br>
.boat-4 img { <br>
width: 100%; <br>
height: auto; <br>
-webkit-filter: invert(100%); <br>
filter: invert(100%); <br>
} <br>
Maybe most important to point out here is the combination of an image container div and the actual image placed inside this container. The CSS for the image ("img" selector) set to "width: 100%" and "height: auto" makes the image scale as big as the container is. Having images widht flexible/fluid size is important for responsive design solutions. Using a div container and image combo in general allows to more options in regards to placement and styling.