Can I put a text box and line over a full size image?

Support
#1

I’d like to set up the first row similar to what I’ve done at www.thumbprintbooks.ca (the full-screen image + text THUMBPRINT BOOKS with line and subhead). I can’t figure out how to do that. The only way I could get a full-screen image was by adding an Image element, but then I can’t put the text and line over it.

Also is there a way to position the text “box” and line with % in from top and left so that they will resize on different devices and show in the same position?

Thanks.

#2

Hi There,

Thanks for writing in!

You can do this using background image in section, and in side section you can add any kind for heading text or line.

Regarding the padding you can use percent value for the top bottom padding in the cornerstone.

Hope this is clear to you!

Thanks

#3

I’m using a background image for the section. I’ve added headlines (with background) and the line. Unless the line is 100% wide, there is a gap between the two boxes for text where the line doesn’t extend to the edge of the boxes. Is there a way to add a dark background to the line so that it can be shortened but not have a gap between the two text boxes?

#4

Hi There,

Please add the line as part of the second text instead.

<hr class="head-line x-line">

Then add this to Theme Options > CSS

.head-line {
	width: 50%;
	border-style: solid;
    border-color: #b7985b;
    margin: 0px auto 12px auto !important;
    border-top-width: 1.5px;
}

Then set the top padding of the second text element to 0 to balance out space between first and second text.

Hope it helps,
Cheers!

#5

Thank you. Your support is terrific!

One last refinement. I’d like the line to look like it is centered between the to headlines. Is there a way to add space between it and the headline above it?

#6

Hi There,

Can you please update the css with this.

.head-line {
	width: 50%;
	border-style: solid;
    border-color: #b7985b;
    margin: 12px auto 12px auto !important;
    border-top-width: 1.5px;
}

Let us know how it works.

#7

Perfect. Thanks!

#8

You are most welcome!

#9

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