SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to adjust my PhotoShop background image

    Hi there! I'm fairly new to web design, I have created a background/layout template in the form of a Photoshop jpeg. I did so I would know exactly where to place my div containers and plugins, not sure if this is a good idea or not.

    I'm not sure if I made the jpeg too large in size because I have positioned it as follows

    body {
    margin-top:auto; background-image:url(ReStorelandingpage.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
    }

    BUT the top of the jpeg hides and is cut off under the browser toolbar.

    Should I not use a photoshop background? I've attached my layout template!

    Thanks!ReStorelandingpage.jpgReStorelandingpage.jpg

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,113
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi cboice8127,

    Welcome to Sitepoint

    We'll wait until your image is approved to give a final answer, but yes, background images don't normally scale.
    They crop to the visible area.

    Normally large background images are fixed to one corner of the screen like https://twitter.com/#!/samuelljackson
    But, sometimes photoshop comps don't naturally fit the web because the window can be any size, so you may need to rethink that image.

    If the image would work being fixed to one corner of the screen I would go with that.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Using a big background like that is impractical on the web, because websites are flexible. All it would take is for a user to have increased font size (which is common) and your page will blow apart, text not aligning with the background image.

    A better approach is to split the image up into sections and associate each section with a background image. It still won't be easy with a layout like this, but it gives you a better chance. You would create boxes of content each with a background image that could expand/adapt to varying conditions.

    It would be good for you to read a book on HTML/CSS first, to get a better sense of the conditions you are working with on the web. It's totally different from print design.

    EDIT: Looking at the image again, I see that the best way to handle the white boxes with blue background would be to have a repeating white to blue gradient image (about 10px wide and quite tall) repeating across the background of the body element, and just have white div boxes arranged as you need them.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Reiterating what had been said as simple instructions:

    1) When DESIGNING think in PATTERNS, REPETITIONS, and UNIQUE ELEMENTS.
    2) Make the Smallest slices possible of a singe instance of a repeating pattern
    3) Use background-repeat: to place said instances in to the background of any display BLOCK element ( not just DIVs)

    For example.
    1) Cut out the 2 logos into separate images. They are content anyway.
    2) make a 8px wide slice of your white-to-babyblue fade ( let's call it bg1.jpg), it only needs to be tall enough to cover the transition any extra baby blue is unnecessary and wasteful.
    3) you can now set this in image as the background of a container element
    div.content { backgorund: url(bg1.jpg) top left repeat-x #theHexforThatBabyBlue; }
    you can then layout the rest of your boxes as other elements with background:#fff.



    Basically, I assume navigation links are meant to go in the green area:

    Code:
    <div class="brand center"><img scr="logoImage1.gif"><img scr="logoImage1.gif"></div>
    <ul class="mainNav center"><ul>
    <div class="content center"></div>
    and
    Code:
    .brand, content>*{background:#fff;}
    .brand img {display:block;}
    .center {margin:0 auto; width: (your intended page width);}
    div.content { backgorund: url(bg1.jpg) top left repeat-x #theHexforThatBabyBlue; overflow:hidden; }
    .mainNav{backgorund:#theHexforThatLightGreen;}

    And that is the basic idea. Don't freak if at first you don't see your gradient. Add text and content to div.content and you will see it, and see it expand with the more text you add. The rest of the boxes will need to be laid out using floats, and clears... etc.

    Hope this helps you on your way.

  5. #5
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you everyone!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •