Avatar of nsitedesigns
nsitedesignsFlag for United States of America

asked on 

background image question

Client designed her own site.  Not good but she likes it and didn't want to pay me to design it so it is what I have to work with

See below link:
http://screencast.com/t/e2cQNbBEpm

She wants me to "make a website out of it".  

Would the best way be to have the header, coffee cup and footer a complete background image?   The copy for her site is very limited on all the pages.  I would have her bump the navigation out of the header and put it above the copy.  She also wants a texture background image outside the edges of the site.  Double yikes but then again.  I am not claiming this as my own so I have no say in it.  The gist of my question is would doing a background image be the best route to take and can I have a background image on the site (coffiee cup, header and footer) AND have a background texture?
CSSAdobe DreamweaverWeb Development

Avatar of undefined
Last Comment
Jason C. Levine
ASKER CERTIFIED SOLUTION
Avatar of Gregg
Gregg
Flag of United States of America image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of CCSOFlag
CCSOFlag
Flag of United States of America image

So the picture on your link is what she wants it to look like?

It depend son if the page is supposed to scale or not.  IF it isn't then the easiest thing to do it to make everything that isn't going to change the background image.  You could break the image up into separate pieces, but even then you have to change an image and upload it if there's a change.  I would have everything the background image except the menu and the text.  Those would be absolute positioned divs.

As far as textures, you can always add the texture to the background image itself...
Avatar of nsitedesigns
nsitedesigns
Flag of United States of America image

ASKER

Yeah I was thinking of that. Can she ALSO have a texture around the outside of the site?  She didn't want to have just a solid brown.
SOLUTION
Avatar of CCSOFlag
CCSOFlag
Flag of United States of America image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
Avatar of HainKurt
HainKurt
Flag of Canada image

looks like yes, something like this


<div id=top>top image and css menu here</div>

<div id=main>
  <div id=left>cofee image here</div>
  <div id=content>whuite background or texture here</div>
</div>

<div id=footer>footer image here</div>
Avatar of CCSOFlag
CCSOFlag
Flag of United States of America image

I think you'll need to answer the question of whether or not the page is going to grow or not.  IT makes a big different.  You can always have the text scroll itself without making the page grow.  You have a lot of options.
Avatar of Jason C. Levine
I would not even try to make that scale.  Slice the image using photoshop or illustrator and create a scrolling div to hold the content where needed.  Fix everything into position and call it a day.

Off-topic: Although I respect clients who come to me with a strong vision for their design, unless they are willing to meet me at least halfway on practical issues that come with the difference between creating an image of a page and an actual page I tend to not take the job.  There is nothing worse that being turned into the "interactive mouse" http://theoatmeal.com/comics/design_hell
Web Development
Web Development

Web development includes all aspects of presenting content on intranets and the Internet, including delivery development, protocols, languages and standards, server software, browser clients, databases and multimedia generation.

78K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo