Category Banner Image Missing on Landing Page After Update

[LilTrashPanda (Anna)]

Hello!

Just recently updated our Discourse to the latest version and it seems like the large banner image I’d inserted into our “Landing Page” no longer exists (and also that our Global Alert Notice box is pushed up underneath the top header bar).

I’ve figured out how to fix the Global Alert Notice, however I’m unable to get my banner image to return. Here’s the CSS we’re using – did something change that would’ve disabled this CSS?:

.category-deformers #main > .ember-view > .ember-view:nth-child(1) {
    height:500px;
    background-image:url(http://www.deformers.com/_images/forums/header-official.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    position: relative;
}

.category-deformers #main > .ember-view > .ember-view:nth-child(1):after{
    //content:'';
    display:block;
    height:10px;
    background-image:url(http://www.deformers.com/_images/slides/bgrd-slide-bot.png);
    background-repeat:repeat-x;
    background-position:left top;
    bottom: 0;
    position: absolute;
    width: 100%;
}

.category-deformers #main-outlet{
    padding-top: 200px;
}

.category-deformers .d-header.clearfix{
    padding-left:0px;
    padding-right:0px;
}

Before Image:

After Image:

[Falco]

@LilTrashPanda

ember-view

Using ember-view (or any ember internal names) in CSS selectors is a guaranteed way to make it break.

Can you share a link to the forum? That way I can try a fix.

[LilTrashPanda (Anna)]

It’s not a public forum yet, but I can send you an invite via email so you can check it out. Does that work?

[LilTrashPanda (Anna)]

Edit: I solved it, but in probably the worst way possible (lots of use of padding…).

Actually, that helped me quite a bit, but now I have a bit of another weird problem…

Since updating the CSS (and having my banner image come back as desired), when I scroll down on the main page, the background image I’ve uploaded through the category settings is cut off, and only the default background color shows instead. Is it better to set the background via CSS so I can make sure it covers the entire screen?

Current CSS:

.category-deformers #main > .ember-view:nth-child(1) {
    height:500px;
    background-image:url(http://www.deformers.com/_images/forums/header-official.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    position: relative;
}

.category-deformers #main > .ember-view:nth-child(1):after{
    content:'';
    display:block;
    height:10px;
    background-image:url(http://www.deformers.com/_images/slides/bgrd-slide-bot.png);
    background-repeat:repeat-x;
    background-position:left top;
    bottom: 0;
    position: absolute;
    width: 100%;
}

.category-deformers #main-outlet{
    padding-top: 500px;
}

That last bit is what’s causing the issue, I imagine… but it was the only way I knew how to “drop” the page’s content down load enough so it wouldn’t overlap the banner.

Current Image: