User selected background-image from SF assets? - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

User selected background-image from SF assets?

  • User selected background-image from SF assets?
  • I'd like to have the ability for a stock image control added to a page to be able to make the selected image a background image instead.
    ie: The client is requesting a unique browser-wide hero image for each page. They want a 2000px+ wide image that will be centered with the site, and be able to easily change it. If done using a normal image widget, the end result will get a scroll-bar as soon as browser is below 2000px.
    Can this be done stock? Or very easily with a custom control?
  • Hey Nik,

    You can build a simple custom control for this.
    Add a literal to it, use Thunder to add a designer, make it a guid and Image Selector.

    Then in your code behind, build out a style rule, which inserts the image as a background url.
    You could hardcode the styling, do it by means of a css class or extend the control for various options but the proper css rule set would be:
    background: url(thedynamicimage.jpg) no-repeat center center fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;