Archived topic
Background Image on ONLY one page
13 replies · Started by Mary Pearson on January 18, 2015
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!
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');
}Thank you so much Tom! It worked perfectly!
Glad I could help :)
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
Try adding the full URL instead of just images/filename.jpg.
Let me know :)
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
It would be:
background-image: url(Your URL);
background-attachment: fixed;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.
Are you sure 1701 is the page ID? Feel free to link us to that page and we'll take a look.
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);
}You're great, works like a charm. Thank you, :DM.
No problem :)