[SOLVED] Add image to background at top

How can I add an image to the background of the top section of this template.

See attachment

You can use following css to set a background:

Background color:

Code: Select all

#gkPageTop { background-color: #000; }


Background single image ( covering full width/height of that section )

Code: Select all

#gkPageTop { background: url('link to your image full url or relative') no-repeat; background-size: 100%; }


Background image repeating horizontal ( from left to right of that section )

Code: Select all

#gkPageTop { background-image: url('link to your image full url or relative') repeat-x; }


Background image repeating vertical ( from top to bottom of that section )

Code: Select all

#gkPageTop { background-image: url('link to your image full url or relative') repeat-y; }


Full url would be - > 'http://www.mywebsite.com/templates/mytemple/images/header_main.jpg'
Relative url would be - > '../images/header_main.jpg'

You can add your css code in template features > Advanced Settings > Custom CSS Code or in same section enable CSS Override and add your code into templates/gk_financial/css/override.css file.

See you around...

Thanks for the reply
I'm going with Background single image ( covering full width/height of that section ).

What should be the exact code and where to place the image file?
I've used the following code :
#gkPageTop { background-image: url('../images/top_background.jpg') no-repeat; background-size: 100%; }

Placed in the Custom CSS code area of the template and place the image file in the images directory of the template, but it's not showing.

If image is in templates/gk_finance_business/images/

Then css would be in custom code section as follows:

Code: Select all

#gkPageTop { background-image: url('/templates/gk_finance_business/images/top_background.jpg') no-repeat; background-size: 100%; }


If you add the css code into override.css file then that way you can have the relative url to the file itself, then css code would become.

Code: Select all

#gkPageTop { background-image: url('../images/top_background.jpg') no-repeat; background-size: 100%; }


Or you can copy image into joomla image folder which is www.mywebsite.com/images/, then css in custom code section would become;

Code: Select all

#gkPageTop { background-image: url('/images/top_background.jpg') no-repeat; background-size: 100%; }


See you around...

Still not working. I've placed the file with the exact name in both folders and used the appropriate code as instructed but the picture is still not showing. I'm wondering if some code conflict might be an issue? Here is what I already have in the the custom cose section (which is enable btw):

.contentheading {
font-size: 25px; // here set your value
}
.blog .itemToolbar h2 {
font-size: 25px;//here set your value
}
body#bd {
color: #000000;
}
/* Changes font size in GK Menu */
div.gk-menu > ul.level0 > li > a {
color: #1B1F23;
display: block;
font-size: 17px;
height: 46px;
line-height: 46px;
padding: 0 18px;
text-transform: uppercase;
}
div.gk-menu > ul.level0 > li > a {
color: #000000; // here put your value
}

#jquery-overlay {
z-index: 100001 !important;
}
#jquery-lightbox {
z-index: 100002 !important;
}

#gkPageTop { background-image: url('/templates/gk_finance_business/images/top_background.jpg') no-repeat; background-size: 100%; }

I have tried to see your image in browser but i couldn't see it at all in following urls.

Code: Select all

http://www.motorfusionlimited.com/images/top_background.jpg
http://www.motorfusionlimited.com/templates/gk_finance_business/images/top_background.jpg
http://www.motorfusionlimited.com/templates/gk_finance_business/images/style1/top_background.jpg


Where exactly did you upload your image into ?

I have tried to see your image in browser but i couldn't see it at all in following urls.

Code: Select all

http://www.motorfusionlimited.com/images/top_background.jpg
http://www.motorfusionlimited.com/templates/gk_finance_business/images/top_background.jpg
http://www.motorfusionlimited.com/templates/gk_finance_business/images/style1/top_background.jpg


Where exactly did you upload your image into ?

I was testing it on the offline (localhost) version of the website first. I just added it to the online version and added the code to the custom section and saved it.
Code used:
#gkPageTop { background-image: url('/templates/gk_finance_business/images/top_background.jpg') no-repeat; background-size: 100%; }

You can now see image file here: http://www.motorfusionlimited.com/templ ... ground.jpg

Try using below code:

Code: Select all

#gkPageTop { background: url('/templates/gk_finance_business/images/top_background.jpg') no-repeat; background-size: 100%; }


Worked!
Thanks

No problem at all , marking this topic as solved.

See you around...