1. Replace all the individual background properties with the shorthand background property declaration. 2. 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);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 : 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) 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/gooseshadow.png") no-repeat center bottom right 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;
}
}
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;
}
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 attach this code in next page .and this is my own code . this code is working here please insert my code into your code and also set own background image.
Step by step
Solved in 4 steps with 1 images
