Add a Picture as background layout with aalborg theme

Hi,

I am currently using allborg theme and elgg 2.1.

It is ok for us and I have made some minor changes in the css (Fonts, colors...)

I would like to add a picture  as background layout to make the site nicer.

Is it possible? complicated? Can someone give me some advices?

Thanks

  • Copy the file vendor/elgg/elgg/views/default/elements/reset.css.php to mod/your_theme/views/default/elements/reset.css.php. Then you can add the css code for displaying the background image within

    body {
        background-color: white;
    }
  • Thanks for this advice.

    I am trying with this code but nothing appears:

    body {
        background-color: white;
        background: url(graphics/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    I want a fixe picture, responsive... I found this way on tutos but what did I wrong?

    thx

  • Most likely the image file is not found as "graphics/bg.jpg" is no valid url.

    Try

    background: url(<?php elgg_get_simplecache_url('aalborg_theme/bg.jpg'); ?>) no-repeat center center fixed;

    with the image placed in mod/aalborg_theme/graphics. This works because this folder is registered as view path in mod/aalborg_theme/views.php. If you are creating your own theme instead you would need to either add a views.php file in your plugin folder, too, or you could place the image file somewhere in mod/your_plugin/views/default as this directory and everything within is cached automatically.

  • Thx

     I checked with this line but nothing appears... Should I modify something else in the theme?

    Or should I delete or modify also vendor/elgg/elgg/views/default/elements/reset.css.php?

    For now I copied this file like that in the theme folder as you said me (elements) and  add this code:

    body {
        background-color: white;
        background: url(<?php elgg_get_simplecache_url('aalborg_theme/bg.jpg'); ?>) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

     

    But nothing appears, my background is the same than before...

  • I tried with simple cache activated and deactivated... The same...

  • I found a way easier for me. I paste this code in mod/aalborg_theme/views/default/elements/layout.css

     

    And it works well, still responsive, great.

     

    Thanks for help :)