Click and drag to scroll left and right to view all 22 figures.
<!-- figure 15.1 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.large { width: 480px; height: 480px; }
.medium { width: 240px; height: 240px; }
.small { width: 120px; height: 120px; }
</style>
</head>
<body>
<h1>Image sizing</h1>
<figure>
<img class="small" src="images/beach.jpg" alt="a clean_beach">
<img class="medium" src="images/beach.jpg" alt="a clean_beach">
<img class="large" src="images/beach.jpg" alt="a clean_beach">
</figure>
</body>
</html>
<!-- figure 15.3 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
img { image-rendering: auto; }
</style>
</head>
<body>
<h2>Image-rendering</h2>
<img src="images/pixel_stars.png" width="75" height="75">
</body>
</html>
<!-- figure 15.5 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#size { width: 400px; height: 268px; }
@media (min-width: 960px) { #size { width: 800px; height: 536px; } }
@media (min-width: 1200px) { #size { width: 1024px; height: 686px; } }
</style>
</head>
<body>
<picture>
<source media="(min-width: 1200px)" srcset="images/speech-fullshot.jpg">
<source media="(min-width: 960px)" srcset="images/speech-midshot.jpg">
<img src="images/speech-closeshot.jpg" alt="The president's speech" id="size">
</picture>
</body>
</html>
<!-- figure 15.6 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<picture>
<style scoped media="(min-width: 960px)">
#size { width: 800px; height: 536px; }
</style>
<style scoped media="(min-width: 1200px)">
#size { width: 1024px; height: 686px; }
</style>
<source media="(min-width: 1200px)" srcset="images/speech-fullshot.jpg">
<source media="(min-width: 960px)" srcset="images/speech-midshot.jpg">
<img src="mages/speech-closeshot.jpg" width="400" height="268" id="size"
alt="The president's speech">
</picture>
</body>
</html>
<!-- figure 15.7 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.clipped {
-webkit-clip-path: circle(30% at 50% 50%);
clip-path: circle(30% at 50% 50%);
}
</style>
</head>
<body>
<h2>Image clipping</h2>
<img class="clipped" src="images/yacht.jpg">
</body>
</html>
<!-- figure 15.9 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
img {
width: 240px;
height: 240px;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h3>Horizontal image centering</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus ipsum sem,
nec euismod libero porttitor eu. Nulla ut urna a ligula tincidunt condimentum quis sit
amet diam. Morbi sed magna odio. Nam non ultricies eros. Cras vehicula lobortis justo.
Ut congue dapibus odio, in cursus nisl consectetur quis. Aenean volutpat volutpat
vehicula. Phasellus tempor purus sed commodo posuere.</p>
<img src="images/beach.jpg" alt="clean_beach">
<p>Nulla tincidunt ornare nisl. Morbi hendrerit magna libero, ac tempus risus dapibus
pretium. Suspendisse venenatis scelerisque nibh sed gravida. Quisque aliquet mauris
neque, vel sollicitudin nulla bibendum non.</p>
</body>
</html>
<!-- figure 15.11 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
img {
width: 200px;
height: 136px;
border: 1px solid #000;
background-color: grey;
margin-right: 5px;
}
.object-position { object-position: 60px 30px; }
</style>
</head>
<body>
<h3>Object positioning </h3>
<img src="images/buttercup.png" alt="buttercup flower">
<img class="object-position" src="images/buttercup.png" alt="buttercup flower">
</body>
</html>
<!-- figure 15.13 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
img {
width: 200px;
height: 70px;
object-fit: contain;
}
</style>
</head>
<body>
<h3>Object positioning</h3>
<img src="images/yacht.jpg">
</body>
</html>
<!-- figure 15.16 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { background-image: url("images/wood.png"); padding: 15px; }
</style>
</head>
<body>
<h2>Background image</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus ipsum sem,
nec euismod libero porttitor eu. Nulla ut urna a ligula tincidunt condimentum quis sit
amet diam. Morbi sed magna odio. Nam non ultricies eros. Cras vehicula lobortis justo.
Ut congue dapibus odio, in cursus nisl consectetur quis. Aenean volutpat volutpat
vehicula. Phasellus tempor purus sed commodo posuere.</p>
</body>
</html>
<!-- figure 15.18 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p {
background-image: url("images/wood.png");
padding: 15px;
}
</style>
</head>
<body>
<h2>Background image</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus ipsum sem,
nec euismod libero porttitor eu. Nulla ut urna a ligula tincidunt condimentum quis sit
amet diam. Morbi sed magna odio. Nam non ultricies eros. Cras vehicula lobortis justo.
Ut congue dapibus odio, in cursus nisl consectetur quis. Aenean volutpat volutpat
vehicula. Phasellus tempor purus sed commodo posuere.</p>
</body>
</html>
<!-- figure 15.21 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
background-image: url("images/club_64.jpg");
background-repeat: repeat-x;
padding: 15px;
}
</style>
</head>
<body>
<h2>Background-repeat (repeat-x)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus ipsum sem,
nec euismod libero porttitor eu. Nulla ut urna a ligula tincidunt condimentum quis sit
amet diam. Morbi sed magna odio. Nam non ultricies eros. Cras vehicula lobortis justo.
Ut congue dapibus odio, in cursus nisl consectetur quis. Aenean volutpat volutpat
vehicula. Phasellus tempor purus sed commodo posuere.</p>
</body>
</html>
<!-- figure 15.24 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
background-image: url("images/club_64.jpg");
background-repeat: space;
padding: 15px;
}
h1, p { background-color: #988670; color: #fff; padding: 10px; }
</style>
</head>
<body>
<h2>Background-repeat (space)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus ipsum sem,
nec euismod libero porttitor eu. Nulla ut urna a ligula tincidunt condimentum quis sit
amet diam. Morbi sed magna odio. Nam non ultricies eros. Cras vehicula lobortis justo.
Ut congue dapibus odio, in cursus nisl consectetur quis. Aenean volutpat volutpat
vehicula. Phasellus tempor purus sed commodo posuere.</p>
</body>
</html>
<!-- figure 15.27 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { padding: 20px; }
div {
border: 10px solid grey;
padding: 20px;
background-image: url("images/club_32.jpg");
background-repeat: repeat-x;
}
#border { background-origin: border-box; }
#padding { background-origin: padding-box; }
#content { background-origin: content-box; }
</style>
</head>
<body>
<div class="border">
<h1>Background-origin (border-box)</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ipsum at ex
ullamcorper pharetra at at dolor. Integer gravida sollicitudin consectetur. Etiam
fringilla, ligula at tincidunt interdum, metus neque auctor tellus, feugiat
sagittis elit quam et elit. Maecenas imperdiet rutrum felis dapibus tristique.
Nullam consequat, tortor ut vestibulum dictum, enim enim convallis leo, ut
sollicitudin mauris urna ac turpis.</p>
</div>
<br>
<div class="padding">
<h1>Background-origin (padding-box)</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ipsum at ex
ullamcorper pharetra at at dolor. Integer gravida sollicitudin consectetur. Etiam
fringilla, ligula at tincidunt interdum, metus neque auctor tellus, feugiat
sagittis elit quam et elit. Maecenas imperdiet rutrum felis dapibus tristique.
Nullam consequat, tortor ut vestibulum dictum, enim enim convallis leo, ut
sollicitudin mauris urna ac turpis.</p>
</div>
<br>
<div class="content">
<h1>Background-origin (content-box)</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ipsum at ex
ullamcorper pharetra at at dolor. Integer gravida sollicitudin consectetur. Etiam
fringilla, ligula at tincidunt interdum, metus neque auctor tellus, feugiat
sagittis elit quam et elit. Maecenas imperdiet rutrum felis dapibus tristique.
Nullam consequat, tortor ut vestibulum dictum, enim enim convallis leo, ut
sollicitudin mauris urna ac turpis.</p>
</div>
</body>
</html>
<!-- figure 15.29 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div {
border: 10px dotted black;
font-family: 10px;
font-family: lightpink;
}
div#one { background-clip:border-box; }
div#two { background-clip:padding-box; }
div#three { background-clip:content-box; }
</style>
</head>
<body>
<div class="one">
<h2>border-box</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ipsum at ex
ullamcorper pharetra at at dolor. Integer gravida sollicitudin consectetur. Etiam
fringilla, ligula at tincidunt interdum, metus neque auctor tellus, feugiat
sagittis elit quam et elit. Maecenas imperdiet rutrum felis dapibus tristique.
Nullam consequat, tortor ut vestibulum dictum, enim enim convallis leo, ut
sollicitudin mauris urna ac turpis.</p>
</div>
<br>
<div class="two">
<h2>padding-box</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ipsum at ex
ullamcorper pharetra at at dolor. Integer gravida sollicitudin consectetur. Etiam
fringilla, ligula at tincidunt interdum, metus neque auctor tellus, feugiat
sagittis elit quam et elit. Maecenas imperdiet rutrum felis dapibus tristique.
Nullam consequat, tortor ut vestibulum dictum, enim enim convallis leo, ut
sollicitudin mauris urna ac turpis.</p>
</div>
<br>
<div class="three">
<h2>content-box</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ipsum at ex
ullamcorper pharetra at at dolor. Integer gravida sollicitudin consectetur. Etiam
fringilla, ligula at tincidunt interdum, metus neque auctor tellus, feugiat
sagittis elit quam et elit. Maecenas imperdiet rutrum felis dapibus tristique.
Nullam consequat, tortor ut vestibulum dictum, enim enim convallis leo, ut
sollicitudin mauris urna ac turpis.</p>
</div>
</body>
</html>
<!-- figure 15.31 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
background-image: url("images/rose_transparent.png");
background-repeat: repeat-x;
background-size: 80px 80px;
}
h1, h2, p { text-align: center; }
</style>
</head>
<body>
<h1>Background-size (80x80px)</h1>
<p>Background image size is resized to 80x80px</p>
<br>
<h2>Actual size of image</h2>
<p>Below is the actual size of the image, which is 300x265px</p>
<p><img src="images/rose_transparent.png" alt="peach roses"></p>
</body>
</html>
<!-- figure 15.33 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
width: 800px;
height: 350px;
border: 1ps solid #000;
background-image: url("images/yacht.jpg");
background-repeat: no-repeat;
}
.cover { background-size: cover; }
</style>
</head>
<body>
<h2>Background-size (cover)</h2>
<div class="cover"></div>
</body>
</html>
<!-- figure 15.36 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { padding: 0 20px; }
div.multi {
width: 800px;
height: 400px;
background-image: url("images/rose_transparent.png"),
url("images/grey_wall.png");
background-repeat: repeat-x, no-repeat;
background-size: 60px 60px, cover;
}
div.inner {
width: 500px;
padding: 100px 150px;
color: #F9F0B5;
}
h2 { text-align: center; }
</style>
</head>
<body>
<h1>Multiple background images</h1>
<div multi="en-US">
<div inner="en-US">
<h2>Peach Roses</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus ipsum
sem, nec euismod libero porttitor eu. Nulla ut urna a ligula tincidunt
condimentum quis sit amet diam. Morbi sed magna odio. Nam non ultricies eros.
Cras vehicula lobortis justo. Ut congue dapibus odio, in cursus nisl
consectetur quis. Aenean volutpat volutpat vehicula. Phasellus tempor purus sed
commodo posuere.
</div>
</div>
</body>
</html>
<!-- figure 15.38 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
background-image: url("images/club_64.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
padding: 15px;
}
</style>
</head>
<body>
<h1>Background-attachment</h1>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus ipsum sem,
nec euismod libero porttitor eu. Nulla ut urna a ligula tincidunt condimentum quis sit
amet diam. Morbi sed magna odio. Nam non ultricies eros. Cras vehicula lobortis justo.
Ut congue dapibus odio, in cursus nisl consectetur quis. Aenean volutpat volutpat
vehicula. Phasellus tempor purus sed commodo posuere.</h3>
</body>
</html>
<!-- figure 15.41 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
background-color: url("images/rose_transparent.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
padding: 0 15px;
}
</style>
</head>
<body>
<h1>Background-position</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ipsum at ex
ullamcorper pharetra at at dolor. Integer gravida sollicitudin consectetur. Etiam
fringilla, ligula at tincidunt interdum, metus neque auctor tellus, feugiat
sagittis elit quam et elit. Maecenas imperdiet rutrum felis dapibus tristique.
Nullam consequat, tortor ut vestibulum dictum, enim enim convallis leo, ut
sollicitudin mauris urna ac turpis. Pellentesque vitae metus bibendum, tincidunt
turpis sed, dignissim erat. In tincidunt nunc gravida massa blandit blandit. Nunc
cursus, diam sit amet pharetra cursus, diam felis commodo nibh, at blandit ligula
leo eu quam. Cras cursus scelerisque nibh, a iaculis lorem tincidunt vel. Phasellus
sapien tellus, fermentum in consequat ut, vehicula hendrerit tellus. Nullam
lobortis congue elementum. Maecenas vel metus bibendum, consectetur nibh id,
sollicitudin urna. Phasellus scelerisque felis vel iaculis malesuada. Nunc pulvinar
magna sed placerat eleifend. In a erat hendrerit, convallis nisi eu, ultrices justo.
Suspendisse potenti. </p>
</body>
</html>
<!-- figure 15.43 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
background-color: url("images/rose_transparent.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
padding: 0 15px;
}
</style>
</head>
<body>
<h1>Background-position</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ipsum at ex
ullamcorper pharetra at at dolor. Integer gravida sollicitudin consectetur. Etiam
fringilla, ligula at tincidunt interdum, metus neque auctor tellus, feugiat
sagittis elit quam et elit. Maecenas imperdiet rutrum felis dapibus tristique.
Nullam consequat, tortor ut vestibulum dictum, enim enim convallis leo, ut
sollicitudin mauris urna ac turpis. Pellentesque vitae metus bibendum, tincidunt
turpis sed, dignissim erat. In tincidunt nunc gravida massa blandit blandit. Nunc
cursus, diam sit amet pharetra cursus, diam felis commodo nibh, at blandit ligula
leo eu quam. Cras cursus scelerisque nibh, a iaculis lorem tincidunt vel. Phasellus
sapien tellus, fermentum in consequat ut, vehicula hendrerit tellus. Nullam
lobortis congue elementum. Maecenas vel metus bibendum, consectetur nibh id,
sollicitudin urna. Phasellus scelerisque felis vel iaculis malesuada. Nunc pulvinar
magna sed placerat eleifend. In a erat hendrerit, convallis nisi eu, ultrices justo.
Suspendisse potenti. </p>
</body>
</html>
<!-- figure 15.44 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p {
background: lightgrey url("images/rose_transparent_full.png")
right bottom/80px no-repeat padding-box;
border: 10px dotted black;
padding: 20px;
}
</style>
</head>
<body>
<h1>Background-position</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ipsum at ex
ullamcorper pharetra at at dolor. Integer gravida sollicitudin consectetur. Etiam
fringilla, ligula at tincidunt interdum, metus neque auctor tellus, feugiat
sagittis elit quam et elit. Maecenas imperdiet rutrum felis dapibus tristique.
Nullam consequat, tortor ut vestibulum dictum, enim enim convallis leo, ut
sollicitudin mauris urna ac turpis. Pellentesque vitae metus bibendum, tincidunt
turpis sed, dignissim erat. In tincidunt nunc gravida massa blandit blandit. Nunc
cursus, diam sit amet pharetra cursus, diam felis commodo nibh, at blandit ligula
leo eu quam. Cras cursus scelerisque nibh, a iaculis lorem tincidunt vel. Phasellus
sapien tellus, fermentum in consequat ut, vehicula hendrerit tellus. Nullam
lobortis congue elementum. Maecenas vel metus bibendum, consectetur nibh id,
sollicitudin urna. Phasellus scelerisque felis vel iaculis malesuada. Nunc pulvinar
magna sed placerat eleifend. In a erat hendrerit, convallis nisi eu, ultrices justo.
Suspendisse potenti. </p>
</body>
</html>
<!-- figure 15.46 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div#multi {
width: 800px;
height: 400px;
background: url("images/rose_transparent.png") repeat-x top left/60px 60px,
url("images/grey_wall.png"), no-repeat, top left/cover;
}
div#inner {
width: 500px;
padding: 100px 150px;
color: #F9F0B5;
}
h2 { text-align: center; }
</style>
</head>
<body>
<h2>Multiple background images</h2>
<div class="multi">
<div class="inner">
<h2>Peach Roses</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus ipsum
sem, nec euismod libero porttitor eu. Nulla ut urna a ligula tincidunt
condimentum quis sit amet diam. Morbi sed magna odio. Nam non ultricies eros.
Cras vehicula lobortis justo. Ut congue dapibus odio, in cursus nisl
consectetur quis. Aenean volutpat volutpat vehicula. Phasellus tempor purus sed
commodo posuere.
</div>
</div>
</body>
</html>