Jump to content

Background image full size


GugZi

Recommended Posts

Koleckai Silvestri

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

  • 4 weeks later...
the-dumb1

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

Poptartica

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 by Poptartica
Link to comment
Share on other sites

  • 2 weeks later...
Happy2Play

Looks like the dev release is working on similar style.

 

56e74df0c6bc3_transparent2.jpg

  • Like 2
Link to comment
Share on other sites

fredg89

Looks like the dev release is working on similar style.

 

56e74df0c6bc3_transparent2.jpg

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

Happy2Play

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

  • 2 weeks later...
bfir3

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

  • 1 year later...
Diedrich

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 by Diedrich
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...