how do i set header image to fit all screen sizes ?

  • Unknown's avatar
    rucquoi · Member ·

    header map’s being chopped off
    a blog all about this map
    not much use w/o it

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

  • Unknown's avatar
    hallluke · Member ·

    Using this will go some of the way to sorting out the problem:

    #masthead {
  background-size: cover;
}
  • Unknown's avatar
    rucquoi · Member ·

    that some kinda code, hall
    just how do i apply it ?
    ~ jim

  • Unknown's avatar
    hallluke · Member ·

    Hi Jim,

    If you go to Appearance > Customize > CSS and paste it into the text box you can preview it live, if you like it just hit “Save” and it will go live to all your site visitors.

  • Unknown's avatar
    rucquoi · Member ·

    thanks hall
    map changes dimensions on imac screen
    hopefully will do same on mobile

    yes, definitely better now
    tho still not exactly full-map
    as i adjust from lwr rt-hand cor

    big improvement just the same
    thanks hall
    ~ jim

  • Unknown's avatar
    rucquoi · Member ·

    sorry hall, there’s more happening here
    something to do w/ my template choice i think

    yes, w/ your code map dimensions do change w/ page size
    but as lower txt & upper map-jpg are connected

    when i pull down the page to read txt
    map header pix chops, looses its dimensions

    got something more to add for me ?
    hopefully w/o changing the template

    ~ jim

  • Unknown's avatar
    hallluke · Member ·

    Hi Jim,

    I’m not really sure what you’re asking for now. If the map is that important it would be a good idea to include the image on it’s own page, rather than as part of the header, that way it would resize perfectly regardless of what device is used.

  • The topic ‘how do i set header image to fit all screen sizes ?’ is closed to new replies.