How would you approach this

[FrontPage97]

I'm learning Dreamweaver and the basics of web design so I'm not sure how to approach designing this test site that has a big background image. The city street image (below) takes up the whole page. I figure the wood buttons (with text) as well as the text at the bottom should be part of this city street .jpg image.
Should I insert the image as a background image and have it automatically snap to fit the screen? Or should I just set a black background and then insert the image in a DIV?
If I insert it as a background image does this code look right?...

body {
background: #050 url(image.jpg) »
center center fixed no-repeat;
background-repeat: no-repeat;
-moz-background-size: 90%;
background-size: 90%;
background-position: center;
background-attachment: fixed;
background-color: #333333;
background-image: url(image.jpg);
}

 

[ronaldroe]

Use the street image as a background, and position the rest on top.

 

[FrontPage97]

Are you saying that I should create a separate image (.png) to use for the links on the left to lay over top of the background?

 

[Edge]

Yes, he is.

 

[FrontPage97]

What's your opinion of having a background image (like this one) that constrains to fit the screen? Is that OK or a bad idea?
And is it possible to have a background image fit on an X-axis but not on a Y-axis? The main thing is I don't want my image to look warped (not sure if that could even be an issue anyway)? I could have a gradient fade to black on the left right and bottom edges of the background image and then a black background.

body {
background: #050 url(image.jpg) »
center center fixed no-repeat;
background-repeat: no-repeat;
-moz-background-size: 90%;
background-size: 90%;
background-position: center;
background-attachment: fixed;
background-color: #333333;
background-image: url(image.jpg);
}

 

[chrishirst]

And is it possible to have a background image fit on an X-axis but not on a Y-axis?

http://www.css3.info/preview/background-size/

Works in all current browsers

 

[FrontPage97]

http://www.css3.info/preview/background-size/

Perfect! This is going to be what I need in most cases.
background-size: cover;

 

[junery00]

is not ok just to set as a background image and set as as a no repeat ?

 

[FrontPage97]

is not ok just to set as a background image and set as as a no repeat ?

Not the same. Problems arise when people have different browser zoom settings and what not.
The value "cover" will cause the image to fill up the entire screen viewing area no matter what and without looking stretched / warped. Some of the background image may go off the screen, but if that's not critical then "cover" works well.

 

[chrishirst]

is not ok just to set as a background image and set as as a no repeat ?

Of course it is OK, it's your design and layout so the choice is YOURS.

For your picture you should set it to be background-position: left top; and use a fixed width left aligned layout, with a background colour to fill in the rest.

And do NOT under any circumstances AT ALL use that background on EVERY document unless any text containers are set with a non-transparent background, because it WILL make the text close to impossible to read, and while I appreciate the need for designers to have people marvel at their work. for a website layout, it has to be tempered with commonsense and accessibility considerations.