stiw47 2 Posted June 25, 2019 Share Posted June 25, 2019 (edited) 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 Link to comment Share on other sites More sharing options...
chef 3745 Posted June 25, 2019 Share Posted June 25, 2019 (edited) There is another div you have to target. That the cartoon rows are in. Edited June 25, 2019 by chef Link to comment Share on other sites More sharing options...
stiw47 2 Posted June 25, 2019 Author Share Posted June 25, 2019 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 Link to comment Share on other sites More sharing options...
chef 3745 Posted June 25, 2019 Share Posted June 25, 2019 I'll check it out for ya. You'll probably have to target it by class name. One second... 1 Link to comment Share on other sites More sharing options...
stiw47 2 Posted June 25, 2019 Author Share Posted June 25, 2019 I found it, it is called homeTab. Applied same CSS from first post was done the job. @chef: Thanks a lot! 1 Link to comment Share on other sites More sharing options...
stiw47 2 Posted June 27, 2019 Author Share Posted June 27, 2019 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; } } 1 Link to comment Share on other sites More sharing options...
chef 3745 Posted June 27, 2019 Share Posted June 27, 2019 (edited) Edited June 27, 2019 by chef Link to comment Share on other sites More sharing options...
stiw47 2 Posted June 27, 2019 Author Share Posted June 27, 2019 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. Link to comment Share on other sites More sharing options...
chef 3745 Posted June 27, 2019 Share Posted June 27, 2019 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now