Change back drop of only certain pages

Hey,
Yes, you can do this with css and page id’s. What image do you want? Can you link to the certain pages you want this to affect?

Hannah

Hi Hannah,
Thanks for the reply but I have not made the page yet or uploaded the photo I want to use. Do you add the css to the custom css under appearance.

If lets say the page is test1 with an id=54 and a image say paulw1 what would be the css code required to make the image paul1 to appear on page id=54

Many thanks

Paul

Try using this css:

.page-id-54 header #logo a.brand, .page-id-54 .logofont {
    content: url(YOURURL);
}

You can paste that into your custom css box in Appearance > Theme Options > Advanced Settings.
Hope it helps!

Hannah

Hi Hannah,
I added to the css as you suggested but the default backdrop still exists. Not knowing a lot about css I inserted the code as below :-

.page-id-1280 header #logo a.brand, .page-id-1280 .logofont {
content: url(https://tipsyfruitgins.co.uk/wp-content/uploads/2019/10/christmas-competition-backdrop.jpg);
}

The only thing is that after entering the url if you look at it in the editor the whole of the url shows in red does this mean an error ???

Thanx

Paul

Hi Hannah,

The page URL IS https://tipsyfruitgins.co.uk/?page_id=1280

Thanks

Sorry, I gave you the wrong css. Try using this:

body.page-id-1280 {
    background: url(https://tipsyfruitgins.co.uk/wp-content/uploads/2019/10/christmas-competition-backdrop.jpg);
}

Does that work for you?

Hannah

Hi Hannah,

Thanks for the code much appreciated and IT WORKS !!!!!

The only thing is if you look at https://tipsyfruitgins.co.uk/?page_id=1280 the image is repeating itself to the right is this due to the size if the christmas image or is their a setting that can be applied in the css code to make the image fill the screen as one image not repeated images as the default image of the sea seen ?

Many thanks

Paul

Hi Hannah,

Just to let you know the problem is fixed by adding the extra code to your supplied code !!

I would like to say the support you get from this site is the best I have ever come across KEEP UP THE GOOD WORK

Many thanks

Paul

opps forgot to add the code for you to see

body.page-id-1280 {
background: url(https://tipsyfruitgins.co.uk/wp-content/uploads/2019/10/christmas-competition-backdrop.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Glad that worked for you!

Hannah