Single background image across all rows / the whole page?
-
Hi guys
Thank you SO much for Lay Theme - it's absolutely brilliant!
I am trying to put a background image across one of my pages.
E.g. having these flowers below as one single image down the whole page, rather than having different images on each row.
I've searched your website / this forum and can only see how to set each row with a different image, or set a background image for the whole website in "Customize" → "Background". Both of which aren't the effect I'm looking for.
Is this possible?
Thanks so much :-)
Charley -
Dear Charley
@charleyray
This is possible 🌝
When adding an Image to the Gridder, you can 'right-click' either the Element or the Row and set an "HTML Class or ID" :
In the example above I have filled the row with my desired image and given it the custom Class name "special".
Then within:
Customize > CSS
Or:
Lay Options > Custom CSS & HTML > Custom CSS
I have added the following code:
.special img{ position:fixed; width:100vw; height:auto; }
This targets the row with the class "special" and tells the Image inside to follow these CSS Rules.
Now the result:
This Image of Clouds will remain in the background as i scroll up and down the page and keep a width of '100vw' ( 100% of the browser's viewport width).
You may wish to add the CSS 'z-index' property to the above code if certain elements are hidden behind your image:
Additional link that may aid you:
http://laythemeforum.com:4567/topic/6407/different-background-images/4?_=1611130159766
Best wishes Charley and hope this helps you, Thank you for the kind words about Lay Theme and good luck! ✨
Sincerely
Richard
-
@Richard said in Single background image across all rows / the whole page?:
This targets the row with the class "special" and tells the Image inside to follow these CSS Rules.
Amazing - thank you so much Richard!!!
That's perfect. -
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it