Banner image with text overlay

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

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:

 

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

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

That's working now for me. Thanks Sabrie for all your assistance and valuable time. You are awesome.  Thanks again.