Header background image


I'd like to make the blank white area that has the logo file into a an image instead of the #ffffff background that it is.  How do I go about doing that?  I'll probably end up making the image a .png so that I can then see the background image for the whole site.

Also, what css id or class do I edit to make this header area deeper or have more height/depth?


  • Hi,

    please make a screenshot with necessary changes and explanation because we are not sure what exactly you want to do.
  • This can be done with below css only but it won`t look good and unfortunately we don`t have anything else because it is not possible to do it exactly as you showed on screenshot above.
    #Top_bar .logo { border: 1px solid #000 !important; }
    Thanks for understanding!
  • Where in the theme's css files does it make the background white for this area?

    The default background for a div tag should be transparent so somewhere in your theme files you call this area to be #fff.  Thoughts on the css files where this might be?
  • We do not recommend to change theme`s files because you won`t be able to do theme updates in the future. All css should be overwritten in Theme options > Layout > Custom CSS & JS > Custom CSS section because whole data from this section is stored in database and after update you won`t lose it.
  • I'm going to take my time anyways and remove the theme's files.  When I upgrade, I'll just document and make sure I know what to change again for every revision.

    How do I remove the space between the very top and the top_bar/logo area?  Where is that outlined in the php or css?
  • To remove padding from top, please use below css:
    body { padding-top: 0 !important; }
  • Thanks for your help.

    One final question regarding this header and it's image.  I am currently using the stack centre header style with a header image as the header background.  As the browser width reduces for tablets and smaller screen sizes, the header image is cut on the right side.  Is there a css way to make my header image centred so that as the browser width decreases, the header image is cut off on both sides evenly, and not on the right hand side?

    Here's an image to further describe what I mean:
  • It is technically not possible because this is css background image that is not responsive. Responsive can be only img htm ltags. So in this case it is not possible at all.
Sign In or Register to comment.