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/bullseye.png"); /* Rounded Shape image */
/* background-repeat:round space; */
opacity: 0.5;
background-size: contain;
}
header
{
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
border-radius:4px;
background-color:hsl(0, 14%, 95%);
background-image: url("/Users/332bo/Desktop/Week_9_Lab/images/purpledot.png");
background-repeat: repeat-x;
}
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;
}
Extracted text: First we're going to make some subtle adjustments to the background images that are already there, and then we'll swap them out for a whole different background and play around some more. Add this declaration to both the body and header rules; then save and look at it in the browser: background-position: center top; You may not notice the difference until you resize the browser wide and narrow again. Now the pattern is anchored in the center and reveals more or less on both edges, not just the right edge as before. Alter the background-position values so that the purple dots are along the bottom edge of the header (center bottom). Then try moving bullseye.png down 200 pixels (center 200px). Notice that the pattern still fills the entire screen-we moved the origin image down, but the background is still set to tile in all directions. Now, replace the bullseye.png with the blackgoose.png image (also a semi-transparent PNG). Set it to not repeat, and center it horizontally and position it 100px from the top of the page. Add the appropriate CSS property so that the blackgoose.png image remains in the same location in the viewport as the page scrolls.