Hi there. I am working on as Squarespace site and need help placing a background image on a specific part the index page. For the life of me, I can’t find the right selector or figure out how to do this.
Here is the trial site (just click on guest access). https://purpose-fifth.squarespace.com/
I am trying to put this image in the background of the “Menu” part of the index page only. The index is parallax.
I am pretty sure I have the background image part right, which is this:
selector?? {
background-image: !important url(“https://static1.squarespace.com/static/5afdce2955b02c412a213e9b/t/5b286a950e2e72a750b091dc/1529375385635/stripes-light.png”);
}
Thanks for your help!!
I used right click-> inspect element to pull up the HTML on the page, and I think you want it applied to the <section>
tag with the ID menu
. To do this, it’s simply
section#menu { background-image: !important url(“https://static1.squarespace.com/static/5afdce2955b02c412a213e9b/t/5b286a950e2e72a750b091dc/1529375385635/stripes-light.png”); }
Tell me if that works for you!
Tags like div
and section
are selected just by typing div
and selection
. You can select an ID by prefacing with a #
, and a class with a .
.
So, if you want to select all the ID’s menu
, #menu
will work. If you want ONLY divs with that ID, you can select them like div#menu
. If the class was menu
and not the ID, you would use div.menu
.
Thanks for your reply. Doesn’t seem to work. That section seems to have a div number: id=“yui_3_17_2_1_1529616216187_515”. There is also a parallax number. Do I need to specify the unique div number?
Thanks for your patience, as I am a novice at CSS.
OK, #menu seems to work when I change just the color! So I know that works now, but I can’t get the background to work.
I figured it out. Only single quotes work for the background image CSS, not double.