0

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

I'd be very grateful for any pointers

4
  • cant you just use the background-size property, and use percentages ? Or use a site container grid of 4 x 4 x 4 and the centre 4 will contain background image (and content)?
    – Pogrindis
    Jun 4, 2015 at 12:32
  • Can you show the code you have tried?
    – m4n0
    Jun 4, 2015 at 12:40
  • Do you want to fill the blank space around the image ? But with what ?
    – singe3
    Jun 4, 2015 at 12:47
  • Not concerned about the blank spacing around the background so long as the background image resizes down and I have a way to easily position the form so that it is always the correct the distance from the top of the background.
    – handcoded
    Jun 4, 2015 at 13:22

3 Answers 3

2

The following is one simple option, according to your mockup-Website.

  1. Create a parent DIV that is center aligned on the page.
  2. Apply a background image to this DIV and set its max-width to 100%.
  3. Create another div that will sit on top of the parent DIV (and is relative to the parent DIV).
  4. Give its top margin the required %.
  5. It is recommended that you create these styles on media queries for responsive display.

There are a lot of StackOverflow topics the will help you through with the above steps.

HTH.

1
  • A jsfiddle would really help me to understand this better but I'll try it.
    – handcoded
    Jun 4, 2015 at 13:24
0

To fix problem 1: on the body you can use: background-size:contain;

1
  • Tried that but the image does not resize at smaller screen sizes
    – handcoded
    Jun 4, 2015 at 13:21
0

First, for the background image:

div.someclass{ 
 background: url(images/bg.jpg) no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

This will make your background image responsive, i.e. it will fit according to the size of the display the page is viewed on.

Second, to keep the main form content a proper margin from above on any device is to give the div you just created for the main content a relative margin on top:

div.someclass{
margin-top:5%;
}

change the above 5% according to your requirement.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.