Jump to content

How can I add an image behind the body text on one page? I am using the Montauk template.

Recommended Posts

  • Replies 4
  • Views 10.6k
  • Created
  • Last Reply

Jennifer,

Since HTML5 you can not use the background attribute anymore, so you'll have to use some CSS.

You'll have to add a code block and add some CSS.

First your CSS:


<style> 
#example1 {
   background-image: url(https://images.unsplash.com/photo-1436262513933-a0b06755c784?q=80&fm=jpg&s=943d98ea03caf20350b6e014b2a49890);
   background-repeat: no-repeat;
   padding: 15px;
}
</style>

Then some HTML in the code block, for example:


<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>


Just in case you're not familiar with HTML and CSS the opening div should have an "id" that you'll refer to in your CSS sheet (or inline if you wish). Make sure to add some padding, otherwise your text will touch the borders of your image.

Let me know if this was helpful : o)

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.