Background in Rockwall template

**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

**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.

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

http://s345833943.mialojamiento.es/salutaris/
Thanks

**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.

**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

**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.

**GK User** Mon May 27, 2013 1:49 pm Reply with quote Report this post

Thankssss A lot...

**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.

**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;
}

**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.

**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

**GK User** Tue Jun 04, 2013 9:34 am Reply with quote Report this post

@cyberek PM sent to you....
Thanks

**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;}

**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.

**GK User** Tue Jun 04, 2013 8:56 pm Reply with quote Report this post

What should be its background color?

**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.

**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.

**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.

**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

**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.

**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.

**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; }

**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.

**GK User** Fri Dec 11, 2015 5:45 pm Reply with quote Report this post

Ok, thanks for the info

.