When you use shapes on a centered webpage with a gradient background, a box may appear behind the shape when you resize your browser:
This occurs because of the way Visual Site Designer works with images. To reduce load times, the program slices images and adds part of the background to the image. This works fine when you have a solid background, but if you are using a gradient, the result is this "box" (which is actually the part of the gradient background where the object was originally located) that appears when you resize your browser window.
There are a few ways to work around this issue:
- Use a transparent .png instead of a shape. You can create this image file in your favorite image editing program and then add it to your webpage using the Picture tool.
- Do not use a gradient background. A solid or image background will display correctly at all times. To change the page background, open the Page Properties window and use the options under the Page Background heading.
- Do not center your page design. A centered design changes its location depending on the size of the browser window. When your shape stays in place, it looks fine; it's only when it moves that the box appears. To uncenter your design, open the Page Properties window and uncheck the Centered checkbox.
- Choose a solid color to extend beyond your page border. This ensures that your design stays in one place even when the browser window is resized. To change this setting, go to Settings > Background Fill Properties and select Solid Color. You can then click the color swatch to choose the color that will appear outside the border of your design.