Jump to content

Add Image/Picture Behind a TEXT Block

Recommended Posts

Here's how to add an image behind text in a Text Block. 
You may wish to be aware of the contrast between the text and the image behind it so that it is readable. White text on dark image, or vice versa, for example. Consider making the background image out of focus, darkening or lightening the image, or adding a semi-transparent white or black layer to the background image. 

And finally, before you dig in, there's a good chance things won't work the way you want them to on your first try. Don't let my instructions be your only guide. Look around the internet for other solutions that may be better or add more clarity for you. 

Best of luck. And HAVE FUN!

-------------------------------------------------

Go to PAGES
At bottom, click Add Section
Under Layouts choose Blank Page
Click cog to right of the New Page item
Go to bottom of pop-up and turn off Enable Page (This keeps the page out of public view)
Add the picture you want to show up behind your Text Box (This becomes a "holder" page for that image - or images - you want to put behind the text in your Text Block)
Save this page
Right click on the image and select Copy Image Address
Paste that image in the address bar in another tab in your browser and the image should show up. Keep that tab available
Go back to your home page and find the Text Block under which you want the image to appear
Click on the Text Block as if to edit it
Choose Settings
Under General, make sure to give a name to that section: Page Title, Nav Title and URL Slug
Close the pop-up
In the menu on the left, select Design>Custom CSS
In Custom CSS, paste the following in the window:

#thenameofthepageyoujustcreated {
  background-image: url("thehyperlinkyoujustcopiedintothenewtabinyourbrowser");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
  background-size: cover;
}

Click SAVE at the top of that section and you're done.
 

Link to comment
  • 1 year later...
  • Replies 3
  • Views 11k
  • Created
  • Last Reply
On 10/16/2019 at 8:02 PM, fluffy said:

Here's how to add an image behind text in a Text Block. 
You may wish to be aware of the contrast between the text and the image behind it so that it is readable. White text on dark image, or vice versa, for example. Consider making the background image out of focus, darkening or lightening the image, or adding a semi-transparent white or black layer to the background image. 

And finally, before you dig in, there's a good chance things won't work the way you want them to on your first try. Don't let my instructions be your only guide. Look around the internet for other solutions that may be better or add more clarity for you. 

Best of luck. And HAVE FUN!

-------------------------------------------------

Go to PAGES
At bottom, click Add Section
Under Layouts choose Blank Page
Click cog to right of the New Page item
Go to bottom of pop-up and turn off Enable Page (This keeps the page out of public view)
Add the picture you want to show up behind your Text Box (This becomes a "holder" page for that image - or images - you want to put behind the text in your Text Block)
Save this page
Right click on the image and select Copy Image Address
Paste that image in the address bar in another tab in your browser and the image should show up. Keep that tab available
Go back to your home page and find the Text Block under which you want the image to appear
Click on the Text Block as if to edit it
Choose Settings
Under General, make sure to give a name to that section: Page Title, Nav Title and URL Slug
Close the pop-up
In the menu on the left, select Design>Custom CSS
In Custom CSS, paste the following in the window:

#thenameofthepageyoujustcreated {
  background-image: url("thehyperlinkyoujustcopiedintothenewtabinyourbrowser");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
  background-size: cover;
}

Click SAVE at the top of that section and you're done.
 

what if we ant to move text behind the image

 

Link to comment

Archived

This topic is now archived and is 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.