Add Image/Picture Behind a TEXT Block

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.
 

Thanks for the amazing tip!

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

Here this will tell you a lot. This is a 7.0 video, but 7.1 link is here as well under the video.