Dear all,

I have the following problem and i'm hoping someone is able to help me out. I made a octobercms one-page website where the first 'page'/'contentblock' is a image that fills the complete screen. It's a div with the following css:

.header {
  display: table;
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../img/bg.jpg) no-repeat center center scroll;
  background-size: cover;
}

The owner of the website needs to be able to change this header image (bg.jpg) in an easy way without knowing how to edit css or something. Can someone help me out or give me an idea for a possible way to do this?

I know I could just make a div and put a < img href...> in it, but I need this kind of styling and that's only possible with a css background image and not with as far as I know.

Hope someone can help me :) Thanks in advance,

Jelle

Last updated 9 years ago

Could you not put a style tag on the div with the background css rule in it, then you could call the image via {{ "bg.jpg"|media }} or {{ "path/to/img/bg.jpg"|theme }} or however you want to use the image?

Last updated 9 years ago

Multiple solutions:

One is inline style attribute, although this isn't the 'nicest' way.

More approved way is through the use of {% put styles %} . As Daniel81 mentions you can use <style> tags to insert styling in the middle of a website. By putting it between the PUT, it adds it in your head (or where ever you put your {%styles%} tag.

{% put styles %}
<style>
    #foo {
        background: url('{{something.something.darkside}}');
    }
</style>
{%endput%}

Hope this helps!

Last updated 9 years ago