Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 3, 2020 at 2:59 am #1257829
    spottydog63

    Hi.

    I have added a background image to the Logo area using the following CSS:

    .container.av-logo-container {
    background: url(https://www.koawhittingham.com/wp-content/uploads/2020/11/Parenting-from-the-Heart-banner.png)!important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    }

    But the image is not responsive.

    Is there a way to make the image resize as appropriate to the screen size?

    Regards
    Iain

    November 4, 2020 at 5:16 am #1258170
    Rikard

    Hey Iain,

    Some loss of image data is inevitable when setting background to cover the containing element. I would recommend that you edit your background image and remove the text elements on the left, and the heart on the right, and make them into separate images. You can then add those new images in layout elements like 3/4 and 1/4.

    Best regards,
    Rikard

    November 4, 2020 at 6:14 am #1258175
    spottydog63

    Hmm, ok.
    So is there a better way to have a banner display at the top of every page that is responsive, instead of the way I am trying?
    There is no requirement for a logo, so I have used css to turn that off.

    Regards
    Iain

    November 9, 2020 at 4:04 pm #1259280
    Yigit

    Hi,

    Please add the code I attached in private content field to functions.php file of your child theme and then add following code to Quick CSS in Enfold theme options > General Styling

    #fw-cs .container { width: 100%; max-width: 100%; margin: 0; padding: 0; }
#fw-cs .avia-image-container-inner,
#fw-cs .avia-image-container-inner img { width: 100%; }

    If you would like us to apply the changes for you, please post FTP logins here privately as well, as editor is missing under Appearance tab we cannot do it from WP dashboard.

    Best regards,
    Yigit

    November 10, 2020 at 4:58 am #1259461
    spottydog63

    Hi Yigit.

    I have edited the functions.php file and added the CSS, but I don’t see any difference.
    FTP login credentials supplied in Private Content.

    Regards
    Iain

    November 10, 2020 at 12:09 pm #1259530
    Yigit

    Hi,

    I forgot to replace image URL in the code that is why it was empty. I replaced it, chose to display slim header in Enfold theme options > Header and then added following code to bottom of Quick CSS field

    @media only screen and (min-width: 768px){
.av-section-bottom-logo.header_color {
    display: none;
}}

    Please review your website :)

    Best regards,
    Yigit

    November 12, 2020 at 4:14 am #1260040
    spottydog63

    That’s fantastic Yigit.
    I can’t believe how much assistance you have provided.
    I am sure that this must be outside your scope.
    I very much appreciate what you have done.

    Regards
    Iain

    November 12, 2020 at 12:55 pm #1260106
    Yigit

    Hi Iain,

    You are welcome! I am always happy to help! :)

    When forums are busy, we keep customizations to minimum and when they are not, we try to help as much as we can :)

    Please let us know if you have any other questions or issues and enjoy the rest of your day!

    Best regards,
    Yigit

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Background image in Logo area not responsive’ is closed to new replies.