Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Sep 2012
    Posts
    1
    Member #
    32991
    Okay, so I'm stuck.

    I have designed web sites for university (albeit simple ones for modules) and am now setting up my own. Here's my problem:

    I have designed a background in PS, which contains a red header, main content area, and a dark footer. It looks awesome and works fine with my website. Here's what it looks like:

    http://imgur.com/yWmh3

    The problem I am having is resizing the image to account for longer content in the middle area. The header and footer content doesn't change but on the 'About Me' page I need the page to be longer.

    So, how do web designers go about doing this? Do they just not design backgrounds in PS due to the fixed size? What's the industry standard for designing and implementing backgrounds?

  2.  

  3. #2
    Member celticshinobi's Avatar
    Join Date
    Nov 2012
    Location
    TN, USA
    Posts
    36
    Member #
    33858
    Liked
    1 times
    One trick that I've done is this....cut the background into 3 pieces....but cut the middle portion and the footer portion just a bit above where the color changes...so when the page with a lot of content loads, that middle background repeats itself...but because the top of the footer is the same color as the middle image, it looks seamless.

    I really hope that made sense, for some reason this was hard for me to explain... lol

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    I rarely use images for backgrounds. If I do, I work it out as something repeatable from the start. More often the not, though I just use solid colors or CSS gradients. There's honestly not a single image required to do what you're doing. Set the body background color to white. Use a div or appropriate HTML5 element for the header and footer, and set their background colors accordingly.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #4
    Member celticshinobi's Avatar
    Join Date
    Nov 2012
    Location
    TN, USA
    Posts
    36
    Member #
    33858
    Liked
    1 times
    Also what Ronald said - I didn't get into that for some reason; I just tried to answer your question directly.... or something.

    But yes, it would be a lot easier to just do what you're wanting with code. It'll load quicker, it'll work better.

  6. #5
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    If you need help with the css for what Ronald is talking about, ask use on this thread. We will be glad to help out
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  7. #6
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    There are multiple ways of doing backgrounds, and if you ask 3 designers, you'll probably get 3 different answers.

    But for what you're trying to do, you don't need an image at all. Just set your design around using divs to define the areas, and use colors as the background for each. The content div would be set to a height of auto, and would just stretch or shrink based on the content of the actual page.

    If you wanted to use images for backgrounds for the header and footer, that would also work, but from the example posted, not necessary.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:59 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com