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.
Database System Concepts
7th Edition
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Chapter1: Introduction
Section: Chapter Questions
Problem 1PE
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
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education