Fontfolio Theme – add image to header / masthead

  • Unknown's avatar
    kerin2014 · Member ·

    hi everyone
    there is a big blank space on the top right header area of my blog
    i would like to add another image there, so that it fits neatly
    to the right of the parrot logo and under the menu bar
    but i am not sure how to do this. any advice would be most appreciated. i also want to make sure this does not ruin the site when displayed on a phone.

    thanks

    ps i have the css upgrade

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

  • Unknown's avatar
    hallluke · Member ·

    Here’s one way of trying adding an image (I’m using the same images as your logo on the left as an example). It should move across for smalled devices but I think the best option is just to hide it for mobiles where there isn’t enough space for two images side by side. In the code below you can change the max-width to suit the width of the image you use.

    #masthead {
  background:#fff url("http://needlepointlandstore.files.wordpress.com/2014/09/fontfolio-header.png") no-repeat center right;
}

@media screen and (max-width:560px) {
  #masthead {
    background-image:none;
  }
}
  • Unknown's avatar
    kerin2014 · Member ·

    thx this worked great when i played around with the size of the image

    it would be nice to be able to add another separate background image positioned at center center

    is there a way to do this? i would like use the entire masthead area not just the left and right sides of it

    but it looks like either css or this theme only allows 1 background url at at time

    if you put in two it takes the first one and ignore the second

    such that the 2nd image as you see in the pseudo code below is ignored

    #masthead {
    background:#fff url(“http://…”) no-repeat center center; // 1st image
    background:#fff url(“http://…”) no-repeat center right; // 2nd image
    }

    please advise if there is some css guru trick to achieve my objective

  • Unknown's avatar
    thesacredpath · Member ·

    When you have two background declarations within a single CSS rule, the browser will use the first unless the image for that one is not available for some reason and then it will use the second.

    The problem I see with using a third image is that there will be a collision of images and one or two of them is going to end up being hidden behind another.

    The image you have on the right currently, says Sign up to Erin’s blog! but that image does not link to anything and I think most visitors will expect that image to take them to some sort of signup form, so this could cause some confusion for your visitors and there isn’t a way of linking an image in CSS because CSS will not take HTML.

    I would also probably suggest setting the @media rule for the right image to around 600px since that is when the left and right images start to overlap.

    There is a trick where we can relocate a text widget up and into the header area, but the sidebar does not show on main page in Portfolio blog page (your front page) so that isn’t an option in this case.

  • Unknown's avatar
    hallluke · Member ·

    You can only assign one background image per element. Why don’t you just combine the two images into one and use that?

  • Unknown's avatar
    thesacredpath · Member ·

    The image on the left, your logo, could possibly be put into the site title div as a background and then another image put into #masthead centered, but as I said, things could/will likely overlap.

  • Unknown's avatar
    thesacredpath · Member ·

    I see @hallluke was faster typing than I was. :)

  • Unknown's avatar
    kerin2014 · Member ·

    You can only assign one background image per element. Why don’t you just combine the two images into one and use that?

    yes for some reason the background “double” image has to be 400 x 200 px or it overlaps the menu or goes to far to the left. This is odd, because according to my analysis there ought to be more room. I am not a CSS maven, but I inspected this theme carefully, and came up with the following conclusion about the header layout of this theme. Nevertheless my conclusion that you could have a wider banner style image turned out to be wrong. I obviously need to understand CSS better, but thank you all for your input.

    head-#masthead.site-header 1122px x 241 px // id selector for entire box that contains menu, logo, title, site description
    div .header-wrapper 1122px x 39px // box where only the menu is
    div .site-branding 505px x 175px // class selector – this layout block only contains the title, desc, logo
    background 617px x 241 px // this is my estimate using subtraction for how big the bkground should be

    it is puzzling to me intellectually why a larger image than 400 x 200px does not fit

    also it is frustrating not to be able to push the image “down” despite consulting CSS sources such that it is properly centering vertically in the masthead area

  • Unknown's avatar
    hallluke · Member ·

    You’re using a wider image than my example catered for. I recommend increasing the max-width value so that both images can fit on the screen side-by side, 650px should do it. That way you can pick a narrower or wider image and always ensure the images do not overlap.

  • Unknown's avatar
    kerin2014 · Member ·

    thank you all. getting the hang of it now!

  • The topic ‘Fontfolio Theme – add image to header / masthead’ is closed to new replies.