Bayside Screenshot

Question

David,
This screenshot got me thinking....
How can we get images to be 100% browser width?
How can we get the navigation and header on top of an image? Are the steps similar to the bonus video?
Thank you for your time and help with these issues!

Answer 1

You can make an image 100% of the browser width by removing the width and height attributes from the <img> tag, and giving the image a class that sets the width property to 100%.
In the HTML:
<div><img src="images/morro1.jpg" alt="Morro Rock" class="wideimg"/></div>
In the style sheet:
.wideimg {
    width: 100%
The image will fill the full width of its parent element (in this case, a div). If the parent element is the full width of the browser window, the image will be too. The problem with this is that the image could become badly blurred on a large screen.
Another way of making a image fill the width of the browser window is to use a background image, and set the background-size CSS property to cover.
#mydiv {
    background-image: url(images/morro1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
Again, the problem is that the image might become blurred if it's not big enough. The other issue is that background images don't control the height of the element they're applied to. If there's only a small amount of content in the div, the background image will cover the full width, but it won't expand the height of the div. You could apply a min-height value to the div, but you have no way of knowing (without using JavaScript) how wide the browser window will be. One other consideration: background-size is not supported by Internet Explorer 8 and earlier.
As for the screenshot, I don't know how it was created. When I was commissioned to create the video tutorial, I created the text, images, and design for the Bayside Beat case study. Adobe decided it wanted some changes, so another designer sent me a composite of the revised design, which is what I created in the tutorial. I suspect that the screenshot of the sky extending behind the title and navigation bar was probably one of the ideas the other designer was experimenting with, and it somehow ended up in the tutorial web page. I quite like the effect of the sky going behind the title and navigation bar. The problem is that it won't work on other pages.
From the technical viewpoint, if the image is in the HTML, you would position the navigation menu over it using the same technique as in the bonus video.