remove html background-image when not wanted

Question

I currently use the following code to put a background on the whole html document, but I only want it on the main home page - once a user login I want it to be removed is there away with CSS or Javascript to do such a thing?

html{display:block;
    width:100% !important;
    height:100% !important;
    background: url("../images/carged_dog.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}
  html,body{    margin:0;   padding:0;}

Motti Horesh · Accepted Answer · 2014-06-21 17:30:05Z

3

Add an additional css class for the logged in state for example

<html class="user-logged-in">

and add the following CSS

html.user-logged-in {
    background: none;
}

answered Jun 21, 2014 at 17:30

Motti Horesh

7988 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

There are many ways of doing it.

Server side code

I'm an ASP.NET dev so, I would provide that code, you can use the Alternate of this in your own language

if(WebSecurity.IsAuthenticated) {
   <div class="body-no-background">
      // content
   </div>
}

Then in the Class, apply no background.

However, JavaScript cannot detect any user logged in or not. But, you can create a variable and give it a value. Then you can use that value, like this

if(!userLogged) { // userLogged is a boolean type, with true false value
   document.getElementById("body").style.backgroundImage = "";
}

In JavaScript you would require a condition to check whether user was logged in or not, that would be using Server Side language. Give a value to some hidden input field.

In CSS, you cannot do that. You would require to use a seperate class, for seperate conditions. Otherwise, you cannot detect such thing using CSS. CSS is not designed to do this.

Patrick Burtchaell · Accepted Answer · 2014-06-21 20:14:22Z

0

The easiest way to do this would be to —in the HTML— put a class on the <html> tag on the home page in, e.g., <html class=home-page>. Then, in css you would have a selector that only puts the background image on the .home-page class, like so:

html {
  display: block;
  width: 100%;
  height: 100%; 
}   
html.home-page { 
  background: url("../images/carged_dog.jpg") center center / cover no-repeat fixed; 
}

Also, some other notes, unless you need to support older browsers, vendor prefixes are not needed on the background-size property. You can also combine the property with the background property using a forward slash like I have. See MDN for more.

edited Jun 21, 2014 at 20:14

answered Jun 21, 2014 at 17:34

Patrick Burtchaell

4,1321 gold badge17 silver badges25 bronze badges

Collectives™ on Stack Overflow

remove html background-image when not wanted

3 Answers 3

Comments

Server side code

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Server side code

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related