Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #488068

    I am having a header banner made for this area, and need the correct dimensions so as not to overlay other elements of the header.

    Other selections:
    Header custom height 300 px
    Header style: default
    Header title and breadcrumbs: Hide both
    Image position Top Center
    Menu: Logo left, menu below
    Social profiles: Header (two selected; need to add a third but custom addition instructions are beyond my skill level)

    Thanks for any help you can give me.

    • This topic was modified 9 years, 3 months ago by cmerzut.
    #488173

    Hey cmerzut,

    I’m not sure exactly what you mean but the recommended dimensions for the logo is 340px * 156px, could you please provide us with a screenshot of exactly what area you mean if I’ve misunderstood you?

    Thanks,
    Rikard

    #488222

    Thanks for your reply. Sorry I wasn’t clear. In the Enfold Theme Options/General Styling, there is a field titled Custom Background Image where you can upload an image to the ‘Logo Area’ (per the description)
    The image I have there now is 1700 x 588 in the large size, which is what I select before clicking the Use Image Button. However, it doesn’t fill the area as it used to. This is what it looks like now:

    Current size of header BG image vs header area

    I need to be able to tell my graphic artist the proper dimensions to more fully fill the black space; or if the dimension I have is correct, I need to know how to make it show up in the larger size. Before I cropped the bottom to prevent it from overlapping the menu area, it filled about 3/4 of the horizontal area, leaving the social profiles area on the right and an equally-sized black area on the left. I didn’t scale it – I cropped it – so the horizontal dimension (1700) is the same as it used to be.

    It occurs to me that the Quick CSS contents may be responsible for this, but I’m afraid I’m not knowledgeable enough to determine that. The code that’s there currently is:
    .content, .sidebar {
    padding-top: 20px;
    padding-bottom: 20px;
    box-sizing: content-box;
    min-height: 1px;
    z-index: 1;
    }
    .avia-testimonial-wrapper {
    display: table;
    margin: 0px 0px;
    clear: both;
    }
    body .column-top-margin {
    margin-top: 20px;
    }
    .avia_textblock {
    clear: both;
    }
    .avia-google-map-container {
    margin-top: 20px;
    margin-bottom: -10px;
    }
    .av-special-heading {
    margin-top: 10px;
    }
    .av_promobox {
    margin: 20px 0;
    }
    div .avia-table {
    margin: 5px 0;
    }
    .phone-info {
    margin: auto !important;
    font-weight: bold;
    line-height: 40px;
    font-size: 36px;
    padding: 0px 0px 10px 0px;
    }
    @media only screen and (max-width: 767px) {
    .responsive .logo a, .responsive .logo img {
    max-width: 88%;
    height: auto !important;
    margin-left: 0!important;
    margin-top: 5px!important;
    }}
    @media only screen and (max-width: 767px) {
    .phone-info {
    margin: auto !important;
    font-weight: bold;
    line-height: 22px;
    font-size: 18px;
    }}
    p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 {
    margin-top: .5em;
    }
    .avia-icon-list li {
    padding: 0 0 10px 0;
    }
    .avia-icon-list-container {
    margin: 0px 0;
    }
    .avia-section {
    clear: both;
    width: 100%;
    float: left;
    min-height: 0px;
    position: static;
    }
    .tabcontainer {
    margin: 10px 0;
    position: relative;
    width: 100%;
    clear: both;
    overflow: hidden;
    background: transparent;
    }
    media=”all”
    ul.disc, .entry-content-wrapper ul {
    list-style: disc outside;
    }
    ul {
    list-style: none outside;
    margin-left: 7px;
    }
    ul, ol {
    margin-bottom: 0px;
    }
    ol, ul {
    list-style: none;
    }
    h2 {
    font-size: 28px;
    line-height: 1.1em;
    margin-bottom: 0px;
    }
    .av-countdown-timer {
    clear: both;
    position: relative;
    opacity: 0;
    margin: 5px 0;
    }

    .widget {
    clear: both;
    position: relative;
    padding: 10px 0 10px 0;
    float: none;
    }
    .main_color blockquote {border-color: #e1e1e1;}
    .main_color strong {color: #666666;}

    @media only screen and (max-width: 767px) { .responsive #top .header_bg {
    background-position: 70% 50%;
    }}

    Again, thanks for your response and any help you can give me with these further details.

    • This reply was modified 9 years, 3 months ago by cmerzut.
    #488474

    Hi!

    It would really help to have temporary access to your website so we can see if there are any conflicting settings in your theme options.

    Best regards,
    Dake

    #488534

    I can arrange that. I see I can’t reply to your email. Posting access info to private content area with much trepidation.

    Apologies for delay in answers. Time zone difference, I assume. It is late on a Sunday night for me and I’ll no doubt not see your further answer before morning.

    • This reply was modified 9 years, 3 months ago by cmerzut.
    #488877

    Hi!

    use this code, to control background image size:

    .header_color .header_bg {
    background-size: 100%;
    }
    

    Adjust as needed.

    Regards,
    Andy

    #488967

    Thanks so much! Worked perfectly.

    #488976

    Hey!

    Glad to know we could help :)

    Please let us know if you ever need help in the future.

    Regards,
    Dake

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Custom BG Image for Logo Area Dimensions?’ is closed to new replies.