How to achieve equally aligned text blocks with image background?

[solidsn2004]

Hi,

As the title says I need to achieve 3 text blocks in my home page that have background image (see attached image with name “What I need”).

I have created the background image with photoshop (you can find it in media with name “bg-box” or “bg-box-small”).
In my home page I have created a row and added a background color. Inside the row I have added 3 parallax tabs (I don’t know if there is a better way to achieve text with background image).

In every parallax I have added a custom css code in order to set the height and width to 330 px each (class with name custom-box-size). I am not sure if there is a way to make the dimensions fixed from the edit button of the parallax module. The problem is that the images are attached to each other and not centered.

Can you please help me resolve this? I need the parallax boxes to be equally aligned in the center of the row element as the attached image.

Thanks in advance for your time.

Attachments:

You must be logged in to view attached files.

[solidsn2004]

As you can see I have inserted at the bottom of the page the way I want it to look.
Unfortunately this doesn’t work as I have inserted a background of the 3 images together. If you change the screen size the text remains centered but “arrow” image in the back doesn’t stay behind each text as it’s merged into one big banner.

I’ve noticed that there is no way to add 3 1/3 rows inside one full row. If this was possible I guess it could work.

Any solution to this?

Thanks

[solidsn2004]

Hi guys,

I am guessing you must be really busy and you don’t reply.
I have managed to resolve this issue!

Basically what I’ve done is to create the row and inside place 3 text blocks.
Then I created custom classes in and added them inside the text blocks.

.left-col-service {
    background-image: url("image");
background-repeat: no-repeat;
background-position: center; 
width: 380px;
height: 380px;
}

.center-col-service {
    background-image: url("image");
background-repeat: no-repeat;
background-position: center; 
width: 380px;
height: 380px;
}

.right-col-service{
    background-image: url("image");
background-repeat: no-repeat;
background-position: center; 
width: 380px;
height: 380px;
}

It looks like it works fine. Only problem now is the text but I guess I’ll try and fix it myself.
If I don’t figure it out I will open a new thread.

Thanks

[Rui Guerreiro – SUPPORT]

Hi,

When adding several replies the topic goes again to the end of our support list, this way will take more time until we reply the topics above in the list.

Glad you sorted it, if necessary let us know.

-Rui

[solidsn2004]

Thanks for the heads up Rui.
I’ll keep it in mind next time. You can change status of this topic as resolved as it seems like it’s broken and I can’t change it myself.

[David Martin – Support]

Thanks, will do.
-David.