what I have so far but it is not working I tried to add an image file to my page body {font-family: Georgia, serif;font-size: 100%;line-height: 175%;margin: 0 15% 0;background-color:rgb(210,220,157);background-image: url(bullseye.png); /* Rounded Shape image */background-size: contain;}header {margin-top: 0;padding: 3em 1em 2em 1em;text-align: center;border-radius:4px;background-color:hsl(0, 14%, 95%);opacity:0.5;background-image: url(purpledot.png); /*purple image*/ 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;}#info p {font-style: italic;}.price {font-family: Georgia, serif;font-style: italic;}p.warning,sup {font-size: small;}.label {font-weight: bold;font-variant: small-caps;font-style: normal;}h2 + p {text-align: center;font-style: italic;} Now let's try some slightly more sophisticated tiling on the Summer Menu page. This time we'lladd a tiling background just along the top edge of the header element.In the header rule, add the image purpledot.png and set it to repeat horizontally only.Black Goose Bistro • Summer MenuBoker's Comer, Sekonk MassachusettsHous: Monar on Taa to . Pnar A Sena to midnigheApptiMain CuTraditional TetsDessert SelectionPPETIZERSThis seson, we aplore te spicy flavors of the southwet in our appetiaer collction.Hlack bean pursesSpiey black bean and a blend of mesioan cheses wrapped in shets of phyllo and baked until goiden. 395Southwestern napoleona with hump erab - mew item!Layers of light lamp erab ment, bean and oom salm, and our handmade flour tortillas. 8795Finally, try out the space and round repeat values on the body background image andsee if you like the effect. Note that the tiles are evenly spaced within the body of thedocument, not just the viewport, so you may see some cut-off circles at the bottomedge of your browser. Delete the background-repeat declaration so it goes back to thedefault repeat for upcoming exercises.

As per your question the above code has issue in displaying the image in background of page ?

what I have so far but it is not working I tried to add an image file to my page body { font-family: Georgia, serif; font-size: 100%; line-height: 175%; margin: 0 15% 0; background-color:rgb(210,220,157); background-image: url(bullseye.png); /* Rounded Shape image / background-size: contain; } header { margin-top: 0; padding: 3em 1em 2em 1em; text-align: center; border-radius:4px; background-color:hsl(0, 14%, 95%); opacity:0.5; background-image: url(purpledot.png); /purple image*/ 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; } #info p { font-style: italic; } .price { font-family: Georgia, serif; font-style: italic; } p.warning, sup { font-size: small; } .label { font-weight: bold; font-variant: small-caps; font-style: normal; } h2 + p { text-align: center; font-style: italic; }

New Perspectives on HTML5, CSS3, and JavaScript

6th Edition

ISBN:9781305503922

Author:Patrick M. Carey

Publisher:Patrick M. Carey

Chapter7: Designing A Web Form: Creating A Survey Form

Section: Chapter Questions

Problem 17CP3

See similar textbooks

Related questions

Question

what I have so far but it is not working I tried to add an image file to my page

body {
font-family: Georgia, serif;
font-size: 100%;
line-height: 175%;
margin: 0 15% 0;
background-color:rgb(210,220,157);
background-image: url(bullseye.png); /* Rounded Shape image */
background-size: contain;
}
header {
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
border-radius:4px;
background-color:hsl(0, 14%, 95%);
opacity:0.5;
background-image: url(purpledot.png); /*purple image*/
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;
}
#info p {
font-style: italic;
}
.price {
font-family: Georgia, serif;
font-style: italic;
}
p.warning,
sup {
font-size: small;
}
.label {
font-weight: bold;
font-variant: small-caps;
font-style: normal;
}

h2 + p {
text-align: center;
font-style: italic;
}

Now let's try some slightly more sophisticated tiling on the Summer Menu page. This time we'll
add a tiling background just along the top edge of the header element.
In the header rule, add the image purpledot.png and set it to repeat horizontally only.
Black Goose Bistro • Summer Menu
Boker's Comer, Sekonk Massachusetts
Hous: Monar on Taa to . Pnar A Sena to midnighe
Appti
Main Cu
Traditional Tets
Dessert Selection
PPETIZERS
This seson, we aplore te spicy flavors of the southwet in our appetiaer collction.
Hlack bean purses
Spiey black bean and a blend of mesioan cheses wrapped in shets of phyllo and baked until goiden. 395
Southwestern napoleona with hump erab - mew item!
Layers of light lamp erab ment, bean and oom salm, and our handmade flour tortillas. 8795
Finally, try out the space and round repeat values on the body background image and
see if you like the effect. Note that the tiles are evenly spaced within the body of the
document, not just the viewport, so you may see some cut-off circles at the bottom
edge of your browser. Delete the background-repeat declaration so it goes back to the
default repeat for upcoming exercises.

Expert Solution

Step by step

Solved in 2 steps with 2 images

SEE SOLUTION Check out a sample Q&A here