How to create header as shown in Trelify demo without slides

Travelify
1

I am new to the theme Travelify. This seems to be a very nice theme. I like many aspects of it. It is very mobile friendly.
I want to make some modifications to Travelify. I want to create a header as shown in Traveliy demo but I only want 1 image with text in transparent background box. I want to provide a different image and text for each page; therefore I do not want to use Slider.
I have tried several things, but for some reason I cannot get my code to work.
Here is what I have. Note I have used some w3 school CSS.
CODE:
<style>
.w3-container{padding:0.01em 16px}
.w3-00802b-background {background-color: #00802b}
.w3-00802b {color: #00802b}
.w3-display-container{position:relative}
.w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
.w3-light-grey,.w3-hover-light-grey:hover{color:#000!important;background-color:#f1f1f1!important}
</style>
<div class=“display-container” style=“margin-bottom:50px”>

<div class=“w3-display-bottomleft container w3-pale-green w3-hover-pale-green w3-hide-small”
style=“bottom:10%;opacity:0.7;width:70%”>
<h2><b>4 Good Reasons<br>For Having A Comfortable Mattress</b></h2>
</div>
</div>

The Image is at the top, but the opaque text box keeps floating below the image. I want the opaque text box to appear on top of the image (mattress picture) http://bedroomideas.findoutmorequickly.com/trying-w3-travel-template-for-picture-text

Any help would be much appreciated.

2

Hi @moses,

I hope you are well today and thank you for your question.

The Image is at the top, but the opaque text box keeps floating below the image. I want the opaque text box to appear on top of the image (mattress picture) http://bedroomideas.findoutmorequickly.com/trying-w3-travel-template-for-picture-text

It is displaying on the image on your shared page as shown in the attached screenshot.

Please advise.

Best Regards,
Movin

3

Sorry to confuse you. I kept working on opaque box display after I sent the email.

Thanks everything is working as I expected now.

Here is the code I went with.
<style>
.w3-page-header-container{padding: 10px 10px 10px 20px}
.pageheaderimagecontainer {
padding: 10 10 10 40px;
margin: 2% auto auto 7%;
max-width: 978px;
}
.w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
.w3-light-grey,.w3-hover-light-grey:hover{color:#000!important;background-color:#f1f1f1!important}
@media (max-width:600px){.w3-hide-small{display:none!important}}
.w3-display-bottomleft{position:absolute;left:0;bottom:0}

4

Here is all of the code I used.
<style>
.w3-page-header-container{padding: 10px 10px 10px 20px}
.pageheaderimagecontainer {
padding: 10 10 10 40px;
margin: 2% auto auto 7%;
max-width: 978px;
}
.w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
.w3-light-grey,.w3-hover-light-grey:hover{color:#000!important;background-color:#f1f1f1!important}
@media (max-width:600px){.w3-hide-small{display:none!important}}
.w3-display-bottomleft{position:absolute;left:0;bottom:0}

</style>

<div class=“w3-page-header-container” >

<div class=“w3-display-bottomleft pageheaderimagecontainer w3-pale-green w3-hover-pale-green w3-hide-small”
style=“margin-bottom:30px; bottom:5%;opacity:0.7;width:70%”>
<h2 style: margin-left: 5%><b>4 Good Reasons #2<br>For Having A Comfortable Mattress</b></span></h2>
</div>
</div>

5

You are most welcome here :slight_smile: