How can I add a background image?

[kar3n2]

Hi

Being fed up of skins totally to day.... is it possible to add a background image to my site please?

I think keeping things simple without any skins is the best way forward for me but to make my site look at least a it unique will need a background image

 

Thanks if you can help

[Netherlord]

Hi

Being fed up of skins totally to day.... is it possible to add a background image to my site please?

I think keeping things simple without any skins is the best way forward for me but to make my site look at least a it unique will need a background image

 

Thanks if you can help

Hi again yes its easy

use this in a class 

background-image: url("backgroundimageurlhere"); add it to the below classes in css template

#ipsLayout_header header <-- for header bg

ipsLayout_body <--- for body bg

Im not sure if one exists for full bg.

[kar3n2]

is this why people use skins so they don't have to edit the CSS stuff then?  I mean each time we upgrade we would need to do these additions/edits all over again wouldn't we?

[Netherlord]

is this why people use skins so they don't have to edit the CSS stuff then?  I mean each time we upgrade we would need to do these additions/edits all over again wouldn't we?

Only if that part was changed. But its not a problem. What you need to do it copy the classes you wish to overwrite and make custom.

Then copy that class to the custom.css file that exists in each theme. it will be blank as standard. You can add the classes to that with your own custom css and that will overwrite the standard. And custom.css never gets overwritten after an upgrade. Its what i do!

Its actually pretty easy to pick up.

[kar3n2]

so i just add

background-image: url("backgroundimageurlhere");

into the custom CSS file ( which is currently blank) and see if that works?

with the correct url of course

[Netherlord]

so i just add

background-image: url("backgroundimageurlhere");

into the custom CSS file ( which is currently blank) and see if that works?

with the correct url of course

make sure you include it in a class for where you want it.

soo for the body or header it would be

    #ipsLayout_body {
        padding: 0;
        max-width: 100%;
        margin: 0;
       background-image: url("backgroundimageurlhere");
    }
    
    #ipsLayout_header > header {
        margin-bottom: 0 !important;
        background-image: url("backgroundimageurlhere");
    }

 

[Netherlord]

Been taking a look at your site. Noticed some things you could do with. the menu bar along the top has a gap down either side. So a fix for that.

Remove the padding 0 15 px from this class - cjmenu_container cjmenu_container_bar
 

and some color changes to match your footer with rest of your theme. 

Change these back-ground color in the classes below to the purple you have.

divider:after

ul.footerList li .fa

and change the back-ground color of these classes to white

ul.footerList li .fa:after 

divider fw

just search your css to find them

sure you can figure it out. Just wanted to mention it.

[Michael R]

Hi

Being fed up of skins totally to day.... is it possible to add a background image to my site please?

I think keeping things simple without any skins is the best way forward for me but to make my site look at least a it unique will need a background image

 

Thanks if you can help

HA! Having the same kind of day today! Had to go get a margarita this evening..

[kar3n2]

red wine here ... just watching a film now instead to de-stress  

HA! Having the same kind of day today! Had to go get a margarita this evening..

[steve00]

is this why people use skins so they don't have to edit the CSS stuff then?  I mean each time we upgrade we would need to do these additions/edits all over again wouldn't we?

As long as you add css to the custom.css file then should not affect when upgrading.

If made changes to the templates or added css anywhere else then yes they will have to be re-done when upgrading

[kar3n2]

make sure you include it in a class for where you want it.

so for the body or header it would be

    #ipsLayout_body {
        padding: 0;
        max-width: 100%;
        margin: 0;
       background-image: url("backgroundimageurlhere");
    }
    
    

 

that didnt work    I added    the following into my custom CSS

#ipsLayout_body {
        padding: 0;
        max-width: 90%;     ( I changed this size to see if it would make site smaller so i can see the background image)
        margin: 0;
       background-image: url("http://www.outdoormuckers.co.uk/wp-content/uploads/2015/08/background-footprints-blues.jpg");
    }

 

the site was 10% smaller but shifted to the left and there was no background image ?????????

 

btw the background image size i uploaded is 1400 x 1095 so i think that is big enough

and even tried a much larger image and that didnt work either

[kar3n2]

I have been playing around with it and changed the padding and margin to see if that helped   

#ipsLayout_body {
        padding: 400;
        max-width: 90%;
        margin: 400;
       background-image: url("http://www.outdoormuckers.co.uk/wp-content/uploads/2015/08/bg.gif");
    }

I can see the background image is there but not really showing filling the screen    http://outdoormuckers.co.uk/forum   

Im going to leave it like this now so you can see it for a while

[Netherlord]

I have been playing around with it and changed the padding and margin to see if that helped   

#ipsLayout_body {
        padding: 400;
        max-width: 90%;
        margin: 400;
       background-image: url("http://www.outdoormuckers.co.uk/wp-content/uploads/2015/08/bg.gif");
    }

I can see the background image is there but not really showing filling the screen    http://outdoormuckers.co.uk/forum   

Im going to leave it like this now so you can see it for a while

remove that from the custom css. and use this.

body{
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:13px;
line-height:18px;
height:100%;
background-image: url("http://www.outdoormuckers.co.uk/wp-content/uploads/2015/08/background-footprints-blues.jpg");
}

That should fix it. Site looks way different than it did yesterday you changed things around?

[Netherlord]

Also a small piece of advice. If you want to change something specific on your website. And dont know the class you can hover over that place and right click. and choose inspect element. (i use firefox because its just better for site design i think) and directly change that css in the browser window, i do this a lot when trying stuff out since a refresh removes the edits you can breeze through a lot of curiosity quickly.

[kar3n2]

remove that from the custom css. and use this.

body{
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:13px;
line-height:18px;
height:100%;
background-image: url("http://www.outdoormuckers.co.uk/wp-content/uploads/2015/08/background-footprints-blues.jpg");
}

That should fix it. Site looks way different than it did yesterday you changed things around?

Thats worked now yes. I have a background image. coool       http://www.outdoormuckers.co.uk/forum/

Now then ... I need to think about the header area ...    ooohh

site is changing yes because Im doing it bit by bit ha ha   i wanted a decent blue but I might even make that lighter yet

[kar3n2]

If you change my theme ( ive made it available to view) you will see I had a nice skin called Uniform , and it was easy to add background images etc ...  but it wasnt compatible with the CJmenu which i think will be great when all set up . Thats why ive got to start from the basic IPS theme  now to save me any more headaches, or so I thought ha ha

[Netherlord]

Thats worked now yes. I have a background image. coool       http://www.outdoormuckers.co.uk/forum/

Now then ... I need to think about the header area ...    ooohh

site is changing yes because Im doing it bit by bit ha ha   i wanted a decent blue but I might even make that lighter yet

This should work for header bg.

#ipsLayout_header > header {
        padding: 10px 0px 125px;
        margin-bottom: -115px;
        background-image: url("http://www.outdoormuckers.co.uk/wp-content/uploads/2015/08/background-footprints-blues.jpg");
    }

You can also replace the margin above with this! If you want the menu bar to go under the header image instead of half over it.

        margin-bottom: 0 !important; 

[kar3n2]

This should work for header bg.

#ipsLayout_header > header {
        padding: 10px 0px 125px;
        margin-bottom: -115px;
        background-image: url("http://www.outdoormuckers.co.uk/wp-content/uploads/2015/08/background-footprints-blues.jpg");
    }

You can also replace the margin above with this! If you want the menu bar to go under the header image instead of half over it.

        margin-bottom: 0 !important; 

OMG its worked    i didnt need to add margin-bottom...  It all blended in without even being able to tell there is a join    UR a STAR

[Netherlord]

OMG its worked    i didnt need to add margin-bottom...  It all blended in without even being able to tell there is a join    UR a STAR

No problem

[kar3n2]

sorry I'm back again... site on my laptop is looking how I want it with background image now but on mobile phone there is lots of header image showing.

Any ideas please @Netherlord

i added this into the custom code in case it was that

margin-bottom: 0 !important;    

just also notice my nav bar menu disappears on mobile phone when scrolling too     hmmm   but I've started a fresh topic for this so as not to confuse people   https://community.invisionpower.com/topic/418793-how-can-i-fix-the-navigation-bar/

[tekguru]

I've been following this and using it as a tutorial myself, and have got as you can see below. The problem is that the background image does not quite reach to the underneath of the button bar. I only want to go up to it not above.

Any ideas?

[steve00]

I've been following this and using it as a tutorial myself, and have got as you can see below. The problem is that the background image does not quite reach to the underneath of the button bar. I only want to go up to it not above.

Any ideas?

To avoid confusion you would be better starting your own topic

[steve00]

sorry I'm back again... site on my laptop is looking how I want it with background image now but on mobile phone there is lots of header image showing.

Any ideas please @Netherlord

i added this into the custom code in case it was that

margin-bottom: 0 !important;    

just also notice my nav bar menu disappears on mobile phone when scrolling too     hmmm  

You need to create a css for mobile in custom.css file

try:

@media screen and (max-width : 760px){

#ipsLayout_header > header {
	padding: 10px 0
	}‌
}

Menu bar always disappears when scrolling (even on PC) .. you click the 'square block' in top right (unless am misreading your post)

 

[kar3n2]

You need to create a css for mobile in custom.css file

try:

@media screen and (max-width : 760px){

#ipsLayout_header > header {
	padding: 10px 0
	}‌
}

Menu bar always disappears when scrolling (even on PC) .. you click the 'square block' in top right (unless am misreading your post)

 

no that didnt work...  can still see lots of header image on mobile phone....   thanks for help though

 

started another topic re menu  here  btw   https://community.invisionpower.com/topic/418793-how-can-i-fix-the-navigation-bar/

[Netherlord]

sorry I'm back again... site on my laptop is looking how I want it with background image now but on mobile phone there is lots of header image showing.

Any ideas please @Netherlord

i added this into the custom code in case it was that

margin-bottom: 0 !important;    

just also notice my nav bar menu disappears on mobile phone when scrolling too     hmmm   but I've started a fresh topic for this so as not to confuse people   https://community.invisionpower.com/topic/418793-how-can-i-fix-the-navigation-bar/

remove this from #ipsLayout_header > header

padding: 10px 0px 125px;

and add

padding: 10px;

That should fix it. Least it does on my end.

Sorry for slow reply had to go out