How do you add a banner to the top of the slides without being able to insert a <div> into the generated output?

[ryanewtaylor]

I would like to add a simple colored banner to the top of the all the slides. My current solution requires that I add the following markdown to each slide section.

- data-background: images/top-nav-bg.png
- data-background-repeat: repeat-x
- data-background-size: 10px 38px
- data-background-position: left top

It works but I would like to be able to write this once at the top of index.md so I needn't repeat it on each slide. In Reveal.js, I would probably add the banner by adding a div with an appropriate css class defined into the index.html (outside of the slides definitions).

Is there a way to write this configuration once and have it applied to all slides?

[kimsk]

Currently, you could do something like that in custom.css.

For example, I can put logo in every page like this.

body {
    background: url("../images/logo.png") no-repeat #000000
}

[ryanewtaylor]

This got me in the right direction. I actually had to align two image at the top and a radial gradient color for the background. I was able to do that with the following CSS:

body {
  background: #20396d; 
  background-image: url("../images/logo.png") no-repeat #20396d;
  background: url("../images/logo.png") no-repeat 100px 0px, url("../images/top-nav-bg.png") repeat-x, -webkit-gradient(radial, center centerleft top 10px 38px, 0px, center center, 100%, color-stop(0%, #20396d), color-stop(100%, #3d66c8));
  background: url("../images/logo.png") no-repeat 100px 0px, url("../images/top-nav-bg.png") repeat-x, -webkit-radial-gradient(center, circle cover, #20396d 0%, #3d66c8 100%);
  background: url("../images/logo.png") no-repeat 100px 0px, url("../images/top-nav-bg.png") repeat-x, -moz-radial-gradient(center, circle cover, #20396d 0%, #3d66c8 100%);
  background: url("../images/logo.png") no-repeat 100px 0px, url("../images/top-nav-bg.png") repeat-x, -o-radial-gradient(center, circle cover, #20396d 0%, #3d66c8 100%);
  background: url("../images/logo.png") no-repeat 100px 0px, url("../images/top-nav-bg.png") repeat-x, -ms-radial-gradient(center, circle cover, #20396d 0%, #3d66c8 100%);
  background: url("../images/logo.png") no-repeat 100px 0px, url("../images/top-nav-bg.png") repeat-x, radial-gradient(center, circle cover, #20396d 0%, #3d66c8 100%);
}

More info about combing images and gradients can be found here.

http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients