can't change background-color of slides, starting with background-fit

[slambert]

Using a background image with background-fit style on a high resolution display.

That means, thanks to the recommendation in #215, this CSS is in the stylesheet:

body > #preso,
body > #preso > .slide {
    height: 100%;
    width: 100%;
} // full width stuff

I'm using an image that doesn't match the aspect ratio of the screen, which creates white space above and below the image. I'd like to make it black. See image below.

What I've tried so far:

body > #preso,
body > #preso > .slide {
    height: 100%;
    width: 100%;
    background: #000;
} // full width stuff

I was using this for a while, and it allowed me to change the background colors of slides with <!SLIDE blue> for example. Then creating styles like .blue {background: #0000FF;}. However, the background line in the above css breaks background-fit (I'm embarrassed by how long it took me to track this down).

So I tried this:

body > #preso,
body > #preso > .slide {
    height: 100%;
    width: 100%;
    background-color: #000;
} // full width stuff

This doesn't break background-fit and changes the background black. However, it changes it on every slide. I would like to have a default slide background color that isn't white, but this clearly isn't the best way to do that.

I also haven't been able to find a selector that will change the background of a background-fit slide, nor other slides.

I'm probably missing something obvious because I've been staring at this too long. 😖

[marrero984]

Try assigning a background to just the body. I think #preso and .slide are both exactly the size of that background image and it's just the body that is left. Unfortunately, I don't have it set up to test right now.

body {
  background-color: #000;
}

Those height: 100% don't ever work the way I expect them to. I think a both of the elements have to be changed to explicit blocks

[slambert]

@marrero984 I believe that would change the background on every slide. I'm trying to use different backgrounds on certain slides using .background-fit or .blue (as two examples).

Open to suggestions!

[binford2k]

@slambert unfortunately at this point div#preso doesn't fill the screen, so the body will show around it. A gross hack could be to assign the body background-color dynamically each time a slide is changed.

Something like the following completely untested js could work. Just drop it in a *.js file in the presentation root.

$('.content.blue').bind('showoff:show', function (event) {
    $('body').css('background-color', 'blue'),
});
$('.content.blue').bind('showoff:next', function (event) {
    $('body').css('background-color', 'black'),
});

@marrero984 is working on revamping the structure of the slides completely, and this issue should go away.