CODEWITHSUNDEEP
javascriptcssbackground-image
RussellHarrower
RussellHarrower

Reputation: 6810

remove html background-image when not wanted

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;}

Upvotes: 0

Views: 37

Answers (3)

Patrick Burtchaell
Patrick Burtchaell

Reputation: 4132

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.

Upvotes: 0

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

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.

Upvotes: 0

Motti Horesh
Motti Horesh

Reputation: 798

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;
}

Upvotes: 3

Related Questions