Hello all. I'm building this website, and right now I have the job to convert the PSD to HTML5/CSS. I have two questions about the best way to achieve some effects. I have attached one of the pages as an example: 1) The first problem is about the background. What is the best way to include a background like that? I mean, should I get the background.jpg and stretch it (since the display resolution would make it bigger or smaller) to cover all available area or, at some point, repeat it or cover the remaining area with something else (if so, what?) ? I have concerns about the file size, so the website is not too loaded. I guess stretching would make it ugly sometimes. 2) As you can see, on the contents, the background ends with a transparent effect. So, the only option I could think of is a PNG with a transparent gradient. The scrollbar would make that even easier, since the PNG could be height fixed. But, let's say I was unable to use scrollbars and the content would make the page height bigger. How can I achieve such effect? Thanks
You may find this helpful http://www.w3schools.com/css3/css3_backgrounds.asp If you scroll down on that page it covers using multiple images on a background so maybe that would be what you need to do.
Your first question indicates you've got the right instincts -- that background is what I like to call "Not viable for web deployment" -- it is too big, non-repeating, and as such results in a file that by itself is likely larger than I'd allow for an entire page on a site to be -- HTML+CSS+SCRIPTS+IMAGES. On the whole that layout reeks of "but I can do it in Photoshop" nonsense -- or at least, it is nonsense if you care about accessibility, maintainability, sustainability, and a whole host of other things that make the entire approach of starting out from some very pretty but ultimately useless drawing slapped together by a PSD jockey -- well, to be frank, it's a completely back-assward way of building a website; even if the art chik-fil-a's who've taken over the industry have convinced everyone it's the norm by being flashy... like most things flashy, they lack substance. From the menu and footer shoe-horning you into a fixed width, to the goofy scrollbar and perfect height nonsense that is an accessibility wreck, to the content fade that likely would cause legibility issues should you scroll down, to the goofy non-standard fonts that most likely are going to waste bandwidth for nothing -- it all adds up to saying whoever drew that picture doesn't know enough about what the Internet is, what web pages are for, or how any of it works, to be designing Jack! It's a laundry list of how not to build a website... and you've not even built anything yet. There's a reason you don't see a lot of actually successful websites pulling these types of stunts -- and why when you do see it they are usually for brick and mortars for whom a website is an afterthought, small businesses having their ignorance preyed upon, or 'designers' who just want to sit around stroking their own... ego's. Most such artists and designers making these types of layouts needing to do the world a favor, and stick to print.