Sometimes we need to use an image as background of site, but the image have some dimensions and it can’t fill the entire browser window, and it won’t be adjusted at any screen resolutions.
The reason for this behavior is that the picture is used as background-image for “body” tag, and a background image wasn’t able to fill the entire surface of a container before CSS3. Pictures used in <img> tags can be re-dimensioned by width and height attributes, but a background don’t have such attributes. So, if the image is larger than dimensions of container, part of image will fill it’s container, if not – can use tiling for filling the surface, or the image will stay somewhere on the surface…
But is easy enough to solve the problem, based only on what WordPress and Suffusion offer.
1. By CSS3 – the easiest way. Upload your image at Appearance -> Background. At Suffusion Options -> Back-end -> Custom Includes -> Custom Styles add a single line:
|
1 |
body.custom-background {background-size:cover;background-attachment: fixed;} |
With CSS3, for the same selector (body.custom-background), can use multiple background images, as you can see and learn at CSS3 Info.
Pros: The method can be used virtually in any theme – body.custom-background is a WordPress selector, so, will work on any WordPress site. If your theme don’t have a section for defining your styles, can edit the theme stylesheet, or, better, can install a plugin which let you to add or change theme styles – I personally prefer My Custom CSS by Salvatore Noschese (DarkWolf).
Cons: The background-size property is supported in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+, so, in older browsers the image will not be adjusted.
2. The old school way. Do you remember? We can redimension an image used in foreground (in <img> tags). Copy header.php from Suffusion folder to your child theme folder. Open the new file and add a new div, which will contain the full image, immediately before the tag <div id=”wrapper” class=”fix”>. The new code need to look like:
|
1 2 3 4 5 6 7 |
?> <div id="background"><img src="https://path-to-background-image/image.jpg" alt="You Choose" style="width: 100%; height: 100%;" /></div> <div id="wrapper" class="fix"> <?php |
As you can see, we already add the image with adaptable width and height. Now remain only to format the new div. Go at Suffusion Options -> Back-end -> Custom Includes -> Custom Styles and add this lines:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
html, body { min-height: 100%; height:auto; margin: 0; padding: 0; } #background { width: 100%; height: 100%; top: 0; bottom: 0; position: fixed; z-index: 0; } |
Done, you have now a fixed background constructed from only one image which will be adjusted for any screen. Of course, the background need to be fixed, otherwise the height of picture will be as the viewport height at page loading, but cannot be adjusted anymore when scroll the page. But is a good sense restriction, images can not be stretched no matter how much.
Pros for the method? The background will be filled in all to-day browsers… Cons? Maybe the method is a little difficult as implies to edit a php file…
But if you use a child theme is safe to edit the file and to revert to the original file from parent folder if something goes wrong… Not saying that the header.php file from your child theme will stay safe and will produce the intended result even if you upgrade Suffusion. And how hard can be to have a child theme of Suffusion? See here: https://drafie-design.nl/3-5-easy-steps-for-creating-a-child-theme-of-suffusion/
