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-color:rgb(210,220,157);
background-image: url("/Users/332bo/Desktop/Week_9_Lab/images/blackgoose.png"); /* Rounded Shape image */
background-size: contain;
}
bgc { width: 200px;
height: 200px;
display: block;
position: relative;
}
bgc::after { content: "";
background: url(/Users/332bo/Desktop/Week_9_Lab/images/purpledot.png);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1; }
header
{
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
border-radius:4px;
background: url("/Users/332bo/Desktop/Week_9_Lab/images/purpledot.png") repeat-y left top,
url("/Users/332bo/Desktop/Week_9_Lab/images/purpledot.png") repeat-y right top,
url("/Users/332bo/Desktop/Week_9_Lab/images/gooseshadow.png") 90% bottom no-repeat;
background-color:hsl(0, 14%, 95%);
}
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;
}
f
font-style: italic;
}
.price {
font-family: Georgia, serif;
font-style: italic;
}
h2 + p {
text-align: center;
font-style: italic;
}
Trending now
This is a popular solution!
Step by step
Solved in 3 steps with 1 images
