Replace all the individual background properties with the shorthand background property declaration. . Alter the background property in header so that the purpledot.png image repeats vertically on the far left and far right sides of the header element. Additionally, use the gooseshadow.png image so that it renders in the bottom right corner of the header element. Hint: the background property can handle multiple image URLS. When completed, your header element should look like the image below:
body
{
font-family: Georgia, serif;
font-size: 100%;
line-height: 175%;
margin: 0 15% 0;
background: rgb(210,220,157) url("/Users/332bo/Desktop/Week_9_Lab/images/blackgoose.png") center top left 30%;
}
header
{
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
border-radius:4px;
background : url("/Users/332bo/Desktop/Week_9_Lab/images/gooseshadow.png") no-repeat center bottom right / 5% hsl(0, 14%, 95%, 0.5), url("/Users/332bo/Desktop/Week_9_Lab/images/purpledot.png") repeat-y center top right / 5% hsl(0, 14%, 95%, 0.5), url("/Users/332bo/Desktop/Week_9_Lab/images/purpledot.png") repeat-y center top left / 5% hsl(0, 14%, 95%, 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;
}
.price {
font-family: Georgia, serif;
font-style: italic;
}
h2 + p {
text-align: center;
font-style: italic;
}
Step by step
Solved in 4 steps with 1 images
