[SOLVED] CSS How to set background on whole index page top to bottom?

[stiw47 2]

I am not a developer, but on some level, can handle with code by copy/paste/edit to fit my need.

 

My CSS is as follows:

 

#indexPage {  background: url('https://cloud.stiw47.cloud/s/GKLccXejorkRma2/download');  background-repeat: repeat-y;  background-size: cover;  webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;} 

What I got is on below video:

 

https://youtu.be/kleNPCCgMbU

 

You can see that my background is (probably) repeating, but element (sorry if I'm using wrong word, am not developer ) at Latest Cartoons is howering over my background.

 

How to set background on whole page?

 

This is only example, I will find some nice background

Edited June 25, 2019 by stiw47

[chef 3745]

There is another div you have to target. That the cartoon rows are in.

Edited June 25, 2019 by chef

[stiw47 2]

There is another div you have to target. That you cartoon rows are in.

Thanks for answer. That come in my mind, but i cannot figure out name of div. Do you know what is the name? Shoud I provide screenshot of Inspect Element if this name isn't "static"? Asking such a dumb qustion because I already tried to play with different div names in Emby CSS settings, without success.

 

Thanks

[chef 3745]

I'll check it out for ya. You'll probably have to target it by class name.

 

One second...

[stiw47 2]

I found it, it is called homeTab.

Applied same CSS from first post was done the job.

@chef: Thanks a lot!

[stiw47 2]

And just to not be in "got help and run away" manner, I will share my knowledge from yesterday. Yes, homeTab div will do the job on indexPage, but after this, I continued and ran into new problem when I wanted to set background on moviesPage, cause there is no homeTab here. I found that tabContent and pageTabContent will do the job in little different syntax, so below is my complete CSS which will set custom backgrounds on Login Page, Index Page, Movies Page, Music Page and Forgot Password Page. Of course, change image URLs to yours.

 

I still have some blank gap on the bottom of Music/Movie Pages, but will try to solve this.

 

 

I am pretty sure that some things can be removed from code below and whole code can be "fine tuned", but as I said, I am not dev and below is working for me

#loginPage {
        background-image: url(https://cloud.stiw47.cloud/s/DGbZw8yde4FDHE2/download);
        background-repeat: repeat-y; 
        background-position: center;
        background-attachment: fixed;       
        webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

@[member="Media"] all and (max-width: 1200px) {
    #loginPage .padded-bottom-page {
         min-height: 100%;
         margin-bottom: -40px;
         padding-bottom: 40px;
         margin-top: -40px;
         padding-top: 40px;
         background-image: url(https://cloud.stiw47.cloud/s/YDRpDC34WPy4ZwC/download);
         background-color: transparent;
         background-repeat: no-repeat;
         background-position: center top;
         background-size: cover !important;
         background-attachment: fixed;
    }
}

#forgotPasswordPage {
        background-image: url(https://cloud.stiw47.cloud/s/dkNBoStYRRYYRGq/download);
        background-repeat: repeat-y; 
        background-position: center;
        background-attachment: fixed;       
        webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

@[member="Media"] all and (max-width: 1200px) {
    #forgotPasswordPage .tabContent {
         min-height: 100%;
         margin-bottom: -40px;
         padding-bottom: 40px;
         margin-top: -40px;
         padding-top: 40px;
         background-image: url(https://cloud.stiw47.cloud/s/3Xq7KCNnWFEr5aW/download);
         background-color: transparent;
         background-repeat: repeat-y;
         background-position: center top;
         background-size: cover !important;
         background-attachment: fixed;
    }
}

#indexPage .tabContent {
       background: url(https://cloud.stiw47.cloud/s/GDCSFR5F83sGf2y/download);
        background-repeat: repeat-y;
        background-position: center;
        background-attachment: fixed;    
        background-size: cover;   
        webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
}

@[member="Media"] all and (max-width: 1200px) {
    #indexPage .tabContent {
         min-height: 100%;
         margin-bottom: -40px;
         padding-bottom: 40px;
         margin-top: -40px;
         padding-top: 40px;
         background-image: url(https://cloud.stiw47.cloud/s/m8s7bXFDnqfWJwL/download);
         background-color: transparent;
         background-repeat: repeat-y;
         background-position: center top;
         background-size: cover !important;
         background-attachment: fixed;
    }
}

#moviesPage .pageTabContent {
       background: url(https://cloud.stiw47.cloud/s/pZg2YypY4rnAPAW/download);
        background-repeat: repeat-y;
        background-position: center;
        background-attachment: fixed;    
        background-size: cover;   
        webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
}

@[member="Media"] all and (max-width: 1200px) {
    #moviesPage .pageTabContent {
         min-height: 100%;
         margin-bottom: -40px;
         padding-bottom: 40px;
         margin-top: -40px;
         padding-top: 40px;
         background-image: url(https://cloud.stiw47.cloud/s/9DMEE9ja5Ndnnbn/download);
         background-color: transparent;
         background-repeat: no-repeat;
         background-position: center top;
         background-size: cover !important;
         background-attachment: fixed;
    }
}

#musicPage .tabContent {
       background: url(https://cloud.stiw47.cloud/s/8teWJjzfz9nmiJ9/download);
        background-repeat: repeat-y;
        background-position: top center;
        background-attachment: fixed;    
        background-size: cover;   
        webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
}

@[member="Media"] all and (max-width: 1200px) {
    #musicPage .tabContent {
         min-height: 100%;
         margin-bottom: -40px;
         padding-bottom: 40px;
         margin-top: -40px;
         padding-top: 40px;
         background-image: url(https://cloud.stiw47.cloud/s/yBnetBdSeGpzQrM/download);
         background-color: transparent;
         background-repeat: no-repeat;
         background-position: center top;
         background-size: cover !important;
         background-attachment: fixed;
    }
}

[chef 3745]

Edited June 27, 2019 by chef

[stiw47 2]

Well done!

 

Quick tip '!important' is important to use on all css overrides because you are taking control of those styles.

Thanks for tip, but just to check if I understood correct - it is good to use !important in Emby settings CSS, because I probably will write some CSS which should be applied instead of same default system CSS (and I don't know for sure which system CSS exists, etc...). If I understood correct, we should always use !important when modding Emby?

 

Thanks.

[chef 3745]