Assignment 3…Tips & Tricks!
1. You have been provided a background image called bkground.jpg. That is the background image for the entire
page. It is not mean to be stretched to fit 100% of the page but it is meant to repeat on the page just not all
over.
a. So what tag controls the entire page to where you could change the background color of the entire page
or you could change the page to have a background image for the entire page?
b. If the bkground.jpg image is not meant to be stretched or tiled all over the page, that means it needs to
repeat on one of two axis…..is it the x axis or the y axis; which would look more like the page you’re
trying to accomplished based on the screen shots you were given? Visit appendix D of your textbook to
find the different properties you need and the values they can have.
c. Bkground.jpg is the only image that should be the background of each of the pages in this website you
are building.
2. Anything can have a background image. A paragraph can have a background image, a h1 – h6 tag can have a
background image. Also layout tags that you use to build your page layout such as div, section, header, article,
aside, nav, footer are tags that can have a background image. So this means body isn’t the only tag that can have
a background image. This also means baseRev.jpg and the other image like it should not be images within the
page. That means do not use <img src=”images/baseRev.jpg” /> to add the design images. If you do that, your
text can never be on top of it. Your text content and navigation will always fall underneath it or above it.
3. You are creating a nested tag situation, so this means you probably will want one layout tag to hold all the other
tags inside. For example, you could have one div tag that’s big enough to hold the navigation and the text
content like so:
a. <body>
<div>
<nav>….</nav>
<section>…..</section>
</div>
</body>
</html>
In this example, notice how the div tag hold all the other content type tags. That’s what it means to have
a nested situation. The div tag is the parent and the nav and section tags then become the children of
the div because they are inside the div as noted by the div not closing until after the section tag.
4. To get a flush or seamless look with the background image and the baseRev image and others like it; you have to
get rid of the natural 5px margin you have on the left, top, right, and bottom of the page. We are really only
worried about the top margin. So again, what tag governs the entire page????? That will be the tag you
manipulate to give it a top margin of 0px.
5. Code provided during our virtual sessions from weeks 4 & 5 discuss the properties you need to center a design in
the middle of the browser window. If you took notes, you’ll be able to center this website design too.