header image size?

Before adding a header image, i downloaded the one on the Events demo. It was 2560x838 pixels. Then i added a header image of the same size. But i cant see the complete image (which is required) but just the middle of it. In this way, only some part of the image is focused/enlarged and the rest cant be seen as if it is too large: http://itef.kalemkultur.com/. But if i resize it and put a smaller image then the image startts to repeat itself. So what is the right size to see the image properly?

Hi,

It's a good size, on the demo website the header image is also not complete (depends on the screen resolution).
Anyway, try to add the following code into Events/css/override.css file or external custom css plugin:

Code: Select all

#gk-header-mod {
   background-size: cover;
}


I pasted the code override.css file (just under the line " /* Here you can put your CSS modifications using the Child Theme */
") but it didnt correct completely, i still cant see the whole image:http://itef.kalemkultur.com/. Should i resize it or should i paste the code to external custom css plugin(i couldnt find it)?

I don't see your code, if you are using Child theme, please copy the override.css file into child-theme/css directory.

You can also use i.e. this cusotm css plugin:
https://www.gavick.com/blog/adding-cust ... ress-theme

Well i pasted the code into override.css file which was on this path on FTP: /domains/itef.kalemkultur.com/httpdocs/wp-content/themes/Events/css The whole file contains these codes now:

/**
*
* -------------------------------------------
* Custom CSS changes
* -------------------------------------------
*
**/

/* Here you can put your CSS modifications using the Child Theme */
#gk-header-mod {
background-size: cover;
}

On the dashboard, appearances/editor there are many files, i dont know into which i should paste this code. Also i do not use a child theme....

what else should i do to correct the frontpage header? it still looks bad:http://itef.kalemkultur.com/

Your previouse header size was better I think and your override.css file is still empty:
http://itef.kalemkultur.com/wp-content/ ... ss?ver=4.1

YOu can also install the plugin, like JP Custom CSS activate it and add this code in Appearance -> Edit CSS.

i reuploaded the previous header and also installed the plugin. after activating it, i pasted the code on edit css. i pasted this code that u send:
#gk-header-mod {
background-size: cover;
}
but the same issue still continues and header looks still bad, why?:http://itef.kalemkultur.com/

You can try to change the code into:

Code: Select all

#gk-header-mod {
background-size: contain;
}


but then it won't be look good on mobile/tablets.
It's not possible to use one image which will be look good on all devices, you should use header image which may be cut a little in some cases. The sam situation is on the demo:
https://demo.gavick.com/wordpress/events/
The most important part of the header image should be centered.

i am wiling to try this new code and i pasted it on edit css but now it repeats the image. when i paste a 'no repeat' code (i found it on another post here in this forum), then some of the frontpage gets blank/white. here is the version without "no repeat code":http://itef.kalemkultur.com/

I can see only gray/blurred image inside your header now, and you have a lot of empty divs <div></div> which increased your header height, try to remove them.

i was making some changes then i had a prob in adding images but solved now. so here you can see the version with the last codes added: http://itef.kalemkultur.com/

i got rid of some empy divs but i kept two of them cos without any content and any div the pages ends too short and only half of it is shown...

it is still bad with the last code. i pasted it on edit css but now it repeats the image. when i paste a 'no repeat' code (i found it on another post here in this forum), then some of the frontpage gets blank/white. here is the version without "no repeat code":http://itef.kalemkultur.com/

Please set to no-repeat and use on of them background size properties (auto, cover, contain), there's no other way:
http://www.w3schools.com/cssref/css3_pr ... d-size.asp

I added these codes to CSS Editor:
div {
background: url(img_flwr.png);
background-size: 2560px 838px;
background-repeat: no-repeat;
}

#gk-header-mod {
background-size: cover;
}

Now it is better...many thanks for your help