|
|
Post by Brett Ludwick on Apr 26, 2015 12:13:27 GMT -8
The page structure is basic: Header, navigation, content, footer. The granite rock background is one large image in the Mockup and won't be exported into Dreamweaver. I sliced it vertically (to keep the file size down) into a smaller image and saved it for the final version, and on the web page it will repeat-x. To accommodate a flexible column length the background image will sit behind another container that will go from 100% transparent to solid gray at the same location as the solid gray in the bkgd image. Also, I guess the entire (html?) background will need to also be the same gray color. Since the background is really one image with drop shadows, gradients, etc., there really aren't many images left, and the ones that are left, I will probably change slightly. Because of this, I'm not sure how valuable slicing them up in Photoshop and exporting them will be?? The file size for the layered Photoshop file was far too large, so I had to add the image and the file to a web page. Also, when you attach the image that is less than 1mb you get these little thumbnails below. You could try right-clicking on image and opening a new tab?? but I think they are sized better on the web page below: Mockup and Layout  |
|
|
|
Post by Judy Fontanella on Apr 27, 2015 17:19:35 GMT -8
This is looking really good. I did see you working on the file in Photoshop, so I know that you did that.
We did talk about making a vertical section of your background image that repeats x. You only need to make it go down to where the color becomes a consistent gray color. Then, for the body tag, you and set the background color, which is the solid gray, and the background image, which includes the green, and the granite down to where the granite fades into the solid gray. I hope this makes sense.
Your logo, tagline and search would be on the header with a transparent background. Your nav section would also have a transparent background as it will be over the background image.
The biggest problem will be the logo. To do this simply would be to put it in as a foreground image over the background image. However, it looks like it's behind the background image. That's a toughie. The reason it's difficult is that with the background repeating x, you're never quite sure which part of the background will be behind the logo, and you want to match things up. On different width screens, the match up would be different.
Here's an idea, though. For the background image that repeats x across the body of the page, you can position it initially. If you position it "center" for the horizontal position, at least the same part of the repeat would always be behind the center of the page. The first repeat will always be right in the center. It will repeat to the right OK. I'm not sure how it will repeat on the left side, though. I'm not sure if it will go from the center repeat out, or start from the left side and stop when it reaches the center repeat. If it's the 2nd, it will probably not match up too well.
Let me do a little experiment to see.
|
|
|
|
Post by Judy Fontanella on Apr 27, 2015 17:47:26 GMT -8
I did a little testing. It does work to start you background repeat in the center. Everything matches up AND you always have the same part of the repeat design right in the center. This means that you can make a little image with the logo looking like it's behind the background and place it in the appropriate spot as a foreground image in the header. Here is a little test page: artbytes.net/202/ClassFiles/BackgroundTesting/TestRepeat.aspThis is the image that is repeating across the page:  I have the jaggy green image repeating X and starting in the center. I put the vertical line as a background image that repeats y right in the center of the page. It marks the center. Make the browser window get wider and narrower. You can see that the same part of the repeat is always in the center. Therefore, you'll know which part of the repeat will be where the logo will be. |
|
|
|
Post by Judy Fontanella on Apr 27, 2015 17:52:10 GMT -8
Here is the CSS for the repeat background images:
body {
background: url(VerticalLine.gif) repeat-y center top, url(Repeat2.gif) repeat-x center 30px ;
}
|
|
