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;
}
Answer:
Background shorthand properties is tool that specify the multi CSS function in single declaration . so we have solve your question by this properties we will inserting the code in next page . this code in own and this code working for me and also insert the own image then it works.
Step by step
Solved in 4 steps with 1 images
