Web Development and Design Foundations with HTML5 (8th Edition)
8th Edition
ISBN: 9780134322759
Author: Terry Felke-Morris
Publisher: PEARSON
expand_more
expand_more
format_list_bulleted
Question
Chapter 4.5, Problem 1CP
Program Plan Intro
“background-image” property:
It is a Cascading Style Sheet (CSS) property used to apply the image as background for an element. By default, the background image sets at top-left corner of a tag. The background-image can repeated horizontally and vertically by using “repeat” property. The image name must be entered with its format.
“background-repeat” property:
This property used to repeat an element that is displayed on web page; it can be divided into three ways:
- repeat-x ( Used to repeat an element in horizontal way)
- repeat-y (Used to repeat an element in vertical way)
- no-repeat (Repeating once)
Here, “background-repeat: no-repeat” property used to sets the image once in the web page.
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solution
Students have asked these similar questions
Create a CSS style for an H3 element, where:
- colour is blue (in RGB format)
- text aligned to left
- text decoration red wavy underline
- text transformed to uppercase
Find all textareas and paragraphs, and make a red border around them and set the border to red.
HTML& CSS gives us structure and style JavaScript brings our webpage to life!!
jQuery
JavaScript
Click to check the effect
4.4 Write a CSS rule that places a background image halfway down the page, tiling it horizon- tally. The image should remain in place when the user scrolls up or down.4.5 Write a CSS rule that gives all h1 and h2 elements a padding of 0.5 ems, a dashed border style and a margin of 0.5 ems.4.6 Write a CSS rule that changes the color of all elements containing attribute class = "greenMove" to green and shifts them down 25 pixels and right 15 pixels.
Chapter 4 Solutions
Web Development and Design Foundations with HTML5 (8th Edition)
Ch. 4.1 - Prob. 1CPCh. 4.1 - Prob. 2CPCh. 4.1 - Prob. 3CPCh. 4.5 - Prob. 1CPCh. 4.5 - Prob. 2CPCh. 4.5 - Prob. 3CPCh. 4.7 - Prob. 1CPCh. 4.7 - Prob. 2CPCh. 4.7 - Prob. 3CPCh. 4 - Prob. 1MC
Ch. 4 - Prob. 2MCCh. 4 - Prob. 3MCCh. 4 - Prob. 4MCCh. 4 - Prob. 5MCCh. 4 - Prob. 6MCCh. 4 - Prob. 7MCCh. 4 - Prob. 8MCCh. 4 - Prob. 9MCCh. 4 - Prob. 10MCCh. 4 - Prob. 11FIBCh. 4 - Prob. 12FIBCh. 4 - Prob. 13FIBCh. 4 - Prob. 14FIBCh. 4 - Prob. 15FIBCh. 4 - Prob. 1AYKCh. 4 - Prob. 2AYKCh. 4 - Prob. 3AYKCh. 4 - Prob. 1HOECh. 4 - Prob. 2HOECh. 4 - Prob. 3HOECh. 4 - Prob. 4HOECh. 4 - Prob. 5HOECh. 4 - Prob. 6HOECh. 4 - Prob. 7HOECh. 4 - Prob. 8HOECh. 4 - Prob. 9HOECh. 4 - Prob. 10HOECh. 4 - Prob. 1WRCh. 4 - Prob. 2WRCh. 4 - Prob. 1FWD
Knowledge Booster
Similar questions
- Question 1 What are the problems with the above code? Consider the syntax, structure, and writing style. Question 2 Write CSS code that tidies up the above code. Your code should minimise the use of inline style. Queston 3 Add a CSS selector for all paragraphs (p elements) under div elements with class “exam” to make their background colour blue.arrow_forwardI want to make a CSS for this code so the logo is in the center of the page and the text needs to be bigger and fits the page and evenly spaced. I also want to make the background color white and for the body to have a blue border. I also want the footer to have a blue background and centered. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="CSS/index.css"> <title>Video Game History</title> </head> <body> <nav> <a href="index.html">Home</a> <a href="about.html">About Us</a> <a href="contact.html">Contact Us</a> </nav> <h1>Home Page</h1> <article> <img src="Images/Logo.png" alt="Video Game" height="80"> <h2>The Early Ages</h2> <p>Today, video…arrow_forwardCreate a web page containing two images, where one image overlaps another image by using the z-index CSS property. Output:arrow_forward
- Question 1: a) Modify this code like exactly as below pictures and make boxes big like picture below . How can you apply translate property in CSS on an image when the user b) b) hovers it with the mouse pointer it translates an image? Provide CSS code and screenshot of the output image. Code: <!DOCTYPE html> <html> <body> <style> td{ border:1pxsolidblack; } td { border-collapse:collapse; } </style> <tablewidth="50%"> <tr> <tdcolspan='3'>1</td> <tdrowspan='3'>2</td> <tdcolspan='2'>3</td> <tdrowspan='2'>N</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <tdcolspan='3'>9</td> <tdcolspan='2'>10</td> <td>N</td> </tr> <tr> <tdcolspan='7'>N</td> </tr> <tr> <td>N</td> <td>N</td>…arrow_forwardPlease help me with this Place a magenta border (of 5px) around the entire body of the page. Do not create a CSS class to accomplish this.2. Place a cyan border (of 5px) around the header of the page. Do not create a CSS class to accomplish this. 3. Place a purple border (of 5px) around the words “Some Science Fiction Movies Worth Watching”.4. Create a div tag with class ‘movie’ to surround details of each movie, and place a blue border (of 5px) around each movie on this list.5. Place a green border (of 5px) around each movie director. Do not create a CSS class to accomplish this. 6. Place a black border (of 5px) around every paragraph on the page. Do not create a CSS class to accomplish this. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>EECS1012: Lab 2 - Movie Recommendations</title> <link rel="stylesheet"…arrow_forward(a) What are the problems with the above code? Consider the syntax, structure, and writing style. (b) Write CSS code that tidies up the above code. Your code should minimize the use of inline style. (c) Add a CSS selector for all paragraphs (p elements) under div elements with class “exam” to make their background colour blue.arrow_forward
- Question 1: How can you apply translate property in CSS on an image when the user hovers it with the mouse pointer it translates an image? Provide CSS code and screenshot of the output image. Code: <!DOCTYPE html> <html> <body> <style> td{ border:1pxsolidblack; } td { border-collapse:collapse; } </style> <table cellpadding="15" border="solid" width=50%> <tr> <tdcolspan='3'>1</td> <tdrowspan='3'>2</td> <tdcolspan='2'>3</td> <tdrowspan='2'>N</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <tdcolspan='3'>9</td> <tdcolspan='2'>10</td> <td>N</td> </tr> <tr> <tdcolspan='7'>N</td> </tr> <tr> <td>N</td> <td>N</td> <td>N</td> <td>N</td> <td>N</td>…arrow_forwardI need this assignment solved. Below I've attached the index.hmtl and styles.cssarrow_forwardcould you made a code with 3-Column Layout and HTML Table and Local Storage and Loop and Array and External CSS, and Media Query css. make a file for themarrow_forward
- Hello I was hoping someone could correct my coding errors. I have a CSS file that needs to be formatted to look like the first image but it currently looks like the second image. Can someone please help me with it? Thank you! CSS MAIN FILE: html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}body { line-height: normal;}ol { padding-left: 1.4em; list-style:…arrow_forwardANSWER THE FOLLOWING MULTIPLE CHOICES 1. Which CSS property configures the capitalization of text?a. font-typeb. text-transformc. text-decorationd. font-weight2. The ___________________ property configures a shadow effect on the text displayedwithin an element.a. font-weightb. shadowc. text-shadowd. font-style3. Choose the item that creates an image link to the school.htm page when the school.gifgraphic is clicked.a. <a href="school.html" src="school.gif" alt="school"></a>b. <a href="school.html"><img src="school.gif" alt="school"></a>c. <img src="school.gif" href="school.htm" alt="school">d. none of the above4. Select the best reason to include height and width attributes on an <img> tag.a. they are required attributes and must always be includedb. to help the browser render the page faster because it reserves the appropriate space for theimagec. to help the browser display the image in its own windowd. none of the above5. Select the browser’s…arrow_forwardHTML and CSS: Follow exactly the second picture. 1st picture: My output (I point out where the mistake is with a red circle) 2nd picture is what the output should look like. Note: JUST USE RANDOM PICTURES FOR THE IMAGE LINKS. Fix something in my code: fishcreek.css body { background-color: #5280C5; color: #003366; font-family: Arial, Verdana, sans-serif; background-image: url(gradientblue.jpg); }#wrapper { margin-left: auto; margin-right: auto; width: 80%; background-color: #F0F0F0; min-width: 700px; }header { background-color: #000066; color: #F0F0F0; background-image: url(bigfish.gif); background-repeat: no-repeat; background-position: center; text-align:center; }h1 { line-height: 250%; text-indent: 1em; margin-bottom: 0; font-size: 3em; padding: 0.2em; text-shadow: 3px 3px 5px #CCCCCC; } nav { float: left; width: 180px; color: #f0f0f0;…arrow_forward
arrow_back_ios
SEE MORE QUESTIONS
arrow_forward_ios
Recommended textbooks for you
New Perspectives on HTML5, CSS3, and JavaScriptComputer ScienceISBN:9781305503922Author:Patrick M. CareyPublisher:Cengage Learning
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning