CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
handcoded
handcoded

Reputation: 43

How to make a background image bootstrap responsive when not full screen

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

Upvotes: 0

Views: 1664

Answers (3)

Pranav Pandey
Pranav Pandey

Reputation: 53

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.

Upvotes: 0

bbh
bbh

Reputation: 509

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.

Upvotes: 2

user3004798
user3004798

Reputation: 191

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

Upvotes: 0

Related Questions