Changing appearance of header image in Cerauno

  • Unknown's avatar
    knwachteraabb · Member ·

    I could also use some help resizing how the header image appears in Cerauno. I thought that it would automatically use the selected image as is even though recommended size is 1400 by 200. The image that I have is 1500 x 500. What I need is for the image to go across the entire page but to be a tad shorter without cropping the image. I think that I figured out how to have the image run across the full width (regardless of pc, tablet, mobile) and possibly how to change the appearance height but when I do it, it crops the image rather than resizing (stupid marketing people are upset if I crop off the camera guy’s head). Below is what I’ve done with the CSS … it probably makes little sense and contains lines that I don’t need but I’ve gotten it to do most of what I want. Nothing I’ve tried for this last problem seems to work though.

    Thanks!

    .site-main {
    width: 100%;
    }

    .site-branding {
    padding: 12.5% 1.5em;
    }

    .site-branding:before {
    opacity: 1;
    }

    .site-main {
    width: 75%;
    }

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, I’ve looked at your site and the header image looks good (the camera man is perhaps only losing a few hairs). :)

    I see you have used an image that is 1400 x 432 pixels. Has this accomplished what you are wanting? If not, my suggestion would be to redo your header image and push the text/logo you have overlaid up to where it is inline with the top of the cameraman’s head. You can then use the following CSS and move it down a little by reducing the 50% value. If you want to try the CSS first, add it to your custom CSS and then adjust the 50% down to perhaps 40 or 30 to see the effect. 

    .site-branding::before {
    background-position: center 50%;
}

    Alternately, to keep the existing image as is, add the above and set it to 30% and then in your custom site-branding rule, change the 12.5% top/bottom padding to 13.5%. You could also separate the top and bottom padding on the image and take away from the top and add to the bottom to get the text more centered vertically.

    See what you think and and let me know.

  • Unknown's avatar
    knwachteraabb · Member ·

    Thanks. I tried your second suggestion but the marketing folks did not like it. So, I told them that they needed to get a more narrow (tall?) image from the designer.

    Would have been easier to do that at the start but at least I learned a bit.

    Thanks again!

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘Changing appearance of header image in Cerauno’ is closed to new replies.