Great! looks like its working for mobile, but not working for full screen. Maybe I can size the .png differently? any size tips to make this work?
Topic summary
A user seeks to add a custom wavy background image to their Blockshop theme footer, replacing the default straight line design. They have the image prepared but need guidance on implementation.
Initial Attempts:
- Multiple helpers provide CSS solutions, but the user struggles to locate the correct file paths (base.css, section-footer.css)
- First approach using Custom CSS in Theme Settings doesn’t produce visible changes
Working Solution:
After sharing the website URL (www.vision-bored.com), a helper provides CSS code for the theme.css file that:
- Adds the background image using
.section--footer:beforepseudo-element - Initially works on mobile but not desktop
Final Fix:
A media query targeting screens 768px+ is added to adjust:
- Top margin: 250px
- Top position: -250px
- Height: 20rem
The user confirms this solution works successfully across all screen sizes. The discussion is resolved.
