Jump to:

17452 Posts in 4473 Topics by 1971 members

Archive

SilverStripe Forums » Archive » Watermark image as background on container

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, biapar, Willr, Ingo, simon_w

Page: 1
Go to End
Author Topic: 1487 Views
  • gkinane
    Avatar
    Community Member
    22 Posts

    Watermark image as background on container Link to this post

    Is it possible to have a watermark image (e.g. Company logo) as the background to main areas of site ?

    If so how is it done ?

    Any help appreciated.

    Regards
    Gerry

  • Pixel
    Avatar
    Community Member
    78 Posts

    Re: Watermark image as background on container Link to this post

    Just wrap a div around $layout in the template and in the Layout CCS and give the div a background image. Or if there is a div already around it - just give that a background image.
    If your content area expands ie. height: auto; give the div a background colour the same as the background to the image

  • gkinane
    Avatar
    Community Member
    22 Posts

    Re: Watermark image as background on container Link to this post

    Hi Pixel

    Did that in Page.ss (code below)
          <div id="Main" class="typography">
             $Layout
    background-image:url(../images/bglogo.gif);
          </div>

    I obviously have something wrong as this does not work.

    Thanks for help

  • Pixel
    Avatar
    Community Member
    78 Posts

    Re: Watermark image as background on container Link to this post

    Yes you need to put the background image in the CSS not the SS

    .SS looks like

    <div id="Main" class="typography">
    $Layout
    </div>

    CSS (themes/YOURTHEME/css/layout.css) could look like

    #Main {
    height: auto;
    width: ????px;
    padding: 10px;
    float: left;
    background: #FFFFFF url(../images/bglogo.gif) no-repeat;
    }

  • gkinane
    Avatar
    Community Member
    22 Posts

    Re: Watermark image as background on container Link to this post

    Pixel

    Thank you . That worked perfectly. All I need to do now is reduce the opacity.

    Regards

    Gerry

    1487 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.