- This topic is empty.
August 15, 2014 at 7:39 am #179178Arman Jon VillalobosParticipant
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.August 15, 2014 at 9:14 am #179188SorenParticipant
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 : )August 15, 2014 at 11:50 pm #179249Arman Jon VillalobosParticipant
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!August 16, 2014 at 7:58 am #179272SorenParticipant
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!
- The forum ‘CSS’ is closed to new topics and replies.