1 Correct answer
CSS does not allow scaled backgrounds to repeat. Either your background image scales to fill the viewport in both directions or it does not scale.
Example 1 -- Background-size: cover
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Full Size Background</title>
<style>
body {
background: #000 url(https://placeimg.com/900/600/arch);
background-size: cover;
}
.container {
background: rgba(0,0,0,0.5);
color: #FFF;
width: 50%;
margin: 0 auto;
padding: 3%;
}
</style>
</head>
<bo
...
4
Replies
CSS does not allow scaled backgrounds to repeat. Either your background image scales to fill the viewport in both directions or it does not scale.
Example 1 -- Background-size: cover
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Full Size Background</title>
<style>
body {
background: #000 url(https://placeimg.com/900/600/arch);
background-size: cover;
}
.container {
background: rgba(0,0,0,0.5);
color: #FFF;
width: 50%;
margin: 0 auto;
padding: 3%;
}
</style>
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa quibusdam sunt, nisi voluptas, labore, impedit enim quo consequuntur nesciunt illum earum commodi quod inventore harum fugiat, error distinctio vitae vero.</p>
</div>
</body>
</html>
Example 2 - Background-repeat: y
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tiled Background</title>
<style>
body {
background: #000 url(https://placeimg.com/900/600/arch) center center repeat-y;
}
.container {
background: rgba(0,0,0,0.5);
color: #FFF;
width: 50%;
margin: 0 auto;
padding: 3%;
}
</style>
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa quibusdam sunt, nisi voluptas, labore, impedit enim quo consequuntur nesciunt illum earum commodi quod inventore harum fugiat, error distinctio vitae vero.</p>
</div>
</body>
</html>
. 
AdChoices