Header image misaligned

  • soni123

    (@soni123)


    7 years, 11 months ago

    Dear Kharis and team,

    I am sizing my header image to 500 height, yet the images are over scaling, such that the pictures are off the frame so one cannot view the complete image. Please can you provide a custom csss code that will size the image to original full width size of the picture and will not scale it in a way that the pictures some features are lost. Please find the original picture and also how it looks when uploaded as header iamge. I would like to apply it throught the site’s header images.

    http://prntscr.com/balpmq (when on website)

    http://prntscr.com/balqdc (original picture)

    Appreciate your response.

    Thanks
    Soni

Viewing 9 replies - 16 through 24 (of 24 total)
1 2
  • Kharis Sulistiyono

    (@kharisblank)

    7 years, 10 months ago

    I am afraid there is no way to do so. I thought that this code is the closest to meet your objective. 

    body:not(.home) .header-image{
  background-size: 100% !important;
  background-position: top center !important;
}
    Thread Starter soni123

    (@soni123)

    7 years, 10 months ago

    Dear Kharis,

    I was inspecting a similar sydney based website with custom headers. I have seen that the header images are all aliged to centre with parallax 0. Please can you help me what css code was used to get the header aligned

    http://allinagency.com/servicios/

    Kharis Sulistiyono

    (@kharisblank)

    7 years, 10 months ago

    Hello there,

    Replace the custom CSS code I suggested previously with the following: 

    body:not(.home) .header-image{
  background-position: top center !important;
}

    Regards,
    Kharis

    Thread Starter soni123

    (@soni123)

    7 years, 10 months ago

    I feel your css code

    body:not(.home) .header-image{
    background-size: contain !important;
    background-position: top center !important;
    }

    worked partially…but the images were not full page.

    Is it possible to add something to this to make the images full width/ cover full screen?

    Kharis Sulistiyono

    (@kharisblank)

    7 years, 10 months ago

    Please share the link to the page in question, so I can have a closer look.

    Regards,
    Kharis

    Thread Starter soni123

    (@soni123)

    7 years, 10 months ago

    This is just an exapmle how it looks after the contain css code

    http://bethebees.com/marketing

    All my pages are affected in similar way

    Kharis Sulistiyono

    (@kharisblank)

    7 years, 10 months ago

    From the following code you applied, change contain to `cover. 

    body:not(.home) .header-image {
    background-size: contain !important;
    background-position: top center !important;
}

    Regards,
    Kharis

    Thread Starter soni123

    (@soni123)

    7 years, 10 months ago

    with cover the problem persist. I think the contain thing works only we have to make it full width

    Kharis Sulistiyono

    (@kharisblank)

    7 years, 10 months ago

    Please try this code: 

    body:not(.home) .header-image {
    background-size: 100% !important;
    background-position: top center !important;
}

    Regards,
    Kharis

Viewing 9 replies - 16 through 24 (of 24 total)
1 2
  • The topic ‘Header image misaligned’ is closed to new replies.