Background Image on ONLY one page

This topic has 13 replies, 6 voices, and was last updated 5 years, 2 months ago by Leo.

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
January 18, 2015 at 8:24 am #66477

Mary Pearson

What is the best way to have a background image appear on only one page of my website?

Should I upload the image in the background image settings and then disable in all the other pages, or what is probably more practical, how do I code the image to appear on just the specific page?

Since I want it to be the full background I know that I can’t just code it into the specific page. Could I use Custom CSS, and if so what is the code?

The website is http://caribbeanholiday.ca. The only page I want the background image to appear on is rental-unit but it must cover the whole page.

Many thanks!

January 18, 2015 at 3:08 pm #66527
Tom
Lead Developer
Lead Developer
Hi Mary,

Each page has a unique class in the <body> tag.

It looks like: page-id-35 – 35 being the page ID, which changes for every page.

So, your CSS would be:
```
.page-id-35 {
      background-image: url('URL TO THE IMAGE');
}
```
January 18, 2015 at 4:31 pm #66533

Mary Pearson

Thank you so much Tom! It worked perfectly!

January 19, 2015 at 12:05 am #66601

Tom
Lead Developer
Lead Developer

Glad I could help 🙂

May 2, 2016 at 2:31 am #190948
Lucie
Hey folks,
I am searching for days now how to change the background image on only one page on my wordpress-site which is http://frenken-logopaedie.de/coaching/ . Thought I found the solution, when I saw your easy way of changing the style.css.
I changed it they way you wrote, by adding

`.page-id-548 {
background-image: url(‘URL TO THE IMAGE’);
}`
But it did not change a thing.
Here is the first part of my style.css
```
body.home {
background: url('images/page.jpeg') fixed;
}
.page-id-548 {
background: url('images/page_lilia_1.jpg') fixed;
}
#art-main
{
   background: #FFFFFF url('images/page.jpeg') fixed;
   margin:0 auto;
   font-size: 15px;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: normal;
   font-style: normal;
   position: relative;
   width: 100%;
   min-height: 100%;
   left: 0;
   top: 0;
   cursor:default;
   overflow:hidden;
}
table, ul.art-hmenu
{
   font-size: 13px;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: normal;
   font-style: normal;
}
```
Can you tell me what is wrong with that? where is the mistake? You would help me so much by solving this problem. Thank you very much in advance.
Lucie
May 2, 2016 at 9:22 am #191090

Tom
Lead Developer
Lead Developer

Try adding the full URL instead of just images/filename.jpg.

Let me know 🙂

December 28, 2016 at 3:40 am #258390

Martine

Hi Tom,

I have used the CSS to put an image on one page. However I would like the background image to be fixed.

Now I have put:

.page-id-240 {
background-image: url(‘http://nockbergelodge.at/wp-content/uploads/2016/05/zomer.jpg’);
}

When I put this:

.page-id-240 {
background-image: url(‘http://nockbergelodge.at/wp-content/uploads/2016/05/zomer.jpg’) fixed;
}

it’s not working anymore. Could you please help me out?

Tnx, Martine

December 28, 2016 at 9:48 am #258510
Tom
Lead Developer
Lead Developer
It would be:
```
background-image: url(Your URL);
background-attachment: fixed;
```
July 28, 2019 at 1:41 am #969027

David

I want to change the background image of “Content” on specified page ONLY. I added the css as follows:

.page-id-1701 {
background-image: url(‘https://matia.info/wp-content/uploads/2019/07/Background1.jpg’);
}

but nothing has changed. Now I have the background image added in “Customize > Background Images > Content” but it shows the image on all pages.

July 28, 2019 at 6:52 am #969166

Tom
Lead Developer
Lead Developer

Are you sure 1701 is the page ID? Feel free to link us to that page and we’ll take a look.

July 28, 2019 at 8:55 am #969385

David

https://matia.info/onlineprijem/

July 28, 2019 at 9:52 am #969428
Leo
Staff
Customer Support
If you want to change the background image of the content then it should be this CSS:
```
body.page-id-1701.separate-containers .inside-article {
    background-image: url(https://IMAGE-URL-HERE);
}
```
July 29, 2019 at 1:10 am #969787

David

You’re great, works like a charm. Thank you, :DM.

July 29, 2019 at 8:16 am #970200

Leo
Staff
Customer Support

No problem 🙂
Author

Posts