I have a design that I'm converting to be Bootstrap responsive but have run into a couple of problems.

1. How to make a non full width background image responsive
   
2. How to keep the main form content the correct distance away from the top of the image no matter what the viewport size.
   

Mock up image

Website

Js Fiddle - http://jsfiddle.net/handcoded/nsaoxbez/1/

I'd be very grateful for any pointers

Hi!
If I have a smaller image, eg.: 960px wide, I would place it to the middle for wider screens, and for smaller ones, I would use the background-size property.
http://www.w3schools.com/cssref/css3_pr_background-size.asp

With 480px or smaller the background image can be different, with only a gradient or with one color, with that small size I would focus on usabilty, make text readable etc.

If you want to keep the content in a certain distence from the top, that is not a problem, vertical (top or bottom) padding or margin will not changif you set it in pixels not percent, only horizontal distanses cause problems.

mention the following element on body

{

back-ground-repeat:repeat y;

}

I would use Background-size: cover;

 

If you add this to your jsFiddle it should show you what you are after.

body {
    Background-size: cover;
}

Edited June 9, 201511 yr by richardmountain