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
the background-position in the following CSS is:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 100%;
Select one:
a. bottom center
b. center bottom
C. right center
d. center right
Hi, this is CSS related question
I need help regarding of moving the "Content" near the "Sample"
I really need help of adjusting the spacing between them. What code should I use in CSS to edit it? Thank you so much!
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.
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
- write a CSS style rule to set up a linear gradient background based on the following requirements: it is for a class named peter the direction of the linear gradient is to be from right to left and must be represented by degrees the starting colour must be red and presented in the RGB format the ending colour must be blue and presented in hexadecimal formatarrow_forward2. Write the CSS for an id named not:ice that is configured to 80% width and centered. 3. Write the CSS to configure a class that will produce a headline with a dotted line underneath it. Choose a color that you like for the text and dotted line. 4. Write the CSS to configure an h1 element selector with drop- shadow text, a 50% transparent background color, and sans-serif font that is 4em in size. 5. Write the CSS to configure an id named feature with small, red, Arial font; a white background; a width of 80%; and a drop shadow.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
- write a CSS style rule to set up a linear gradient background based on the following requirements: it is for a class named peterthe direction of the linear gradient is to be from right to left and must be represented by degreesthe starting colour must be red and presented in the RGB formatthe ending colour must be blue and presented in hexadecimal formatarrow_forwardModify the CSS declarations for the span and p rules to meet each requirement below: Padding on the span: 5 pixels left, and 5 pixels right. Border on the span: 2 pixels solid black above (use -top suffix), and 4 pixels solid gray below (use -bottom). Padding on the paragraph: 10 pixels on all sides. Border on the paragraph: 10 pixels, light green, ridge style (use border-style, border-color, and border-width). Margin on the paragraph: 5 pixels on all sides. <p> The typical filler text is the <span>Lorem Ipsum</span>. According to lipsum.com, this text has been standard dummy text since the 1500s.</p>arrow_forwardCreate design.arrow_forward
- Write a css style like, the title is list, Declare a css rule with an id selector, set the font size to double, and display the text "work" apply the id selector to a <b> tag for the display of text "john"arrow_forwardCreate a products.html page and add 5 product images to the page. Create a Product class with the following attributes: Price, Name, Description and Id for each of the product images. Under each product image add an "add to cart" button. Make the id property of the button the id for the product. Add a remove from cart button on each item as well. Create a ShoppingCart.js file and include it in the products.html page. In the script, create an empty array to store the items added to the cart. Create a products array and create a product object for each of your products and store it in the products array when the script loads. The shopping cart script should have the following functions: add - Takes an id, finds the product object in the products array and adds it to the items purchased array, remove - Takes an id and removes the corresponding object from the items purchased array and Returns html for displaying the items in the cart. At the top right of the page add a link that says (0)…arrow_forwardHTML In strictly default block vertical coordinates, the reference positions for the next element placement on the page is the location of the element immediately on top and the left-hand screen position. (TRUE OR FALSE)? If an outer div container contains two inner div elements, and an outer height is given by css to the outer container, and the background color of the outer container is blue then there will always be blue colored space left below the two inner divs (TRUE OR FALSE)? Image elements can have borders surrounding them , and maintained inside a containing element. (TRUE OR FALSE)? In table elements, the most specific HTML level is the tr element ( row element)(TRUE OR FALSE)? Text can be centered inside a div element by using the selector command text-align: center or otherwise placing the text inside another div element with the same background color and applying margin-left command( TRUE OR FALSE)? A paragraph, div element, and h element will assume the…arrow_forward
- Create a products.html page and add five product images to the page. Create a Product class for each product with the following attributes: Price, Name, Description and Id for each of the product images. Under each product image add an "add to cart" button. Make the id property of the button the id for the product. Add a remove from cart button on each item as well. Create a ShoppingCart.js file (javascript) and include it in the products.html page (<script src ="shoppingcart.js">). In the script, create an empty array to store the items added to the cart. Create a products array and create a product object for each of your products and store it in the products array when the script loads. The shopping cart script should have the following functions: add - Takes an id, finds the product object in the products array and adds it to the items purchased array, remove - Takes an id and removes the corresponding object from the items purchased array and Returns html for displaying the…arrow_forwardCreate an external CSS file and attach it to the html document, you need to name the file with your first name and last initial. The only change you are allowed or need to make in the HTML file is the link to the attached CSS sheet. study the HTML file before starting note the ID and classes in the document. using only CSS to duplicate the layout of the sample image use position,grid or flex combination of layout methodsarrow_forwardWhat is the best width and height for picture following five lines of text in the style.css: { margin: 0; padding: 0;} .Picture2 img{ width: 34px; height: 21px; margin-left: -2px; margin-top: -2px; border-radius: 15px 15px 0 0;} .Picture3 img{ width: 34px; height: 21px; margin-left: -2px; margin-top: -2px; border-radius: 15px 15px 0 0; a{ text-decoration: none; color: black;} html: <article> <h2>Plastic Pollution</h2> <p>.</p> <p>.</p> <p>.</p> <p></p> <p></p> <p></p> <img src="Picture2.jpg"> <img src="Picture3.jpg"> </main> Or shall I use div for pictures in the html?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