background image question

Posted on 2011-10-05
Last Modified: 2012-05-12
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:

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?
Question by:nsitedesigns
    LVL 10

    Accepted Solution

    Id like to see the bottom of the napkin not overlap the bottom image. if the napkin were to end in the whitepsace, you could set the entire top section + coffee mug/napkin as background image. And the white space can grow as needed for content. Then have the footer image as a background image of a footer div. Just one thought.
    LVL 10

    Expert Comment

    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...

    Author Comment

    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.
    LVL 10

    Assisted Solution

    you can always have a background texture and then the page be in a div which has a background image as well.  
    LVL 51

    Expert Comment

    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 id=footer>footer image here</div>
    LVL 10

    Expert Comment

    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.
    LVL 70

    Expert Comment

    by: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"

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    Suggested Solutions

    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
    This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
    The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now