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.
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
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
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
works – thx
one more: can it also be fixed for phone in landscape?
Thank you for help
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