Dynamic has the ability to display custom background images in several sections of the HTML files. These sections include:

• Single index page (hero image and other sections)
• Slider index page (banner slider and other sections)
• Portfolio detail page (header image and other sections)

Adding Custom Background Images

You can create your own image or use a licensed photo to display as background imagery in Dynamic. To add a background image, follow these instructions:

1. Add your custom background images to the directory/folder where you will store your images. For example, this could be a folder called images for all of your site’s graphics.
2. Open the index.html file in your code editor.
3. Search the code for the specific section you wish to add custom background images to.
4. Type the directory/folder path and name for the image.
5. Save the index.html file.
6. Repeat steps 1-5 as necessary.

Here is the code which you need to modify to add a new hero image:

<section id="section-1" class="hero hero-image color-light center nav-trigger" style="background-image: url(include/images/hero.jpg);">

Here is the code which you need to modify to add new slides:

<li data-slotamount="6" data-transition="fade" data-thumb="include/images/slider/slide-1.jpg">
<li data-slotamount="5" data-transition="fade" data-thumb="include/images/slider/slide-2.jpg">
<li data-slotamount="4" data-transition="fade" data-thumb="include/images/slider/slide-3.jpg">
<li data-slotamount="3" data-transition="fade" data-thumb="include/images/slider/slide-4.jpg">

In the slider version, search for the comments (i.e. <!– Banner Slide 1 –>) to aid you in finding the areas in the code to change the background images.

Here is the code which you need to modify to add a new image for the text ticker section:

<section id="section-3" class="poster poster-section center color-light" style="background-image: url(include/images/ticker-image.jpg);">

Here is the code which you need to modify to add a new image for the pricing section:

<section id="section-6" class="poster color-light center padded" style="background-image: url(include/images/pricing-image.jpg);">

Here is the code which you need to modify to add a new image for the poster section in the portfolio-single.html file:

<section class="poster color-light center padded-large nav-trigger" style="background-image: url(include/images/poster-image.jpg);" data-0="background-position:0px 0px;" data-top-bottom="background-position:0px 100px">

Here is the code which you need to modify to add a new image for the project results section in the portfolio-single.html file:

<section id="project-results" class="center padded poster color-light" style="background-image: url(include/images/project-image.jpg);">

We recommend that you keep your images small in dimensions and below 500KB for optimal loading and scrolling. You should use the placeholder as a guide when selecting and resizing your background image. For more information, please refer to the Managing Site Images section of this document.