GugZi 2 Posted January 27, 2016 Share Posted January 27, 2016 How to do this in emby? 1 Link to comment Share on other sites More sharing options...
Koleckai Silvestri 1150 Posted January 27, 2016 Share Posted January 27, 2016 Would also like to know if this is possible. Looked at the CSS for a bit but couldn't find a solution. Link to comment Share on other sites More sharing options...
GugZi 2 Posted February 3, 2016 Author Share Posted February 3, 2016 i have try to edit all the css around dat and can't find a thing Link to comment Share on other sites More sharing options...
the-dumb1 121 Posted February 28, 2016 Share Posted February 28, 2016 I'm also interested in doing this. The "backdrop" is fairly worthless if it's limited to only a small portion of the screen like that. Link to comment Share on other sites More sharing options...
Poptartica 12 Posted March 3, 2016 Share Posted March 3, 2016 (edited) Sadly it seems like there isn't any "easy" way to do this in the CSS, since that part is actually its own section (the backdrop) in emby that is separate from the other parts of the page below it and also contains some of the controls that are needed for navigation. Not only that but the background image source URL is placed there by what I assume is the javascript, so changing the page to look like that would require either editing the javascript or the actual page structure in the HTML. I suppose it's possible that you might be able to change it with only CSS if you were willing to add a bunch of additional CSS rules to the surrounding elements so that you could safely make the backdrop "position:absolute" without hiding or obscuring important parts of the UI that are contained within it, but without spending a bunch of time on it I didn't see any quick changes you could make to do this - it would require going through more than a few elements to get it working right. If you simply want the backdrop image to be large, you can try something like this: .itemBackdrop { height:100vh; } However, that doesn't really make it a "backdrop" for the page, as much as a cover picture. You'd need to scroll down to see the rest of the info if you did that, so I assume that's not exactly what you are looking for edit: however, if nothing else, such a realization should probably get everyone even more excited for Emby Theater themes from the sound of things, doing something like this would probably be rather painless. Edited March 3, 2016 by Poptartica Link to comment Share on other sites More sharing options...
Happy2Play 8239 Posted March 14, 2016 Share Posted March 14, 2016 Looks like the dev release is working on similar style. 2 Link to comment Share on other sites More sharing options...
fredg89 7 Posted March 15, 2016 Share Posted March 15, 2016 Looks like the dev release is working on similar style. That's Awesome. I hated how the backdrop was limited to the top portion as it would not crop the pictures correctly. Link to comment Share on other sites More sharing options...
Happy2Play 8239 Posted March 15, 2016 Share Posted March 15, 2016 That's Awesome. I hated how the backdrop was limited to the top portion as it would not crop the pictures correctly. That should be an easy fix via custom css if is left that way. Link to comment Share on other sites More sharing options...
the-dumb1 121 Posted March 27, 2016 Share Posted March 27, 2016 This feature is now built into 3.0.5910.0. Thanks Luke & team. Link to comment Share on other sites More sharing options...
Luke 36999 Posted March 27, 2016 Share Posted March 27, 2016 Glad you're enjoying it 1 Link to comment Share on other sites More sharing options...
bfir3 113 Posted April 1, 2016 Share Posted April 1, 2016 If you aren't running the latest server version and you want to include this with a simple CSS change, here it is: div#itemBackdrop { height: 1080px; position: fixed !important; width: 100%; } div.detailPageContent { top: 160px; } paper-fab.btnPlay.detailFloatingButton.x-scope.paper-fab-0 { margin-top: 20px; } div.primaryDetailsContainer>div.desktopDetails { margin-top: -50px; } div.mobileDetails { top: 160px; } div#itemDetailPage>div.ui-content { top: 160px; position: relative; } div.itemBackdropContent { min-height: 100% !important; } div.detailNameContainer>div>span.parentName { margin-top: 28px; } div.detailNameContainer>div.desktopDetails { margin-top: 1px !important; } .detailNameContainer { margin-top: -130px !important; height: 120px !important; } .inlineItemName { font-size: 28px !important; } a#lnkNextItem, a#lnkPreviousItem { z-index: 1000; top: 50%; } Works nicely for me. Link to comment Share on other sites More sharing options...
Diedrich 355 Posted April 9, 2017 Share Posted April 9, 2017 (edited) If you aren't running the latest server version and you want to include this with a simple CSS change, here it is: div#itemBackdrop { height: 1080px; position: fixed !important; width: 100%; } Works nicely for me. FINALLY! No more super-zoomed in backgrounds!!! Thank you! I'm on 3.2.12.0 Edited April 9, 2017 by Diedrich 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