Jump to content

How can I add a background image?

kar3n2

By kar3n2
in Technical Problems

Recommended Posts

kar3n2 Rising Star

kar3n2

Posted
Posted

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

Link to comment
Share on other sites
Netherlord Rising Star

Netherlord

Posted
Posted

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 :D

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.

Link to comment
Share on other sites
Netherlord Rising Star

Netherlord

Posted
Posted

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.

Link to comment
Share on other sites
Netherlord Rising Star

Netherlord

Posted
Posted

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 :rofl:

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");
    }

 

Link to comment
Share on other sites
Netherlord Rising Star

Netherlord

Posted
Posted

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 :D

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

Link to comment
Share on other sites
Michael R Proficient

Michael R

Posted
Posted

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

Link to comment
Share on other sites
steve00 Proficient

steve00

Posted
Posted

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

Link to comment
Share on other sites
kar3n2 Rising Star

kar3n2

Posted
  • Author
Posted

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  :sad:  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

Link to comment
Share on other sites
kar3n2 Rising Star

kar3n2

Posted
  • Author
Posted

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

Link to comment
Share on other sites
Netherlord Rising Star

Netherlord

Posted
Posted

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 :D you changed things around?

Link to comment
Share on other sites
Netherlord Rising Star

Netherlord

Posted
Posted

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. :D

Link to comment
Share on other sites
kar3n2 Rising Star

kar3n2

Posted
  • Author
Posted

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 :D 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 :thumbsup:

Link to comment
Share on other sites
kar3n2 Rising Star

kar3n2

Posted
  • Author
Posted

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

Link to comment
Share on other sites
Netherlord Rising Star

Netherlord

Posted
Posted

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 :thumbsup:

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;
Link to comment
Share on other sites
kar3n2 Rising Star

kar3n2

Posted
  • Author
Posted

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 :thumbsup:

Link to comment
Share on other sites
kar3n2 Rising Star

kar3n2

Posted
  • Author
Posted

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/

Link to comment
Share on other sites
tekguru Collaborator

tekguru

Posted
Posted

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?

image.thumb.jpg.14d554214c16039f491b19b9

Link to comment
Share on other sites
steve00 Proficient

steve00

Posted
Posted

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?

image.thumb.jpg.14d554214c16039f491b19b9

To avoid confusion you would be better starting your own topic

Link to comment
Share on other sites
steve00 Proficient

steve00

Posted
Posted

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)

 

Link to comment
Share on other sites
kar3n2 Rising Star

kar3n2

Posted
  • Author
Posted

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/

Link to comment
Share on other sites
Netherlord Rising Star

Netherlord

Posted
Posted

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 :D

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
Invision Community © 2024 IPS, Inc.
×
×
  • Create New...