Replace whole landing page background with image

Developer Support CMS Development
1

Hi all,

Sorry if this has been answered elsewhere, I’m new to the forums and couldn’t find exaclty what I’m looking for. I need to upload a custom design (see attached) to replace the entire landing page background. In the templates options, there’s only background color and the ability to edit sections piece by piece; I want to replace the whole thing and add in text boxes where needed. Is there a way to delete all contents and start with a blank area, or what other approach should I use?

Template_landingpg2.jpg
Template_landingpg2.jpg328×440 102 KB

Thank you!

2

Hi there!

You should be able to do this using CSS background images. “Body” targets the whole page so if you add in the following code:

body {
 background: url(your image url here);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center center;
}

with your image URL in the area in pink, it should apply to the whole background.

Note that if you’re applying it to the template it will apply to all landing pages using that template.

For just a particular template/page, the easiest way would be to add the code above to a <style> section HTML head. In a template this is the “Additional <head> markup” on the right-hand sidebar and on a page you can follow these instructions. With the <style> section this looks like this:

<style>
 body {
 background: url(your image url here);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center center;
 }
</style>

I hope that helps!

|300HubSpot Design / Development / Automation

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

3

Hi Stephanie,

Thanks for taking the time to reply! I entered the code and entered my image URL (tried it two ways, with a DropBox URL and Imgur), it isn’t doing anything on the page. I’m using the VAST theme for this:

628×285 26.1 KB

Just making sure it’s entered correctly, since the template background hasn’t switched to my image.

Thank you!

4

That link is for the page where the image is displayed, if you link directly to the image (Imgur: The magic of the Internet) it will appear.

A few notes on that image:

1/ I’d recommend downloading any image you’ll use, uploding it to HubSpot’s File Manager and getting the link from there rather than an outside link

2/ For a background image, you’ll probably want something a little bigger (1200px instead of 300px).

3/ It is extremely difficult to get your content to squeeze inside of those boxes on a responsive site as the content adapts to the screen size. I’d recommend instead having some generic pattern as the background and using background colours and borders around your content for the boxes.

4/ I typically go with those parameters, but there are others:

  • background-size: cover; will cut parts of the images to ensure it fits best without being skewed but you can test with other options (check out the property values here).
  • background-position: center center; centers is both horizontally and vertically but you can play around with other options (check out the property values here).
  • You can also set background-repeat to repeat.

|300HubSpot Design / Development / Automation

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

5

Thank you, that definitely helped!

-LT