Changing position of transparent text image on header section

Support
#1

Hi,
I am trying to add a title to my header section by using a text image with a transparent background, but cannot figure out how to align fix the image position so that it does not overlap the person in the background image on desktop or mobile - basically - anywhere in the upper left corner would be ideal.

Can you show me how to best do this?

bit.ly/yourwildheart

#2

Hi there,

Thank you for reaching out to us. Correct me if I am wrong, you’re trying to display the text on top of the background image? I see there’s a white space above your background image you want to eliminate? If yes then give your section that has the text a class absolute-position and then add the following code in the Theme Options > CSS:

.absolute-position {
    position: absolute;
    width: 100%;
}

Let us know how this goes!

#3

I"m not sure what you mean by the white space?

#4

It’s actually a transparent background png with text that overlays the background image. I want the text image to appear in the upper left cover and positioned so that it won’t overlay the woman in the red dress on the background image on desktop or mobile.

i tried what was suggested above but all it seemed to do was cut off the bottom of the background image and the text overlay image.

#5

Hi @jeanetteleblanc,

It seems that we misunderstood the question. I checked both the websites that are in your licenses page and could not find a transparent file that you are talking about.

Would you please kindly give us exactly which site you are talking about and a screenshot of the problem that you are experiencing?

Please also consider that this is a customization request and is outside of our support scope, but if it is something that we can handle within a reasonable timeframe we will suggest you proper solutions.

Having said that I also suggest that you consider using the Revolution Slider plugin as it has many options for such cases.

Thank you.

#6

Sure, so sorry for the lack of information. The URL was in the original post - it’s

Basically all i wanted to know is if there is a way to push the text up so that it won’t lie over the person in the header image - i didn’t know this would fall under customization as i felt sure i had seen people asking simliar things in the past, I just couldn’t seem to find them in the forum

desktop (laptop)

mobile

#7

Hey There,

Thanks for updating in! I am another staff checking in. To resolve your issue, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media(max-width: 979px){
  #x-section-2 .x-column.x-sm.mtn.x-1-1 {
    padding: 30px 0px 370px !important;
  }
}

And you should have something like this:

Please let us know how it goes.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.