WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Simple Catch, changing header background image (17 posts)

  1. suns
    Member
    Posted 1 year ago #

    Hi there, I'm having a bit of trouble with the simple catch theme. The default is a speckled grey bg for the topmost area of the page.

    If I add this code via the custom css :

    #header {
    background: none;
    background-color: #333333;
    }

    then yes, it will change the background colour and remove the default image.

    However, I want to add an image instead of a colour, so I tried this:

    #header {
    background:url(images/newheaderimage.jpg) left bottom repeat-x;
    padding-bottom:20px;
    }

    ...and this won't work. I suspect that it may be to do with the path to the images, as even if I do an exact copy from the original stylesheet I can't get it to work.

    Any help would be gratefully received. I cannot provide you with a link currently as I am working locally using MAMP

    Regards, Suns

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Are you linking to an image you've uploaded in the admin panel?

  3. suns
    Member
    Posted 1 year ago #

    no, I've actually added the image directly into the images folder with the path:

    wp-content/themes/simple-catch/images/

    this is the folder that contains all the structural images (backgrounds, social icons etc.).

    Should I be going somewhere else?

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    in which directory is your CSS file, that you're editing for the image?

  5. editpo
    Member
    Posted 1 year ago #

    Go to the theme
    select Featured Slide
    Select > More Options
    Tick Disable Slider Background effect

  6. suns
    Member
    Posted 1 year ago #

    Hi Andrew,

    this is where I'm getting confused - I'm editing the css via the wordpress admin interface which can be accessed via the menus: appearance/themes/simplecatch/theme options/custom css styles

    ...in other words, I'm not sure where the css code is being written/rewritten so the path to the images folder isn't correct.

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    It may be adding into the header.php file, could you link your website to make sure?

  8. suns
    Member
    Posted 1 year ago #

    EditPo - don't think this is the issue - that just enables/disables the translucent effect on the images for the slider - which I disabled a long time ago. Tried enabling and disabling to check, but no change.

  9. suns
    Member
    Posted 1 year ago #

    Andrew - can't I'm afraid as it's not live

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    can you view-source your web page and pastebin.com the contents of that source?

  11. suns
    Member
    Posted 1 year ago #

    Hi Andrew, not used pastebin before, however hre's the link:

    http://pastebin.com/hJ6LFc3y

    ..is this what you needed?

  12. editpo
    Member
    Posted 1 year ago #

    Sorry - thought you meant the slider

  13. suns
    Member
    Posted 1 year ago #

    should also mention that the file I want for the background is called 'swoop.jpg'

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    That's correct, and I can see the custom styles added into header.php.

    To the CSS , try

    background:url(/wp-content/themes/simple-catch/images/newheaderimage.jpg) left bottom repeat-x;
  15. suns
    Member
    Posted 1 year ago #

    Andrew, Sir, you are a star!

    Thank you so much for helping me with this - it works perfectly... or will do when I've edited the BG image a bit!

    Thank you so much once again,

    Sunil

  16. yorgo67
    Member
    Posted 1 year ago #

    So let me get this straight...

    You simply enter in the custom CSS settings, found via Theme Options > Design Settings, and that new line of code from above and it will alter the background image in the header, where the slider resides?

    The reason why I ask is because I too have uploaded an image into the media library and want to replace the fuzzy grey background image or tile (whatever you call it) so that I can put my own into there.

  17. suns
    Member
    Posted 1 year ago #

    That's correct yorgo... however, I would recommend that don't do what I first did and place your image within the simple-catch folder... i.e.:

    background:url(/wp-content/themes/simple-catch/images/newheaderimage.jpg) left bottom repeat-x;

    the reason being that as soon as you update to any never versions of the simple catch template your images will be overwritten/removed too if they are stored in that folder.

    Instead, put them in your uploads folder (I place them in a subfolder called 'coreimages' so they don't get mixed up with post/page images)

    if you place something like the following into your design settings-css code it should work... does with me anyway.

    #header {
    background:url(/wp-content/uploads/coreimages/header-bg4.jpg) left bottom repeat-x;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic