Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #1907166
Header background image
Closed

Comments

  • onyke started the conversation

    Hello,

    I would like the image of my header background to adapt to the resolution. I want to achieve the effect that the picture always had the original width and height. I do not know how to describe it exactly, so I will post the screen which effect I want to get. 

    Is it possible to set it directly in the admin panel or do it need css editions?


  •  2,700
    PenciDesign replied

    Hi,

    As you can see because the width on desktop & mobile is different, so, if you want to do that, you need to change the height of header on mobile to make it has the same ratio. Please add more this code to Customize > Custom CSS to change it on mobile:

    @media only screen and (max-width: 768px){
    #header .inner-header .container{ padding: 20px 0; }
    }
    

    Change value 20 to value as you want on mobile.


    Best Regards,

    PenciDesign

  • onyke replied

    Its looks better but its possible to get effect like this?: 


    works.gif

  •  2,700
    PenciDesign replied

    Hi,

    The header contain much things inside it - That's not image only. So, you can't do that.


    Best Regards,

    PenciDesign

  • onyke replied

    OK i already do that by using this code:

    https://stackoverflow.com/a/14446663/8473734

    #header .inner-header {
       height: 0;
        padding: 0; /* remove any pre-existing padding, just in case */
        padding-bottom: 40%;
        background-image: url(img.jpg);
        background-position: center center;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    I add this code to Custom CSS and its working

  •  2,700
    PenciDesign replied

    Hi,

    It can work with your case, but maybe if you change the settings - that custom css code can be make your header broken.. So, let's attention to thatsmile.png


    Best Regards,

    PenciDesign