banner image with text overlay

kim gallagher asked on July 14, 2017 20:34

I want to insert a simple image at the top of the page that stretches across the current device that has an overlay of editible text. The editor should be able to insert different images or overlay text. Suggestions?

Recent Answers


Brenden Kehren answered on July 14, 2017 20:55

Create a page type called "Banner" with the following fields:

  • Name - textbox, required (not displayed, system purposes only)
  • Text - textbox, 200 characters (would steer away from an editable or rich textbox because it could mess up your markup if editor inputs invalid HTML)
  • Image - URL selector field, 450 characters

Place a repeater on the page template you want the banner to show on. Set the repeater properties with the necessary values for path (./%), Top N (1), page types (custom.banner or whatever you named it), transformation name (custom.banner.transformationname).

Create a transformation with the markup you have and replace the static values with the values from the page type using <%# Eval("ColumnName") %>.

Select the page you're displaying the banner on and click New page and add a Banner page type. Fill in the fields and save it. Should display your banner.

Technically speaking this is the simplest form of how Kentico is made to be utilized.

0 votesVote for this answer Mark as a Correct answer

kim gallagher answered on July 14, 2017 21:07

good start but I want to display text on top of the image.

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on July 14, 2017 21:11

That is simply CSS and setting relative and absolute positions as well as z-index on each element.

1 votesVote for this answer Mark as a Correct answer

Amit Srivastava answered on July 17, 2017 14:49

Kim,image position should be relative and text should be absolute and define some margin for text and text z-index should be more than image z-index.

2 votesVote for this answer Mark as a Correct answer

Chetan Sharma answered on July 20, 2017 18:52

You can use everything what Brenden has suggested and instead use this Slick Slider It is the best Slider library which is bothe responsive, accessibility friendly.

Icing on the top, Damn easy to use.

2 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.