Making header image responsive — some simple css help:

Community Forums Forums Design Tips and Tricks Making header image responsive — some simple css help:

This topic is: resolved

This topic contains 3 replies, has 2 voices, and was last updated by  jgk 1 year, 10 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #72927



    I’m trying to make the header image responsive (I’m using both image and text). The only issue is when I shrink the width of the page to less than 960px, I can get the background image to go to the bottom of the div and center.

    I’m sure this is an easy fix but I’m spinning my wheels.

    Thanks for any help!



    never mind, got it.


    Jamie Lynch

    I am having the same issue. I’m using Executive Pro for the 1st time (html 5). I’ve used Executive Child Theme for years and this new Executive Pro version has a HUGE learning curve. I’ve had to add my header image in the .home-top section. If you find the answer to you question, please be kind and share it with me.




    Hi Jamie,

    For each of the “break points” on your media queries in the css (which occur at the bottom of the CSS) you’re going to want to change the below:

    .home-top {
    background-image: url(images/home-top.jpg);

    to other images that are the proper size.

    If you look at the code for some of the elements on the page that are responsive in developer tools you’ll see the media queries applying to the elements when you shrink and grow the width of the browser window. Hope this helps.


Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.