How do I prevent my background image from tiling?

  • 0
  • 9
  • Question
  • Updated 3 years ago
  • Answered
Any image you import and set as a "background" image will tile, or repeat continuously depending on how large the viewer sizes their web browser. If you wish to prevent the tile effect. You will just set the background to a solid color, then import the background image as a regular image, instead of background image. If you already have other elements on the page, you will also need to layer the image so that it is behind the other elements.

1.  Change Background to solid color, by clicking Page Settings > Background, Links, Footer   and select a color from the drop-down, and then the Save button.



2.  Next import the new image by clicking Insert > Image.



3.  You'll be given options to import from your computer, the image library, or you can select another image already in the file manager.



4.  The final step is to size, and position the image in the desired location.  If it's covering other elements on the page, you will need to layer it to the back. This is easiest done by "right-clicking" on the image, then choosing Element layer order > Send to Back.  You can also click the Send Backward button multiple times until it's layered to the back.
Photo of Mike F.

Mike F., Alum

  • 184,338 Points 100k badge 2x thumb

Posted 4 years ago

  • 0
  • 9
Photo of 3gdesignsltd3569

3gdesignsltd3569

  • 82 Points 75 badge 2x thumb
This reply was created from a merged topic originally titled
How do I get my imported background photo to NOT show up as tiles?.


I want one only image to show up as my background, but I'm getting the "tile effect".
Photo of HabitatWayne

HabitatWayne

  • 182 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled
How can I make my page background stretch to cover instead of tile??.
Photo of Jory5294

Jory5294

  • 60 Points
So when I import an image as my background, it only goes to the width of my page and not the browser. As in, I still have large white edges on both sides. How can I stretch my image across the whole viewing area like the background does?
Photo of Jamie9024

Jamie9024

  • 110 Points 100 badge 2x thumb

That looks like it did it. Thank you so much:)


Photo of Jamie9024

Jamie9024

  • 110 Points 100 badge 2x thumb

Hey William,

That did work for the homepage and it is set to apply to all pages but all my other pages are still tiling. Any ideas?

Photo of Drew N

Drew N, Community Manager

  • 251,748 Points 100k badge 2x thumb
Code overrides the template by page. You can't place code in the master page header. You will need to copy/paste the code into the head section of each page.
Photo of Melissa6304

Melissa6304

  • 92 Points 75 badge 2x thumb
William, 
how can i get scrolling content with a static image; for example in the end of this youtube video

https://www.youtube.com/watch?v=F2H1eqag2XM
Photo of William S

William S

  • 18,858 Points 10k badge 2x thumb
Melissa,

Try putting the following code in the HTML Head tag section while having an image selected to be the background. Note: This will stretch the image to be the background, so if the image is small it may appear pixilated, and will need to be placed on every page.. I would recommend doing this with a large photo. 

<style>body {      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
}
</style>
Photo of Olivia6713

Olivia6713

  • 102 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled
I wish to put one photo on my background, not tiled.


When I upload a photo to my background, I get a tiled look and not one photo
Photo of Mike F.

Mike F., Alum

  • 184,338 Points 100k badge 2x thumb
Hi Olivia6713,   To prevent the tiled look, you'll either need to size the image large enough so that it does not repeat, or follow the steps above and import it as a standard image rather than a background image.

Mike
Photo of Lee4458

Lee4458

  • 82 Points 75 badge 2x thumb
This reply was created from a merged topic originally titled How do I create a back ground image that is not tile ? I want the whole image str....
Photo of Jennifer3538

Jennifer3538

  • 1,772 Points 1k badge 2x thumb
What is the image size needed to prevent tiling?
Photo of Jennifer3538

Jennifer3538

  • 1,772 Points 1k badge 2x thumb
I understand that if I add it as an imagine and such it will not tile, however then you change the size and it ends up looking odd. So I need to upload an image that is the same size as my page? 
Photo of Drew N

Drew N, Community Manager

  • 251,748 Points 100k badge 2x thumb
Yes. If your image is smaller than the page, then it will tile, unless you use code, then you can use any size image and tell it not to tile.
Photo of Jennifer3538

Jennifer3538

  • 1,772 Points 1k badge 2x thumb
How in the world do I find out how long my page is? I found the width, but not the length. I appreciate your help. I know nothing about writing code... 
Photo of Drew N

Drew N, Community Manager

  • 251,748 Points 100k badge 2x thumb
The difficulty is that the length of the page can changed for each page, unless you pick a length and then force the page content to be within your chosen length.
Photo of Jennifer3538

Jennifer3538

  • 1,772 Points 1k badge 2x thumb
Ahh. Alright. 
Photo of John9449

John9449

  • 82 Points 75 badge 2x thumb
This reply was created from a merged topic originally titled I don't want my wallpaper to be tiles. How can I make it just one large image?.

The generic photo I want to use as a background shows up as tiles. I want it to be just one large background photo. How do I accomplish this?
Photo of William S

William S

  • 18,858 Points 10k badge 2x thumb
Please see the article above for how to make the background not tile.
Photo of Melissa6304

Melissa6304

  • 92 Points 75 badge 2x thumb
This reply was created from a merged topic originally titled Full Page Background?.

how can i set the background image to be full page instead of it tiling over and over again.
preferably a static background that doesn't scroll?
Photo of lee butters

lee butters

  • 112 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled Need to have auto re-sizing of background image for multiple monitor resolution.
Photo of William S

William S

  • 18,858 Points 10k badge 2x thumb
You can try this and see if it will work for you. Select the image you want as the page background. This will make it tile inside SiteBuilder. Then add the following code to the HTML head tag section. Publish the site and see if the background still tiles on the live site. 
<style>body {
      background-repeat: no-repeat;
      background-size: 100%;
}
</style>
Photo of dale9470

dale9470

  • 82 Points 75 badge 2x thumb
This reply was created from a merged topic originally titled Frustrating alignment, and sizing issues.

I have brought in my own background graphics for my site but it duplicated half of my background again at the bottom and some more to the right side. How do I get rid of what I need to get rid of? Also when I preview it it cuts off even part of the bottom of my home page I do want to have show. How do I make that show too?