+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Banner image with text overlay

Banner image with text overlay

5 posts, 1 answered
  1. Anuj
    Anuj avatar
    6 posts
    Registered:
    04 Dec 2014
    31 Mar 2015
    Link to this post

    How can we use the same image with different text on different pages of a website?

    Please see the attachment. Please let me know if any other detail is required? Thanks in advance.

     

    Sitefinity Version - 7.0

  2. Sabrie Nedzhip
    Sabrie Nedzhip avatar
    534 posts
    Registered:
    02 Dec 2016
    03 Apr 2015
    Link to this post
    Hi Anuj,

    What I can suggest is to set the desired image as a background image for the content block using css. This way you will be able to use the same image with different text.

    The name of the css class by default is sfContentBlock, but you can modify it under the Advanced settings of the widget, so that you can apply different css styles for each content block on the same page.

    Then you can simply drag the css widget on the page and add your custom css to set the background of the content block to the specified. Here is a sample which you can use:

     
    .sfContentBlock
    {
         background-image: url("http://yourdomain.com/images/default-source/default-album/imagetitle.jpg");
         background-repeat: no-repeat;
    }

    Please refer to the attached screenshot demonstrating the results.

    Regards,
    Sabrie Nedzhip
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  3. Anuj
    Anuj avatar
    6 posts
    Registered:
    04 Dec 2014
    06 Apr 2015
    Link to this post

    Thanks Sabrie for your help. That's exactly what i am needed. As  i very new to Sitefinity, i have some more questions on this:

    1. Do i need to access the code base of the website to make this happen or can i do that from Sitefinity GUI end only assuming that i have admin role?

    2. Please see the attachment what i am getting when clicking on Edit -- >Advance of Content Block. How can i identify what CSS is being used where i can make the desired changes?

     

    Sorry for poor questions. Thanks again

  4. Sabrie Nedzhip
    Sabrie Nedzhip avatar
    534 posts
    Registered:
    02 Dec 2016
    09 Apr 2015
    Link to this post
    Hello Anuj,

    You can perform this from the Sitefinity backend. I have recorded a short video for your convenience demonstrating the steps I took on my side to achieve this.

    As you can see from the video I have an image which I have uploaded to Sitefinity under Content -> Images. I get the url of the image and then I click on the Pages tab in order to open the page in edit mode.

    After that I drag the CSS widget on the page and paste the css for setting the background image of the content block using the url of the image and save the changes. Then I open the Content block for edit and enter the desired text.

    You may refer to the following article for more details on how to use the CSS widget in Sitefinity.

    Regarding your second question, you can find the css class in the CssClass field in the advanced settings of the content block widget. By default it is set to sfContentBlock. You can use the default css class and if you would like to have your custom css class you can enter in the CssClass field the desired class name and save the changes.

    Regards,
    Sabrie Nedzhip
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
    Answered
  5. Anuj
    Anuj avatar
    6 posts
    Registered:
    04 Dec 2014
    10 Apr 2015
    Link to this post
    That's working now for me. Thanks Sabrie for all your assistance and valuable time. You are awesome.  Thanks again.
5 posts, 1 answered