Styling specific pages or devices (like BG Image)
Sometimes you need to change styling for specific pages or devices.
As an example, this tutorial will detail how to change areas background attributes in the following situations
- Different static pages
- Different WordPress pages
- Different devices
- Any combination of the above
- Portrait and Landscape
{background-image:url(ImageUrl);}
Now there is usually more to setting a background image than just specifying the image itself. You usually need to specify if it is repeated, its position in X and Y and eventually its size.
You should review a CSS refernce site like below for all the available options and eventually make a more complete rule.
https://developer.mozilla.org/en-US/docs/Web/CSS/background
For example to specify a background image that will not be repeated, centered, and scaled to always cover the whole are the rule would be
{background:url(ImageUrl) no-repeat center;
background-size:cover;}
Note:
When creating rules (below) to change styling attributes on different pages or devices, you only need to specify what changes from the global rule in place. You only need to specify all needed attributes, if there is no global rule in place..
Now whether you are using a "Plus" background image setting or your own custom CSS rule in a CSS+ box, below are the ways to change these on specific pages or devices.
Different static pages
First you will need to determine what is the selector of the area you want to cover. There is a Guide article giving you the main ones belowSite HTML Code Layout OrganizationFor areas not covered in that article, you will need to inspect your page with your browser developer tools or ask on the Forum For example, the rule to set a background image on the Content area would look like
#content {
background:url(ImageUrl) no-repeat center;
background-size:cover;
}
Now to make the CSS rule specific to a page:
If you have "Plus", you can simply drop your background image rule(s) above inside the Page editing page "Per Page Style Box"
If you do not have "Plus", you will need to make one rule per page and place them in the Global Custom CSS rule box, adding the page id selector at the beginning.
For example, changing the background image of the Content Area on the page with the ID 1234 would be
.page-id-1234 #content {
background-image:url(ImageUrl);
}
Important notes:
- The page ID class is located on the <body> tag of the page, so if you are trying to change the overall background image which is set on the body tag, you will need to attach the page id selector and the body selector.
The rule would look like
body.page-id-1234 {
background-image:url(ImageUrl);
}
- If you use The "Plus" Option "Full Screen Site BG" option, it adds the image on the <html> tag which is before the <body> tag. This means that if you add a page specific background image on the body it will load on top of the html one slowing the page load.
If you are going to override the overall BG image on some pages, you should use the "Site BG" option instead as to not duplicate background images
Different WordPress page types
In some cases, instead of targeting specific static pages, you may want to target a type of page. In that case, you need to figure out the selector for the page type by inspecting the<body> tag of your page using your browser developer tool.
Once you do, you will need to place the rule in the Global Custom CSS rule box.
Below are a few selectors you can use
.home -> Home page selector
.archive -> Archive page selector
.blog -> Blog pages
.category-categoryname -> Specific category page
.single -> Single post pages
For example applying the previous background rule to the Content area of all Single Post Pages would look like
.single #content {
background-image:url(ImageUrl);
}
As before if targeting the overall BG body element, the selector must be attached to the page type selector
body.single {
background-image:url(ImageUrl);
}
Different Devices (sizes or types)
If you whish to change an area background for a specific device size or type, you will use the Device selector class instead of the page selector. All these classes are found in the Help under "Weaver Xtreme Helper Classes" The main ones are Sizes .is-desktop - Desktop (wider than 768px) .is-mobile - Small-tablet or Phone (under 768px wide) .is-smalltablet - Small tablets (between 580px and 768px wide)- note: many phones will be considered smalltablet when in landscape view .is-phone - Phones (under 580px wide) - note: usually when in portrait mode only Type .is-ios - an iOS device: iPhone, iPod, iPad .is-ipad - an iPad .is-ipod - an iPod .is-iphone - an iPhone .is-android - any Android device .is-windows - any Windows OS .is-macos - any Mac OS So for example, applying the Background Image rule to the Content Area on Small Tablets will look like
.is-smalltablet #content {
background-image:url(ImageUrl);
}
As before if targeting the body element, the selector must be attached to the page type selector
body.is-smalltablet {
background-image:url(ImageUrl);
}
Notes:
Combining selectors
You can of course combine page specific with device specific, but these selectors being on the same <body> tag, they will need to be attached.
For example, applying the background to the Content Area of the page 1234 on phones would look like.
.is-phone.page-id-1234 #content {
background-image:url(ImageUrl);
}
and targeting the Site BG (body) would look like
body.is-phone.page-id-1234 {
background-image:url(ImageUrl);
}
Portrait and landscape
Sometimes optimizing the look of background images has more to do with the ratio / orientation.
If you are setting a single image to cover the whole background area, when the ratio of the area is different than the ratio of the image, cropping will occur.
For example, using a rectangular Landscape image to cover a rectangular Portrait screen will mean a lot of the image sides will be cutoff.
If optimizing the visible part of the image is important, you may need to use a different image for each orientation.
So start by applying a Landscape image globally, then use a rule like below to change that image for a better suited Portrait image when on Portrait screens.
@media screen and (orientation:portrait) {
body {background-image:url(PortraitImageUrl) !important;}
}