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.
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.
New Perspectives on HTML5, CSS3, and JavaScript
6th Edition
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Patrick M. Carey
Chapter4: Graphic Design With Css: Creating A Graphic Design For A Genealogy website
Section4.2: Visual Overview: Shadows And Gradients
Problem 4QC
Related questions
Question
100%
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;
}
Transcribed Image 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.
Expert Solution
This question has been solved!
Explore an expertly crafted, step-by-step solution for a thorough understanding of key concepts.
Step by step
Solved in 2 steps with 2 images
Recommended textbooks for you
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:
9781305503922
Author:
Patrick M. Carey
Publisher:
Cengage Learning
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
Computer Science
ISBN:
9780357392676
Author:
FREUND, Steven
Publisher:
CENGAGE L
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:
9781337508841
Author:
Carey
Publisher:
Cengage
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:
9781305503922
Author:
Patrick M. Carey
Publisher:
Cengage Learning
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
Computer Science
ISBN:
9780357392676
Author:
FREUND, Steven
Publisher:
CENGAGE L
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:
9781337508841
Author:
Carey
Publisher:
Cengage