Forum

Thread tagged as: Question

How do I add a background image for styling a parallax slide?

I have a site that uses large background images you can see an example here set to full height for a parallax effect. I know, it's not great design, but the client loves it. I want them to be able to add a new parallax section at will. Usually the background image is defined in your CSS file. But since I can't use perch to write to the CSS File, I have to code the background image into the page. I have the following perch region in a template, but the output is not correct. Is there any way to achieve what I want to do?

<section class="module parallax" style="background-image: url("<perch:content id="image" type="image" label="Add your background image. />");">
        <div class="container">
            <perch:if exists="title OR support_text">
               <perch:before>
                <div class="row">
                     <div class="col-sm-12 center">
                     </perch:before>
                         <perch:if exists="title">
                         <h1><perch:content id="title" type="text" label="Main Title for Content" title="true"/></h1>
                          </perch:if>
                          <perch:if exists="support_text">
                         <perch:content id="support_text" type="textarea" textile="true" editor="markitup" label="Support Content for Title" help="Add support description here" />
                         </perch:if>
                     <perch:after>
                       </div>
                    </div><!--* ./row *-->
                    </perch:after>
               </perch:if>
        </div><!--* ./container *-->
</section>

Kim Mazzola 0 points

5 years ago

Clive Walker 22 points

5 years ago

What output do you get? In what way isn't it correct?

Kim Mazzola 0 points

5 years ago

This is what is returned when I view the code:

<section sprintervan.jpg");"="" resources="" perch="" style="background-image: url(" class="module parallax">
        <div class="container">


                <div class="row">
                     <div class="col-sm-12 center">


                         <h1>text headline</h1>


                         <p>support text</p>


                       </div>
                    </div>

        </div>
</section>

And what I want returned is the following:

<section class="module parallax” style="background-image: url(“image/path_to_uploaded_image.jpg”);”>
        <div class="container">


                <div class="row">
                     <div class="col-sm-12 center">


                         <h1>text headline</h1>


                         <p>support text</p>


                       </div>
                    </div>

        </div>
</section>

Clive Walker 22 points

5 years ago

I'd be tempted to try something like this for the background-image bit of the style rule:

background-image:url(<perch:content id="image" type="image" label="Add your background image" />);

i.e without the quotes round the perch tag

Kim Mazzola 0 points

5 years ago

That's exactly what I did and now it works perfectly. Thanks for the input.