CSS help please: Why does the size of my login screen background change when I enter a wrong password - I'm using "cover"

  • 19 August 2022
  • 4 replies
  • 35 views
lrodman
Rank
Userlevel 7
Badge +5

I checked and the background-size: cover is still “there” after erroring. 

/*transparent sign-in popup*/
div.external-simple-signin {
    background-size: cover !important;
}

@media screen and (min-width: 651px) {
	div.external-simple-signin {
		background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/login-screen-glass-door.png) no-repeat center;
		opacity: 0.8;
		background-color: transparent;
	}
}

 

4 replies

elliott.vickrey
Rank
Userlevel 7
Badge

Hi @lrodman, I am admittedly not a CSS expert, but I believe it has to do with the overall size of the login form lengthening to accommodate the error box and the text that appears below the username and password fields. Because the “cover” value resizes the image to fit, I imagine it is scaling the image up so it covers the full login window.

Elliott V.
lrodman
Rank
Userlevel 7
Badge +5

It does indeed lengthen the box, but… ok yeah that’s it

 

Is there really no “stretch to fit”?

elliott.vickrey
Rank
Userlevel 7
Badge

You’d think there would be… I was looking at the Property Values table here, and it looks like there are some possible alternatives. I wonder if “inherit” would work?

Elliott V.
Bfarkas
Rank
Userlevel 7
Badge +3

Close, but inherit will just bring the values set from the above containers, which may or may not set the size how you are looking. But if you go and set the length or the percentage attribute and use relative sizes like 100%, it would do your fill that you are looking for, but be careful as the image is now no longer constrained to its designed proportions.

https://www.w3schools.com/cssref/css3_pr_background-size.asp

You are using cover which should do it too, except it is stretching it larger down than wide since it is a very different proportion now, but not in the media query, so wondering which version you are getting in the screenshots.

If you are using media queries and conditions, you might want to think about just replacing the images for the error state.

Also, as said before, be careful with all those !important tags, they can cause you issues for queries too.

 

Reply


Terms & ConditionsCookie settings