Trying to fit the background

[Arman Jon Villalobos]

Hello, I have a friend that needed to make a website for his child, since I want to be a front-end dev, I took the liberty of helping him. I receive his psd and it’s not minimalistic, anyway, the background is too big, I’ve tried the tricks here from Your text to link here…, I won’t fit in 1400×900 althought, when I scale it smaller.

The screenshot with the browser: http://www.dropbox.com/s/d9mrzrj2tse2d8x/Screenshot%202014-08-15%2022.38.14.png

The background: http://www.dropbox.com/s/jpqrw2gq2nhpl6x/bg-cover.jpg

I’m new to design, I came from the server side but I really want front end.

Or this background is just impossible for responsive type of website? He want’s it to be responsive too.

[Soren]

Without seeing all your content, just the desired background image, I can’t help much but I’ve had something similar and couldn’t convince the designer to rethink his pixel perfection thoughts so I went with this.

Chop up that PSD into 3 seperate files

File 1 = header image
clouds, hills and trees [top part of your image]
CSS background image – maybe a repeatable image

File 2 = footer image
clouds, hills and trees [bottom part of your image]
position bottom center of body or main wrapping element
CSS repeatable background image on x axis

File 3 = image sprite
woman, children the sun and giraffes
absolute positioned elements for each sprite image
CSS image sprite technique

I’d probably use CSS gradient for the blue sky background or a CSS background color/repeated image (File 4) on the body depending on browser support.

NB: I told my designer that in the responsive world, one PSD design is not the way, only a snapshot of how a site could look at that ratio. The web is not print : )

[Arman Jon Villalobos]

Hi sir,

here’s the whole screenshot in PS : https://www.dropbox.com/s/norigdbe0sdjbv4/Screenshot%202014-08-16%2014.49.16.png.

This is my first time handed a psd with that amount of colors and details, usually I only do mockups, or simpler site. Haha. So this will be a lot of experience. But will try your suggestions later.

Thank you!

[Soren]

http://codepen.io/soren-tree/full/Dxkal

3 wrapping elements 100% width (header, section, footer). We can apply a repeatable CSS background image to them. Inside each of these is another wrapper that is the ideal width for the content. I’ve called mine .content-wrap and it’s max-width: 960px; and margin: 0 auto; position: relative;

We can make the main focus of our bkg images in Photoshop at least 960px wide and repeat them horizontally. Use CSS to position the image in the center horizontal and bottom vertical.

IMAGE SPRITE – You can add them inside their .content-wrap mark up and move them about with CSS, i.e. section . site-content = woman, position: absolute; bottom: 0; left: 0; Maybe not show these on smaller devices.

BLUE SKY BACKGROUND – think about when a page is taller than the PSD mock-up due to more content. Maybe apply a gradient background of the blue/white to the body or the section wrapper.

Chris has a gradient on this here page! The green fading to black.

NB: The designer will have to compromise on the bkg images design by amending them so they look good when repeated (i.e the hills join together perfectly when the same image is repeated horizontally). See my example!

Have fun!

http://codepen.io/soren-tree/pen/Dxkal

[Author]

Posts