Jump to content

Background image full size


Recommended Posts

  • 4 weeks later...
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 post
Share on other sites
  • 2 weeks later...

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 post
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 post
Share on other sites
  • 2 weeks later...

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 post
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 post
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...