Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
How can I set a background Image for a single of my pages and not affect the others???
Hi Artvaz
Please add the following to your custom CSS
.page-id-253 #main { background-image: url("full/path/to/image"); background-size: cover; }This will add the image to the linked page only. To add to any other page you will need to find the page id. Using any modern browser, open the Developer tools (F12) or view the page source. In the body tag you will find the page ID in the class tag.
If you need to alter the transparency please add this to the above snippet
Adjust as necessary.
Let us know how you get on
Magus
It worked on the page 253 but it didnt on the home page
[.page-id-1573 #main {
background-image: url(“http://qpuntto.com/wp-content/uploads/2015/05/restaurantes-12-toluca-metepec-qpuntto1.jpg”);
background-size: cover;
}]
Do you know whats happening why it is not showing it????
It worked on the page 253 but it didnt on the home page
[
.page-id-1573 #main {
background-image: url(“http://qpuntto.com/wp-content/uploads/2015/05/restaurantes-12-toluca-metepec-qpuntto1.jpg”);
background-size: cover;
}
]
Do you know whats happening why it is not showing it????
Hi Artvaz
This is not working because it is getting overridden by the settings in Appearance->Customize. You can resolve this by altering the CSS to this
.page-id-1573 #main { background-image: url("http://qpuntto.com/wp-content/uploads/2015/05/restaurantes-12-toluca-metepec-qpuntto1.jpg") !important; background-size: cover !important; }Magus
how can I set that the background width fix with the screen of the desktop or device the user is using?
Hi Artvaz
Unfortunately you can’t. There is no way in CSS to set a dynamic height to a background image. If you used an image which tiled well top to bottom then you could do it by changing the background size attribute to ‘contain’ instead of cover which would scale the image based on the width of the device and force the image to tile vertically on smaller screens.
Magus
thanks for that