Replies (6)

1. 

   flobro January 27, 2018 at 2:43 am

   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

2. 

   Spiracle Themes January 27, 2018 at 4:09 am

   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

3. 

   flobro January 27, 2018 at 7:19 am

   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

4. 

   Spiracle Themes January 27, 2018 at 8:37 am

   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

5. 

   flobro January 27, 2018 at 6:16 pm

   works – thx

6. 

   flobro January 27, 2018 at 8:41 pm

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

   Thank you for help

7. 

   Spiracle Themes January 28, 2018 at 3:11 pm

   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