Jump to content

Avenue: How do I write CSS to change the background image for each page?

Recommended Posts

I would like to have a different background image for each page of Avenue. I contacted support earlier and they told me I'd have to do it with CSS and gave me a link to a similar question for Aviator.

The HTML doesn't look like the example given in the link answer. I am not a developer but I do know how to write simple CSS. However, it doesn't seem to be working.

Any suggestions?

Link to comment
  • Replies 2
  • Views 2.5k
  • Created
  • Last Reply

I figured it out!

The page IDs are at the end of a very large body tag and looks like this:


#collection-565e36d3e4b0f18e76b57af4

In order to view the code, I had to copy the page url up to "config#" and paste in a new tab. Maybe there is an easier way, but this works.

Once I found that, I uploaded the files I wanted to use as background images using the "Manage Custom Files" tab at the bottom of the CSS Editor. Once uploaded, you can click on the file name and the entire url automatically gets pasted into the editor. It should look like this:

http://static1.squarespace.com/static/56569a8be4b0acafe107e31e/t/565e46cde4b0c49af4ad2c1b/1449019085046/branchflower-4X-3-640.gif

Then all you've got to do is plug it in, like this:


#collection-565e3bf7e4b0dd08349ac558 {
background-image: url("http://static1.squarespace.com/static/56569a8be4b0acafe107e31e/t/565e46cde4b0c49af4ad2c1b/1449019085046/branchflower-4X-3-640.gif")
}

For some reason I can't include the hastag in front of "collection....." here but you need a # at the beginning to reference the ID. That should do it. One short note, though. The syntax in the example for a similar question for Aviator that I reference in my question is wrong. It shows apostrophes where there should be quotes. It won't work if written with apostrophes.

Hope this helps someone else.

Link to comment
  • 3 years later...

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.

×
×
  • 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.