InfoWay theme header image

qsarchives · Member · Feb 23, 2016 at 12:11 am
Copy link

Add topic to favorites
Hi,

Does anyone know how I can reduce the height of the space for the header image in the InfoWay theme? I’d like to keep width to 950, and change the height to say 150.

Thanks for your help,
D

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Feb 23, 2016 at 3:37 am
Copy link
Hi, the site you reference is using Imbalance 2, so I assume you are talking about this site: http://grkblog.archives.qld.gov.au, which is also associated with your username.

In order to keep from distorting the image, when we change the height, the width will also change. You can try the following CSS.
```
.header .logo {
    text-align: center;
}
.header .logo img {
    max-height: 150px;
}
```
And this would be the CSS that changes the height but keeps the width as it is.
```
.header .logo {
    text-align: center;
}
.header .logo img {
    max-height: 150px;
    width: 100%;
}
```
You could make a new header image at 950px x 150px and then insert it with CSS like this. Keep the existing header image in place though and we hide it with the CSS.
```
.header .logo img {
    visibility: hidden;
}
.header .logo a {
    display: block;
    background: url("URL_OF_IMAGE") no-repeat scroll center top;
    background-size: auto 150px;
    max-height: 150px;
}
```
Upload the image to your media library, get the URL of that image and replace URL_OF_IMAGE between the quote marks with the URL of your new image.
qsarchives · Member · Feb 26, 2016 at 4:33 am
Copy link
That worked a treat.
Thanks again for your help.
thesacredpath · Member · Feb 26, 2016 at 4:34 am
Copy link
You are welcome.

No items found.