How to adjust my PhotoShop background image

HTML & CSS
1

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!

2

Hi cboice8127,

Welcome to Sitepoint :slight_smile:

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

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

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:


<div class="brand center"><img scr="logoImage1.gif"><img scr="logoImage1.gif"></div>
<ul class="mainNav center"><ul>
<div class="content center"></div>

and


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

5

Thank you everyone!