Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


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?

Edited by edokken

Share this post

Link to post

2 answers to this question

Recommended Posts

  • 0

I figured it out!

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


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:


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.

Edited by gprobinson

Share this post

Link to post
This topic is now closed to further replies.

  • Create New...