Background in Rockwall template

Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Tue May 07, 2013 11:09 am
Reply with quote
Report this post
Hi, how couls I have a background image??
I added in override thisç:
body {
background:url(../../images/fonssalutaris.jpg) top left no-repeat !important;
}

And updated the image in images/fonssalutaris.jpg

But don't work

Thanks
User avatar
Gold Boarder

GK User
Tue May 07, 2013 11:40 am
Reply with quote
Report this post
Hi,
can you give us url to your website ? It will be much easier to help you.
User avatar
Gold Boarder

GK User
Tue May 07, 2013 11:52 am
Reply with quote
Report this post
User avatar
Gold Boarder

GK User
Wed May 08, 2013 11:19 am
Reply with quote
Report this post
I check it and two things I found. First one is that <html> tag and div with id 'gkPageContentWrap' have own background which cover body background. To eliminate this please add to override.css
Code: Select all
html,
#gkPageContentWrap {
background:none !important;
}

Second one is that url to body background image is incorrect. Even if I changed your code to:
Code: Select all
body {
background:url(images/fonssalutaris.jpg) top left no-repeat !important;
}

and it direct me to http://s345833943.mialojamiento.es/salu ... ss/images/ browser didn't find fonssalutaris.jpg in this folder. Please check if you copy this image to this folder.
User avatar
Gold Boarder

GK User
Mon May 27, 2013 10:49 am
Reply with quote
Report this post
Dear Gavick Team.

here having the same problem.

How can i add a background image.?

Thanks in advance

www.salonsantana.com
http://salonsantana.com/templates/gk_ro ... e1/bg1.jpg
User avatar
Fresh Boarder

GK User
Mon May 27, 2013 11:10 am
Reply with quote
Report this post
@tretsomlugagge please try add to override.css
Code: Select all
html {
background: url('../images/style1/bg1.jpg') top center no-repeat;
}
body,
#gkTop,
#gkPageContentWrap {
background: none !important;
}

and remember to enable override.css option in template settings.
User avatar
Gold Boarder

GK User
Mon May 27, 2013 1:49 pm
Reply with quote
Report this post
Thankssss A lot...
User avatar
Fresh Boarder

GK User
Sat Jun 01, 2013 10:11 am
Reply with quote
Report this post
Hi,
It dosn´t work for me. I have put the code in css override in advanced settings in template and turned css overide on. I have one code more in css overide and that works fine. This code is #gkMenuWrapper {
background: #7A1326;
}
If i call the background image through browser it is there: http://localhost/mydomain/templates/gk_ ... e1/bg1.jpg.

I am sorry i can´t show the site because it is on my local server (XAMPP).

Everything else is running ok.

Any suggestion?

Thanks.
User avatar
Senior Boarder

GK User
Sat Jun 01, 2013 11:02 am
Reply with quote
Report this post
I'm also trying to add
http://www.oakraflooring.co.uk/template ... 1/back.jpg
as a background image to the site:
http://www.oakraflooring.co.uk
Added the following to the override file as suggested in an earlier post but no joy... do i require further css amendments? Thanks as always joe


html {
background: url('../images/style1/bg1.jpg') top center no-repeat;
}
body,
#gkTop,
#gkPageContentWrap {
background: none !important;
}
User avatar
Junior Boarder

GK User
Tue Jun 04, 2013 7:55 am
Reply with quote
Report this post
@florint - with localhost I can't check what is wrong with Your code. Please poste site to some online location, then I'll be able to help.

@JoeMcM

your filename is back.jpg not bg1.jpg, so the code for body should be:
Code: Select all
body {
background: url('../images/style1/back.jpg') 50% 0 no-repeat;
}


Please correct that in your override.css and everything will work fine.
User avatar
Moderator

GK User
Tue Jun 04, 2013 8:05 am
Reply with quote
Report this post
@cyberek
OK i´ll upload to an online server and then i´ll contact you again - thanks
User avatar
Senior Boarder

GK User
Tue Jun 04, 2013 9:34 am
Reply with quote
Report this post
@cyberek PM sent to you....
Thanks
User avatar
Senior Boarder

GK User
Tue Jun 04, 2013 12:25 pm
Reply with quote
Report this post
@florint
1. Please create an image, that is minimum 1920px wide that will be centered as background on your page, and upload it to:
/templates/gk_rockwall/images/bg.jpg

Then please edit: /templates/gk_rockwall/css/override.css and add at its end:
Code: Select all
body {background-image: url('../images/bg.jpg'); background-repeat: no-repeat; background-position: center top;}
#gkTop, #gkPageContentWrap {background: transparent;}
.gkPage {background: #fff;}

Remember to enable "CSS override" in template settings - advanced section.

If You would like the image to stay "fixed" than use:
Code: Select all
body {background-image: url('../images/bg.jpg'); background-repeat: no-repeat; background-position: center top; background-attachment: fixed;}
#gkTop, #gkPageContentWrap {background: transparent;}
.gkPage {background: #fff;}
User avatar
Moderator

GK User
Tue Jun 04, 2013 1:37 pm
Reply with quote
Report this post
HI Cyberek,
Really nice. That did the trick - thank you very much. :-)

Now there are only one thing left....the #gkpage is white as i asked(i am not complaining :-) ) BUT now the menubackground in the top is white too... Hope you see what i mean.

Kind regards and thanks again.
User avatar
Senior Boarder

GK User
Tue Jun 04, 2013 8:56 pm
Reply with quote
Report this post
What should be its background color?
User avatar
Moderator

GK User
Wed Jun 05, 2013 5:20 am
Reply with quote
Report this post
Hi
The backgroundcolor should be #7a1326.

I have used this to get the color #gkMenuWrapper {
background: #7A1326;
}

Before gkpage got #fff - now it is like the gkpagecolor is placed over the menuwrapper - i hope you understand.

Thanks.
User avatar
Senior Boarder

GK User
Wed Jun 05, 2013 7:36 am
Reply with quote
Report this post
Add this code at the end of override.css

Code: Select all
#gkMenuWrapper .gkPage {background: #7A1326;}


It will force new color to inner element of #gkMenuWrapper and override its oryginal #fff.
User avatar
Moderator

GK User
Wed Jun 05, 2013 8:08 am
Reply with quote
Report this post
Done :-) It works.
Thanks for your help. Have a nice day.
User avatar
Senior Boarder

GK User
Thu Nov 05, 2015 3:06 pm
Reply with quote
Report this post
Hi Cybereck
Long time since....
I have the soloution implemented on my site, but i just noticed that the mobilemenu isn´t visible. I want it white. The site is here: www.youngflowers.dk

my overide looks like this:
body {background-image: url('../images/bg1.jpg'); background-repeat: no-repeat; background-position: center top; background-attachment: fixed;}
#gkTop, #gkPageContentWrap {background: transparent;}
.gkPage {background: #fff;}

#gkMenuWrapper .gkPage {background: #7A1326;}
#gkMenuWrapper { background: #7A1326;}


.gkNspPM-TitleOverlay > figure > figcaption a {color: #FFFEFE !important;}

.article-image-intro {
width: 80px;
height: auto;
}
Thanks
User avatar
Senior Boarder

GK User
Sat Nov 07, 2015 4:03 pm
Reply with quote
Report this post
1. Because you are using custom css box instead of override.css file you will have some problems like loading of this file:
http://www.youngflowers.dk/index.php/en/images/bg1.jpg
Its better to keep those custom css code in override.css. Please move it there and write back if any of described problems remains.
User avatar
Moderator

GK User
Wed Nov 18, 2015 9:12 am
Reply with quote
Report this post
Hi Cyberek,
Thanks for your suggestion. I have moved it to overide.css, but it didn´t help. My menu is still not white, but the the same color as the menuwrapper.
User avatar
Senior Boarder

GK User
Fri Nov 20, 2015 5:34 pm
Reply with quote
Report this post
My suggestion was on background thing... You still are missing this file:
http://www.youngflowers.dk/templates/gk ... es/bg1.jpg
which should be body element's background.
Now mobile menu icon doesn't show because you have replaced it's image with a color:
Code: Select all
#gkMenuWrapper .gkPage {
    background: #7A1326;
}

its to general, but you can easy bring the icon back:
Code: Select all
#gkMenuWrapper #gkMobileMenu {
    background: transparent url('../images/tablet_menu.png') no-repeat 0 0;
}
User avatar
Moderator

GK User
Fri Dec 11, 2015 3:26 pm
Reply with quote
Report this post
Sorry Cyberk
I forgot to answer.

It works as it should. Thanks.
User avatar
Senior Boarder

GK User
Fri Dec 11, 2015 5:45 pm
Reply with quote
Report this post
Ok, thanks for the info :).
User avatar
Moderator


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