Stretch Full Screen Image to take the whole screen

2 posts, 0 answers
  1. debett
    debett avatar
    30 posts
    Member since:
    Feb 2007

    Posted 04 Apr 2014 Link to this post


    I would like to use this control for a front page iamge gallery that would take the whole width of the screen. In other words, I would like to know how to stretch the image that may be smaller to truly take the full screen like here:

    Thank you!
  2. Venelin
    Venelin avatar
    352 posts

    Posted 09 Apr 2014 Link to this post

    Hello Tom,

    You can achieve the desired functionality by following this approach:

    1. Make sure that all ascendent element of RadImageGallery have explicit height (in px or %) and add this css rule


    html, body, form {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;

    2. Declare the image gallery like this:


    <telerik:RadImageGallery runat="server" ID="RadImageGallery1" ImagesFolderPath="Images"
        AllowPaging="false" DisplayAreaMode="Image" Height="100%"  CssClass="CustomImageGallery">
        <ImageAreaSettings ShowNextPrevImageButtons="false" Height="100%" />
        <ThumbnailsAreaSettings EnableZoneScroll="true" Mode="ImageSlider" Position="Top"/>
        <ToolbarSettings ShowFullScreenButton="false" ShowItemsCounter="false" ShowThumbnailsToggleButton="false" ShowSlideshowButton="false"/>

    The very important thing here is that  the image gallery itself and the image area both have height of 100%. The other setting disable some functionalists that are not needed since the toolbar is hidden.

    3. Hide the toolbar:


    .rigToolbar {
        display: none;

    4. Set the position property of the gallery so that it stays fixed at the top:


    .CustomImageGallery {
        top: 0;
        left: 0;

    5. Then you can place the dots wherever you like by using this rule:


    .rigDotList {
        bottom: 500px;
        left: 100px;

    6. To turn on the slide show, you can do the following on page load:


    function pageLoad(){

    For more information on RadImageGallery client-side api and animations please refer to our online documentation:

    1. Using ImageGallery Animation
    2. Client-Side Basics
    3. Client-Side events

    Please find attached a sample page that illustrates the approach.

    I hope this helps.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. DevCraft R3 2016 release webinar banner
Back to Top