Custom Background - How to implement?

Hi,

I want to implement a custom background image for my creativity template, i.e. either side of the content area, that will be created from a fixed, repeating image that would tile.

How can i implement this?

Thanks in advance.

Bob

First thing you need to do is to imagine how the page should look after implementing this image. Right now all modules have 100% background color width that is set either to white or gray. If you would like the image to tile under all content - you would need to change a lot of css'es.
Please post an url to your site so I can check how it looks now.
Perhaps you would like to do it only on all but homepage - then it might be more easy.

Hi,

I basically want the background to appear right and left of the main content area, and be fixed while the content scrolls... pretty much in the same way as on this template (although this template has a fixed width image rather than tiling a repeating design):

http://demo.gavick.com/joomla25/bluap/

If I may send you a private link to the site via PM, as the site is currently offline awaiting publication.... or you may like to check the site using the same credentials as I sent in the previous PM to you for the same site... ref:

https://www.gavick.com/forums/creativit ... 66#p155166

Thanks

Bob

Its not an easy task. First you would need to make background image to appear on the sides.
Please edit: /templates/gk_creativity/css/override.css and add at its end:

Code: Select all

html, #gkTop, #gkContentWrapper, #gkPageContentWrap, #gkFooter {background: transparent}
#gkTop div.gkPage, #gkPageContent, #gkBottom1 {background: #fff}
#gkFooter .gkPage {background: #5a69de}
 
#gkBottom1 {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto!important;
padding: 0;
max-width: 1045px;
}


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

Now you would need to add custom image to body element, for example this way:

Code: Select all

body {background:url(../images/your-image.jpg) 0 50% no-repeat; background-position:fixed;}


This will place image that will be centered on top of the page and it will not scroll with page. Just place your 'your-image.jpg' file inside of:
/templates/gk_creativity/images/
folder.

Thanks, much appreciated. For the second element, which file does the body code go into?

Thanks

Bob

Also override.css, just after previous code.

Ok, great, thanks for this. I've implemented it all, but i'm wanting to use a small image that will tile to create a continuous fixed background image. Can the code be amended to do this?

Thanks in advance!

Kind regards

Bob

Yeah, just use:

Code: Select all

body {background:url(../images/your-image.jpg) 0 0 repeat; background-position:fixed;}


That's awesome, thanks. Just 3 small things left.

The content now runs right up to the very left and right edges, where do i assign a margin for each side?

Also, just under the top menu, i need to remove the small gap between the top menu and content to make it seamless, it looks a little odd right now... i found the css for the gap in the footer, but can't find the top one.

And finally, I notice when clicking on a link, it doesn't scroll cleanly to the title of that link. Is there a way to fix it so that each heading is visible once the scrolling stops?

Thank you again for your help, it's very much appreciated

Kind regards

Bob

The problem with padding lies only in Contact module as far as I can see...

Code: Select all

.onepage #gkHeader .box, .onepage #gkBottom1 .box, .onepage #gkPageContent .box {padding: 0 20px;}


above code should fix that (adding 20px padding on left and right)

The gap under the header is caused by empty paragraph in the module where you have placed content of "about artist". Please remove the paragraph from the module and spacing will disappear.

With the scrolling - it is not that simple. You see - when you use scroll, page moves so the corresponding div reaches top of the page. That is why in our original demo there are so big spaces above and under each module - they are of height of the header. So if you either removed those spaces, or made header bigger - you need to fix the padding/margins of each module, so when the div hits top of the page, content will have enough space to not be covered by menu.