Author Posts

[flobro]

I don’t want to use the dark overlay feature as it makes the image to depressive, yet I need it for the text. I somehow fixed it by adding an area to the image but it does not stay with the text when scrolling.

How can I get the text area dark and the rest light? My CSS is not good enough to code it at the moment.

http://www.retreat.gr

[Spiracle Themes]

Hello Flobro,

First of all, remove that black rectangle from the background image. Here are few CSS line codes that can help

.slide-bg-text{
display: block !important;
background: rgba(0,0,0,0.6);
padding-bottom: 60px;
width: 80%;
margin: 20% auto;
}

@media only screen and (max-width: 480px) {
.slide-bg-text{
margin: 40% auto;
}
}

@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1.5) {
.slide-bg-text{
margin: 50% auto;
}
}

The bold ones are ie width and margin you need to adjust according to your website need.

Copy the above CSS code and paste down in Appearance -> Customize -> Additional CSS

Let me know if this works for you

Best Regards

[flobro]

Thank you for the fast response!

Works great on the computer – screws up responsive functionality – take a look I inserted the code – especially on phone it looks bad

[Spiracle Themes]

Hi Flobro,

Add width 100% in responsive CSS ie

@media only screen and (max-width: 480px) {
.slide-bg-text{
width: 100%;
margin: 40% auto;
}
}

@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1.5) {
.slide-bg-text{
width: 100%;
margin: 50% auto;
}
}

The homepage text is a little bit down so I suggest you to write down the margin 20% instead of 40%. ie (margin: 20% auto;)

Best Regards

[flobro]

works – thx

[flobro]

one more: can it also be fixed for phone in landscape?

Thank you for help

[Spiracle Themes]

Hi Flobro,

Try this CSS code, add this code in the same place

@media only screen and (min-device-width: 320px)
and (max-device-width : 700px) and (orientation : landscape) {
.slide-bg-text{
width: 100%;
margin: 100px auto;
}

#parallax-bg #slider-inner{
height: 600px;
}
}

Best Regards

[Author]

Posts