Custom Background Image

  • Author
    Posts
  • #94681

    chrispageonline

    Hi Avid,

    My wordpress.com blog address is: http://christopher-page.co.uk

    I’m about to create a new WordPress blog for my business, where I have decided that I will be using the Avid theme for it. I’ve tested the custom background image that I’d like to use for my new blog, on my current blog which uses Avid, but I can’t seem to see a repeat option, so that the background image scrolls down infinitely. Is there a way to do this please?

    Really loving the Avid theme!

    Kind regards
    Chris

    #94911

    scottrrollo
    Theme Author

    Hey Chris!

    Glad to hear you’re enjoying Avid :)

    To tile or repeat your background image, head over to your Customizer and click Colors & Backgrounds. Hover over your background image and click Change and then click Options. Set Repeat to Title (the icon showing four tiny squares). All done.

    Let us know how that works!

    #94919

    chrispageonline

    Hi there,

    I’ve followed what you’ve said, it works. The only problem is now, is that the footer is displaying the background image as well, rather than just a block colour. Is there any way around this please?

    Kind regards
    Chris

    #94941

    scottrrollo
    Theme Author

    Ah, I see, Chris.

    Have you tried adding your background image under the Background options settings in the Customizer? This will make your image cover your site background but not your footer background.

    If that’s not what you’re looking for, would you mind describing in a bit more detail what you’re hoping to do with your background?

    Thanks!

    #94942

    chrispageonline

    Thanks for getting back to me.

    When I add the background image under the ‘Background Options’ tab, at first glance, it displays perfectly and the footer displays properly too. The only problem is that I have a ‘Load more’ button, which means that you can press it infinitely to load more posts. This means that the background image cuts off the further you scroll down.

    When I tried changing the background image using the ‘Colours & Backgrounds tab’ like you suggested, the background displays exactly how I’d like it, but unfortunately it transfers onto the footer, which just makes the whole thing look really odd.

    Ideally, I really need a combination of the two.

    Many thanks, I appreciate your time.

    #94978

    Hey Chris,

    Hope you had a good weekend!

    You said this was already set up on one of your sites? Any chance you’re using the infinite scroll feature on that one?

    #94979

    chrispageonline

    Hi there,

    It was good thanks, hope yours was good too

    Under ‘Settings > Reading > To Infinity and beyond’ on my current blog, this message is displayed:

    We’ve changed this option to a click-to-scroll version for you since you have footer widgets in Appearance → Widgets, or your theme uses click-to-scroll as the default behavior.

    However, I don’t use a custom background image for this blog. So it just scrolls using the default background.

    Hope this helps

    Kind regards
    Chris

    #94980

    However, I don’t use a custom background image for this blog. So it just scrolls using the default background.

    Okay that makes a lot more sense.

    I suspect the only way to accomplish this is to use some custom CSS, which is part of the business and premium plans on WordPress.com. Do you have one of those plans by chance?

    #94982

    chrispageonline

    Thanks for getting back to me.

    I have already purchased a premium plan for the new blog, it was my intention to purchase Avid, if I could get this to display properly.

    Kind regards
    Chris

    #94983

    If you can add the custom background image, I can give you a CSS snippet to add to achieve the desired effect. :)

    Alternately, there is an entire support forum dedicated to CSS tweaks you can post in!

    #94985

    chrispageonline

    Oh yes please, I believe I know how to preview the CSS code. Am I right in saying, I just add the code to the CSS tab in the Customizer?

    If this works, I’ll purchase Avid after I’ve tested.

    Thank you!
    Chris

    #94986

    I believe so, yes.

    If you can paste the link to the background image you’re wanting to use in your media library, I can give you a snippet. :)

    #94987

    chrispageonline

    Thank you,

    Here’s the link:

    https://amorphixblog.files.wordpress.com/2016/05/final-art-1-extended.jpg

    Please feel free to let me know if you have any problems, or need anything more from me

    Chris

    #94991

    Hi Chris,

    If I were using that image, I might try something like this:

    .body-content {
        background: url(https://amorphixblog.files.wordpress.com/2016/05/final-art-1-extended.jpg) no-repeat fixed;
        background-size: cover;
    }

    You’ll find additional information about CSS background properties you can tweak here: CSS Backgrounds

    #94995

    chrispageonline

    Hello again,

    The code seems to be working! I’ve now purchased Avid this morning.

    I really appreciate your help with this! Have a great day!

    Kind regards
    Chris

    #94996

    Sounds great Chris!

    If you have any other questions come up, feel free to open a new support thread.

    Best of luck on the new site!

The topic ‘Custom Background Image’ is closed to new replies.