Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1343591

    Hi,

    i would like to add a background image in socket with background overlay only on selected pages.

    I would like to add this effect on every socket on my webpage (only not on the start page).

    Please see the effect, that i would like to have in the private content area.

    How can i do that?

    kind regards

    Jak

    #1343672

    Hey Jak,

    Thanks for contacting us!

    Would you like to use the background I attached in private content field? If so, please create a new page with the content you would like to display as your footer and then set it as your footer in Enfold theme options > Footer tab.

    If that is not what you meant, please elaborate :)

    Best regards,
    Yigit

    #1343683

    Hi Yigit,
    in the testsite above i have a color area with background image 1.

    then i’m using an overlay image with image 2 (animated gif) in the settings of color area with an ocopacity of 0,1 and background color #ff00d8.

    Same effect i would like to use in all my sockets, but not in the startpage socket.

    Please see screenshots.

    Kind regards Jak

    • This reply was modified 2 years, 7 months ago by Jak73.
    #1343693

    Hey,

    Would you be able to create a new animated gif with your background image? There is no overlay in socket section so it would not be possible to set animated gif opacity to 0.1 and that makes socket text not readable.

    Regards,
    Yigit

    #1343694

    Yes, this is a great idea! I will try that.

    #1343700

    Hey,

    Great! Then you can set it as your socket background image in Enfold theme options > General Styling > Socket and add following code to Quick CSS to remove background image from home socket

    .home .socket_color {
      background-image: none;
    }

    Regards,
    Yigit

    #1343701

    Hi Yigit,

    I’ll try that. So much thanks for your great help!!!!

    kind regards
    Jak

    #1343704

    Hey,

    You are welcome :)

    Let us know if you have any other questions and enjoy the rest of your day!

    Best regards,
    Yigit

    #1343913

    Hi Yigit,
    which size (width and height) for the background image for the socket do you recommend.

    How can i set it up for responsive view too?

    How can i manage this?

    kind regards Jak

    #1344003

    Hi Jak,

    1920x100px should be fine for all screen sizes as socket height does not exceed 100px on mobile. Image would resize automatically however if you do not like how it looks on mobile, you could create rectangle version of the image and can replace it on mobile using custom CSS. Please feel free to reply to this thread if you need assistance with that :)

    Best regards,
    Yigit

    #1344004

    Hi Yigit,

    you gave this code, to remove the socket image from the start-page:

    .home .socket_color {
      background-image: none;
    }

    1.) Which code do ein need for the image itself?

    and which for

    2.) responsive mobile view for vertical view

    and

    3.) respoisive horizontal view, when i would like to use individual image sizes, please?

    kind regards Jak

    #1344006

    Hi Jak,

    1- You can upload your image in Enfold theme options > General Styling > Socket > Background Image. You do not need custom CSS code for that.

    2- Please use following custom CSS codes

    
    @media only screen and (max-width: 480px) { 
    .socket_color {
      background-image: url(link-to-your-image);
    }}

    3-

    
    @media only screen and (max-width: 767px) {
    .socket_color {
      background-image: url(link-to-your-image);
    }}

    Best regards,
    Yigit

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.