Issue setting size for the hero home image- Business Identity Theme

  • Unknown's avatar
    onyxcomms · Member ·

    Hi guys,
    Hope someone can help :)
    Have been building a site using the Business Identity theme and am having some issues sizing up the graphic for the home ‘hero’ image.
    The current image is 1024 x 300 and its doing some weird scaling thing which I can’t seem to fathom quite what’s going on…..
    New at this thing, any help appreciated
    Thanks

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, I just checked your site and the image seems to be resizing correctly on my computer when I narrow and widen my browser window, and when I check it on my simulator. I can’t get to the site on my phone since it is set to private right now.

    On the Business Identity Support page, which talks about how to set up the theme, the recommended size for the header image is 1440px x 422px.

    Can you explain a bit further what you mean my “… doing some weird scaling thing…” ?

  • Unknown's avatar
    onyxcomms · Member ·

    Hi there,
    Thanks for your response :)
    Its the home page ‘cityscape’ image I’m referring to – I’ve just scaled up my monitor and it still seems to only be displaying 2/3 of the image, I’ve allowed sufficient space for the copy and the image in my artwork file and I’ve tried various dimensions in terms of width – the one shown is set to 1024 wide and its appearing much larger when its uploaded which is messing with the imagery and design. The header and footer are much wider and set at 1440.
    Have checked the specs a number of times but can’t seem to sort this issue :(

  • Unknown's avatar
    thesacredpath · Member ·

    Ah, thanks for the clarification. You can give the following a try and see what you think. As you will see, with the nature of your image, the text gets lost as you narrow your browser window, which is a different issue. This though will get the full image visible. 

    #hero {
	background-size: contain;
	background-color: rgba(0, 0, 0, 0);
	padding-bottom: 0 !important;
}

    On the text visibility issue, I’m not sure what to suggest other than adding a transparent color to one of the parent elements. Here are two possibilities to try. The first adds a transparent white to the content div 

    #hero .hero-content {
	background-color: rgba(255, 255, 255, 0.7);
}

    and this one to the overall parent div. 

    #hero .hero-wrapper {
	background-color: rgba(255, 255, 255, 0.7);
}
#hero {
	padding-top: 114px !important;
}
  • Unknown's avatar
    onyxcomms · Member ·

    Thank you, that’s certainly helped. Think I’ll amend the header to make things easier.
    Thanks very much for your help :)

  • Unknown's avatar
    thesacredpath · Member ·

    Awesome, and you are welcome!

  • The topic ‘Issue setting size for the hero home image- Business Identity Theme’ is closed to new replies.