0

I need some guidance into making a responsive background image for an admin page without using media queries. The background image needs to respond to the browser window without stretching.

Similar to this example page

I using bootstrap 3.3.6 to build this page. The admin login page is divided as a split screen.

  • Left hand side is login area
  • Right hand side is a background image with text content on top. login page

http://www.r1.jxt.com.au/Admin/login.aspx?ReturnURL=~%2fadmin%2fdefault.aspx

I need all the guidance I can get to going about making this happen. Thank you!

Karl
  • 1,814
  • 1
  • 25
  • 37
Andrew C. Duarte
  • 237
  • 2
  • 15

2 Answers2

0

You should change your .bg-image class with following:

.bg-image {
    background: url(../img/bg-image-md.jpg) no-repeat center center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}
Kaan Burak Sener
  • 974
  • 10
  • 19
0

Here's something to get you started: http://codepen.io/panchroma/pen/BKdgKP

.bg-image{
background-image: url(http://images.jxt.net.au/jxt-admin/img/bg-image-lg.jpg);
background-size:cover;
background-position:50% 0 ;
}

Use the background-size property with the value of either cover or contain, and position the background image as required.

More info on the background-size property

David Taiaroa
  • 25,157
  • 7
  • 62
  • 50