Okay
  Public Ticket #1249661
header image not resizing
Closed

Comments

  • smithbyrne started the conversation

    no matter what image i upload to the header image, even if i make them smaller, they are always zoomed in very large , how do i get it the size i made it at ?

    http://learninghouse.ie/

  •  68
    MeanThemes replied

    Hello,

    I have attached the image for the header. Replace your existing header image with attached image. Let me know if you face any issue.

    Thanks.

    Attached files:  img.jpg


    Interested in what we have in store for the rest of 2017? Sign up to our Newsletter

  • smithbyrne replied

    hello, 
    thanks for your reply, but that actually makes it worse 
    I have now uploaded your image, see for yourself 
    Thanks

    http://learninghouse.ie/

  •  68
    MeanThemes replied

    Hello,

    Please log in into Admin (wp-admin) panel.

    Go to Appearance -> Customize -> Custom CSS Block and paste below code 

    .header {
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
    }

    After that Save and publish. This will make image in center with proper look. Check below screen shot :

    https://www.screencast.com/t/PSV8vuABcvH

    Please let us know if you face any other issues.

    Thanks.


    Interested in what we have in store for the rest of 2017? Sign up to our Newsletter

  • smithbyrne replied

    thank you, and how would i get rid of the extra white on top and below the image ?

  •  68
    MeanThemes replied

    Hello,

    Go to Appearance -> Customize -> Custom CSS Block and place below CSS code. Remove the one which we have given you earlier (In our last reply)

    .header {
        background-repeat: no-repeat;
         background-position: 50% 15%;
        background-size: 70%;
    }
    .header:before{
        content:"";
        display:block;
        padding-top:10%;
    }

    .header .site-logo {
        height: auto;
    }

    @media (max-width:768px){
       .header {
          background-size: 80%; 
          background-position: 50%;
       }
       .header .site-logo{
           padding:30px ;
       } 
    }

    @media (max-width:480px){
       .header {
          background-size: 120%; 
          background-position: 50%;
       }
       .header .site-logo{
           padding:30px ;
       } 
    }

    Thanks


    Interested in what we have in store for the rest of 2017? Sign up to our Newsletter