Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 9, 2017 at 4:45 pm #861975
    newki75

    Hello,
    I’ve seen that adding an opacity is possible on certain container (color secton for instance) via the interface but not on a half column background image. I’d like a black color on my image with opacity 0.5 for instance, to be able to read the text properly.
    I’ve added a class “ombre” to my column. How can I do cause my different tries don’t work :-(

    The site is in construction so please find below the access. The image I’m talking about is the sea behind the text “Nous ne pourrons pas dire que nous ne savions pas”.
    Tx for your help guys!
    Marine

    October 10, 2017 at 5:51 am #862270
    John Torvik

    Hey newki75,

    Please, go over the Dashboard link, because this is not found.

    Best regards,
    John Torvik

    October 10, 2017 at 8:02 am #862332
    newki75
    This reply has been marked as private.
    October 12, 2017 at 6:04 am #863157
    Ismael

    Hi,

    Thank you for the info.

    Please add this code in the Quick CSS field.

    .ombre:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.5);
}

    This will create a transparent overlay under the text above the background image.

    Best regards,
    Ismael

    October 12, 2017 at 9:32 am #863273
    newki75

    Perfect, tx a lot Ismaël, you can close the case :-)
    Have a nice day

    October 12, 2017 at 12:53 pm #863388
    Victoria

    Hi newki75,

    Glad we got things working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    October 18, 2017 at 6:48 pm #865877
    newki75

    Hello,

    In fact, I didn’t see but with the css you’ve sent, the opacity is applied on the image AND the left 1/2 column. I would like it only on the right column with the image.
    Tx !

    October 19, 2017 at 4:41 pm #866300
    Yigit

    Hi,

    I changed your code to following one in Quick CSS field

    .ombre:before {
    content: '';
    display: block;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    background: rgba(0,0,0,.3);
    right: 0;
    left: auto;
}
@media only screen and (max-width: 767px) {
.ombre:before {
    content: '';
    width: 100%;
    right: auto;
    left: 0;
}}

    please review your website

    Best regards,
    Yigit

    • This reply was modified 7 years ago by Yigit.
    October 19, 2017 at 5:03 pm #866317
    newki75

    Seems to be perfect, tx Yigit!

    October 19, 2017 at 6:02 pm #866362
    Jordan Shannon

    Hi,

    I’m glad you were able to get this corrected. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Add opacity on a column background image’ is closed to new replies.