to Teitbite please-Change the colored background to an image

Rate this topic: Evaluations: 2, 3.50 on the average.Evaluations: 2, 3.50 on the average.Evaluations: 2, 3.50 on the average.Evaluations: 2, 3.50 on the average.Evaluations: 2, 3.50 on the average.Evaluations: 2, 3.50 on the average.3.50 out of 6 based on 2 vote(s)
GK User
Tue Nov 29, 2016 11:01 pm
Reply with quote
Report this post
Hi, Teitbite.
Please tell me - how to change the colored background at the header to custom image with dimensions of for example 1350*330? And to display it correctly on mobile devices too... Ideally I would like to have the image replaced the colored background of the two modules: header and breadcrumbs (if it possible)...
background.PNG

And how can I move logo image up or down at the mainpage and other pages?
URL in PM
Thanks in advance.
User avatar
Expert Boarder

teitbite
Wed Dec 07, 2016 12:52 pm
Reply with quote
Report this post
Hi

Right now it's only possible to make it under header. Breadcrumbs is a separate layer, so changes to template's structure will have to be done first.

Code to use:

Code: Select all
#gkHeader {
    background: transparent url("../images/bg.jpg") repeat scroll 0 0;
}


for responsive behaviour You need to try what will work better:

Code: Select all
#gkHeader {
    background-size: cover;
}


or

Code: Select all
#gkHeader {
    background-size: 100% auto;
}


I cannot tell without knowing how the image looks like.
User avatar
Moderator

GK User
Thu Dec 08, 2016 1:17 am
Reply with quote
Report this post
Thanks, Teitbite
And one more question...
I made a colour background in header menu. Need to remove it from the main page, but leave it on all the others...
http://diary.travel/
User avatar
Expert Boarder

teitbite
Sat Dec 10, 2016 12:24 pm
Reply with quote
Report this post
Hi

Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all
.frontpage #gkMainMenu .gkMenu > ul > li > a {
    background-color: transparent;
}
User avatar
Moderator

GK User
Sat Dec 10, 2016 5:47 pm
Reply with quote
Report this post
Thank you, Teitbite
User avatar
Expert Boarder

teitbite
Tue Dec 13, 2016 3:58 pm
Reply with quote
Report this post
Hi
Glad I could help.
---
If You were satisfied with our support please let other users know on Twitter: http://twitter.com/gavickpro or Facebook: http://www.facebook.com/gavickpro
User avatar
Moderator

GK User
Wed Dec 21, 2016 7:50 pm
Reply with quote
Report this post
Hi
Menu OK
When the mail page downloading (diary.travel), first see for half of a second backrong image (with wood boards) from the another pages, and then correct background image with our family... How to delete wood boards background from the main page?
User avatar
Expert Boarder

teitbite
Fri Dec 30, 2016 11:42 am
Reply with quote
Report this post
Hi

This is happening because some of the css is loaded first and some time later the rest with new backgrounnd. It can be reduced by using some css compression or activating cache. But wait wilt it till all the site will be ready.
User avatar
Moderator

GK User
Wed Jan 25, 2017 11:29 am
Reply with quote
Report this post
Hi. GZIP and cache was activated, but slill have this problem. Is it possible to remove from the main page this menu backrong image with wood boards (from another pages)?
User avatar
Expert Boarder

teitbite
Tue Jan 31, 2017 12:27 pm
Reply with quote
Report this post
Hi

Try add to override.css:

Code: Select all
.frontpage #gkHeader {
backgorund-image: none;
}


or remove the image /templates/gk_mo/images/dnevnik-puteshestvennika-header2.jpg
User avatar
Moderator


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.