Creating Image Container with Background and Foreground Image

  • Resolved davidslager

    (@davidslager)


    8 years, 10 months ago

    Is it possible to make an image container with a background and foreground image?

    If so, how would I do it such that they both don’t have to fill the container?

    I’m trying to show furniture resizing based on user inputs relative to a living room – I need all of the other furniture (in the background) to stay the same size while a table grows and shrinks based on input.

Viewing 1 replies (of 1 total)
  • Plugin Author codepeople

    (@codepeople)

    8 years, 10 months ago

    Hello,

    Your question is not about our plugin, it is a basically about the use of CSS rules.

    For example, you can insert a “HTML Content” field in the form with a pair of DIV tags and some CSS rules as its content:

    <div class="background-image"><div class="foreground-image"></div></div>
<style>
.background-image{ /** The corresponding CSS rules here **/ }
.foreground-image{ /** The corresponding CSS rules here **/ }
</style>

    More information concerning the CSS rules in the following links:

    https://css-tricks.com/almanac/properties/b/background/
    https://developer.mozilla.org/en-US/docs/Web/CSS/background

    By the way, if you want modify some CSS rules programmatically, you should call some javascript instructions as part of the equations associated to the calculated fields:

    jQuery('.foreground-image').css('css rule', 'value');

    Best regards.

Viewing 1 replies (of 1 total)

The topic ‘Creating Image Container with Background and Foreground Image’ is closed to new replies.