header II bg image height

I am switching from penguin mail to template mo and try to get the header II image smaller (height of something of 570px) I created a background image in this size but it gets always full height. I tried this:

Code: Select all

.custom.gk-header2 {
    background: url("../images/header2_bg.jpg") no-repeat scroll center center / cover rgba(0, 0, 0, 0);
    padding: 200px 120px;
    text-align: center;
}

but then the text display is now too high and I don't know how to position the text in the last third of the picture.

Your help is really appreciated.

Could You please post an url to your site?

oups!

it's not online and you can find it here: http://ars-dicendi.de/drsandraeversberg/

in the menu item which you can find here: http://ars-dicendi.de/drsandraeversberg/index.php/podcasts-video-blog-sandra-eversberg

I have the same issue and I think the round image (now 250 x 250 px) should be fine in 200 x 200 (which also expand always to the bigger size) and it would be great to have it a little smaller.

Thanks for your help!

Is the css change available on your site?

I am sorry - I don't understand your question.

css is not compressed and I have access via ftp. Is that the answer to your question?

You have posted some css change but I don't see it on your site.

Please have a look at: http://ars-dicendi.de/drsandraeversberg/index.php/joomla

Normally the image should have a height of : 574px

Where can I change the min-height of more than 700 px

Thanks for your advice

When using:

Code: Select all

 .custom.gk-header2 {
    padding: 300px 120px;
    text-align: center;
}

instead of 300px only 200px the image has original size but the font is now too high and I don't find a way to get the font lower.

I'm having trouble understanding whats the problem.
1. The background image is in "cover" mode - you cant set its height any other way than setting:

Code: Select all

.custom.gk-header2


height (directly or indirectly).
2. If you would like to mote text a little bit lower, increase top padding and reduce bottom:

Code: Select all

.custom.gk-header2 {padding: 350px 120px 250px;}


this is not what I experience:

when I increase padding-top like you said the whole background image increases it's size immediately.

using max-height: 574px; has no effect at all size of image stays as big as it is.

The problem is I can't put important message above the fold as long as the image is that big.

So reduce top padding and increase bottom. Or reduce both. If the image is in cover mode it will fill entire container. You make container bigger with paddings.

Finally I got it! Thanks for your patience.

I'm glad you have figured it out