Return to Support

background footer image

Home Forums Graphene WordPress theme Support background footer image

Viewing 15 posts - 1 through 15 (of 46 total)
  • Author
    Posts
  • #4693
    whoooops
    Member

    Hi,

    I am having some trouble with adding a background image to my footer..

    i have inserted the code below into my css…

    #footer {

    background-image: url(http://path);

    }

    but still no sign of a background image appearing…

    Any help would be greatly appreciated..

    #28869
    Josh
    Member

    Your syntax above is incorrect. When using background-image, you need to wrap the url in single or double quotes. Like this:

    #footer {
    background-image:url('http://pathtoyourimage.png');
    }

    #28870
    whoooops
    Member

    thanks John, However it still doesn’t work for me.., I think something else must be overwriting it!?? this is what i have…

    #footer {

    background-image: url("http://http://www.elliottwaveireland.com/blog/wp-content/uploads/2012/05/footer.gif");
    border-top: 1px solid #d5d5d5;
    padding-top: 50px;
    margin-bottom: 30px;
    min-height: 80px;
    position: relative;
    background-color:#396395;
    color: #fff;
    clear: both;
    }

    [Moderated by Josh: Please use backticks when placing code in posts.]

    #28871
    MXGimp
    Member

    Try this, you had extra http://

    #footer {
    background-image: url("http://www.elliottwaveireland.com/blog/wp-content/uploads/2012/05/footer.gif");
    border-top: 1px solid #d5d5d5;
    padding-top: 50px;
    margin-bottom: 30px;
    min-height: 80px;
    position: relative;
    background-color:#396395;
    color: #fff;
    clear: both;
    }

    [Moderated by Josh: Please use backticks when placing code in posts.]

    #28872
    Josh
    Member

    @whooops, @mxgimp,

    Please use backticks when posting code so the forum doesn’t mangle it on the front-end.

    @whooops,

    Try this in your custom css:

    #footer {
    background-image: url("http://http://www.elliottwaveireland.com/blog/wp-content/uploads/2012/05/footer.gif") !important;
    border-top: 1px solid #d5d5d5 !important;
    padding-top: 50px !important;
    margin-bottom: 30px !important;
    min-height: 80px !important;
    position: relative !important;
    background-color:#396395 !important;
    color: #fff !important;
    clear: both !important;
    }

    #28873
    whoooops
    Member

    @ Josh and MXGimp

    tried it, nope still no change at all!! 🙁

    #28874
    Josh
    Member

    What is the website url?

    #28875
    whoooops
    Member
    #28876

    Try saving your background image as .jpg, not .gif.

    #28877
    Josh
    Member

    Also adjust it in the css mentioned above in my code if you change from .gif to .jpg:

    background-image: url("http://http://www.elliottwaveireland.com/blog/wp-content/uploads/2012/05/footer.jpg") !important;

    #28878
    Prasanna SP
    Member

    It still has a double http! Remove it.

    background-image: url("http://www.elliottwaveireland.com/blog/wp-content/uploads/2012/05/footer.jpg") !important;

    #28879
    whoooops
    Member

    ok, I’ve changed the footer image to jpeg, and edited the code accordingly.

    It didn’t seem to have a double http at my end..and still nothing has changed…

    #28880
    whoooops
    Member

    i have another problem!! my site now looks like this!! http://www.elliottwaveireland.com/blog/

    🙁 anyone know what i have done!! can this be fixed??

    #28881
    whoooops
    Member

    its ok, its back to normal again! still unsure of whats wrong with the footer background tho..

    #28882

    You have copied the entire parent theme style sheet into your child theme folder. Do not do this.

    Create a blank style sheet and copy over only those elements you wish to style.

    This line is what’s causing the issue:

    #footer {
    background: url("http://elliottwaveireland/images/footer.gif") repeat-x scroll left -1352px #396395;
    border-top: 1px solid #D5D5D5;
    clear: both;
    color: #FFFFFF;
    margin-bottom: 30px;
    min-height: 80px;
    padding-top: 50px;
    position: relative;
    }

    Fix these issues, and all those !important tags shouldn’t be necessary.

Viewing 15 posts - 1 through 15 (of 46 total)

You must be logged in to reply to this topic.