how to change background picture for each page

  • Unknown's avatar
    ranuka90 · Member ·

    Hi,

    I am very new to wordpress and would like some help with how to change the background picture for each page on my website.

    kind regards
    Ranuka

    The blog I need help with is: (visible only to logged in users)

  • staff-jeanpierreac · Staff ·

    Hi, Ranuka!

    Your theme provide you the possibility of having one background image for all pages. If you want each one of your pages with a different background image, the god new is you can do it with a little bit of CSS magic and the bad new is you need to add a custom CSS magic for each page.

    You should need to add something like this – changing the id for each page, 56 is the id for Rejser page-:

    body.page-id-56:before { background-image: url("YOURIMAGEURL"); }

    Where YOURIMAGEURL is right now: https://ranukarajendram.files.wordpress.com/2015/05/402953_10151115861278628_1939158226_n-kopi3.jpg

    I hope this helps you. Enjoy blogging!

  • Unknown's avatar
    ranuka90 · Member ·

    Hi Raulanton,

    Thanks you so much for the reply, I tried what you wrote and it doesnt work :(
    I’ve researched myself how to do it aswell and got answers as yours, but it doesnt work on my page.

    Somehow I need to go change the css for the theme I’ve chosen and I dont know were to do that. It should have been in WP admin page under Apearences but its not there :(

    I’ve tried the way you described at this page, here you can see how the css doesnt want to work but just appears on the site..

    Kind regards
    Ranuka

  • staff-jeanpierreac · Staff ·

    Hi, Ranuka.

    Just to be sure: where did you add the css code?

  • Unknown's avatar
    ranuka90 · Member ·

    I wrote it in the edit page HTML ?

  • staff-jeanpierreac · Staff ·

    That’s is. :)

    There is a CSS editor you need to use. To access the CSS editor, go to My Sites → Customize → CSS.

    You can find a very clear and concise explanation of how to do it, here https://en.support.wordpress.com/custom-design/editing-css/

    I hope this helps you!

  • kathrynwp · Staff ·

    ranuka90 – I see a couple of problems in your CSS editor currently.

    body.page-id-62:before
{
background-image: url(‘http://imgur.com/YGUjC05&#8242');

    1) Looks like you missed a closing curly bracket when copying over the code raulanton provided. You need to include the closing curly bracket for the code to work }

    2) Your opening quote before the URL a curly quote – ‘ – but it needs to be a straight quote instead – ' – for the CSS editor to be able to parse it correctly.

    3) The image URL you provided does not end with an image extension, like .jpg or .png. The CSS editor will not be able to parse a URL without a proper image extension. If you click on the Imgur link you’ll get the path you’ll need: http://i.imgur.com/YGUjC05.jpg

    With those three changes made, this is what your code should look like:

    body.page-id-62:before {
  background-image: url('http://i.imgur.com/YGUjC05.jpg');
}

    You should also remove this function from the CSS editor, as it’s not CSS and won’t do anything:

    function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'da', includedLanguages: 'en'}, 'google_translate_element');
}

    Let me know how it goes.

  • Unknown's avatar
    ranuka90 · Member ·

    this is really soooo nice! I am head over heals that it finally worked! I’ve tried everything and in the end its just some adjustments and corrections that made it work :D! I am so happy! THANKYOU!

  • Unknown's avatar
    ranuka90 · Member ·

    Could you maybe help me with another problem?
    As you can see in the last html script I’ve written, that I got from google, this:
    function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: ‘da’, includedLanguages: ‘en’}, ‘google_translate_element’);
    }

    How can I apply this correctly and on all pages?

  • staff-totoro · Staff ·

    Hi @ranuka90

    While we do allow CSS on WordPress.com, we don’t allow all kinds of code here, nor do we offer the ability to edit the theme source files directly, as it seems you may be needing to do with the above bit of code.

    To add functionality like that, you can move to a self-hosted WordPress (also called “.org”) site if you prefer. However, you will need to be comfortable in editing your own code and maintaining the site, so if that is outside your comfort zone I don’t recommend migrating.

    Hope that helps. Please let me know if you have any further questions.

  • The topic ‘how to change background picture for each page’ is closed to new replies.