Jump to content

How to add an adaptive image along the length of my website including the header

Recommended Posts


I'm working on a site for a client and have an idea of how I'd like the site to look but no idea how to execute. The idea is to use her logo and bars motif along the right side of the website. I've made a version of this by layering a transparent image in fluid engine, and would like some help with the following:

At minimum, is there a way to extend the image from the section up into the header so that the bars start at the top of the page rather than beneath the header?

  • Current
  • Goal (photoshopped)

At most (and this will likely take custom coding that I'd love to contract out if possible), is there a way to have the bar motif live separately from the sections in order to avoid:

  • Bars getting crunched depending on the height of the section
  • Manually disabling the image animation when the page loads so that it doesn't flow in like the other images
  • Having a black PNG and a white PNG to use with respective sections

Thanks for any help and/or leads. Website: https://juliegraceburke.squarespace.com/ Password: JGB

Link to comment
  • 2 weeks later...

Thanks @tuanphan for checking in. I was able to achieve option 1 using the following, with multiple entries to accommodate for different screen sizes.

@media screen and (max-width:765px) and (min-width:300px) {#block-yui_3_17_2_1_1685395718986_2847 {
    margin-top: -100px;
    height: 120%;

I only applied the code to the homepage image for now since It would end up being a lot of CSS to do every screen size for every page, so ideally still looking for an option 2.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.