The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Trying to fit the background

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #179178

    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:

    The background:

    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.


    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 : )


    Hi sir,

    here’s the whole screenshot in PS :

    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!


    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!

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.