Place background image on bootstrap signin splash page

StackOverflow https://stackoverflow.com/questions/22994980

Question

I am trying to customize Twitter Bootstrap's splash sign-in page.

I haven't touched the HTML, but I am trying to edit the background of the splash page.

Here is all the CSS I have added:

html {
  background: url("../img/bumpit_splash.png") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

What is happening is the top-half of the splash page retains its white background, but the bottom half gets the color of the background image I am trying to replace it with.

Thank you in advance for any help.

Was it helpful?

Solution

Hard to tell without a preview, but i'm guessing your <body> tag has a white background, and because its a login form, its not as tall as the <html> tag(your viewport).

Disable the background color for <body>, or make it 100% tall and add the background this instead of the html element.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top