Now let's try some slightly more sophisticated tiling on the Summer Menu page. This time we'll add a tiling background just along the top edge of the header element. In the header rule, add the image purpledot.png and set it to repeat horizontally only. 00000000 D00 Black Goose Bistro · Summer Menu er Carn, k Mu T T Det APPETIZERS ipertin. aenp iy ndaendaf mhe ppedint of phyle nd hd s ter -e Leefgl , Finally, try out the space and round repeat values on the body background image and see if you like the effect. Note that the tiles are evenly spaced within the body of the document, not just the viewport, so you may see some cut-off circles at the bottom edge of your browser. Delete the background-repeat declaration so it goes back to the default repeat for upcoming exercises.
body {
font-family: Georgia, serif;
font-size: 100%;
line-height: 175%;
margin: 0 15% 0;
background-color:rgb(210,220,157);
}
header {
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
border-radius:4px;
background-color:hsl(0, 14%, 95%);
opacity:0.5;
}
a {
text-decoration: none;
color:rgb(153,51,153);
}
a:visited{
color: hsl(300, 13%, 51%);
}
a:hover{
background-color: #fff;
}
a:focus{
background-color: #fff;
}
a:active{
color:#ff00ff;
}
h1 {
font: bold 1.5em Georgia, serif;
text-shadow: 0.1em 0.1em 0.2em gray;
color: rgb(153,51,153);
}
h2 {
font-size: 1em;
text-transform: uppercase;
letter-spacing: 0.5em;
text-align: center;
color:rgb(204,102,0);
}
dt {
font-weight: bold;
}
strong {
font-style: italic;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#info p {
font-style: italic;
}
.price {
font-family: Georgia, serif;
font-style: italic;
}
p.warning,
sup {
font-size: small;
}
.label {
font-weight: bold;
font-variant: small-caps;
font-style: normal;
}
h2 + p {
text-align: center;
font-style: italic;
}
Trending now
This is a popular solution!
Step by step
Solved in 2 steps