How to Stretch an Image Across the Content Area of Your Website Using DSS

When you add an image to your website using DSS, you may want to extend it the entire width of the page. This is a common practice used by web designers because not all images fit properly in the website space. You may want to stretch an image for aesthetics; because you want the image “blown up” to appear in a much larger size; or because you want the image to appear as a banner at the top of your page. Extending an image in this way can be an effective way to draw the reader’s eye to an important visual that complements your content. Because stretching an image can sometimes distort its appearance, you want to retain the appearance of the photo, illustration, or image in its initial form.

How to Stretch an Image Across the Content Area

Step 1: Evaluate if your image is big enough to stretch across the website page. You need to size the image to fit before you upload it to DSS. The standard width for a two-column site is 640 pixels (px) wide, and 980 px for a single column site. If you need help with resizing, read through our instructions on this process.

Step 2: Log into DSS, and display the content where you want the image to be added.

Tip: You can use the Search and Edit option under any of the Site content topics to find the content you’re looking for. Or you can use the orange Search Items magnifying glass icon at the left side of the screen.

Step 3: Once the desired content displays, click the location where you want to insert the image. In the example below, the cursor is placed at the front of the first sentence.

Position your cursor at the anchor point for the image.

Step 4: To select the image you want to place, click the Image icon under the Rich Content Editor heading. This icon is designated by a picture of a mountain. If you mouse over the icon, the word “Image” displays.

The Image icon allows you to select the picture you will place on the page.

Step 5: Click the Browse Server button next to the URL box.

The “browse server” button is next to the URL box.

Step 6: Click the Upload icon at the top of the window.

The Upload icon allows you to move a picture from your computer to the online image collection.

Step 7: Navigate to the location of the image saved on your computer, and double-click it.

Step 8: Once the image uploads into the Image Properties dialog box, choose the Advanced tab.

Step 9: In the Style field, type width: 100%.

Specify a width of 100% to have your image fit across the screen.

Step 10: Click the orange OK button. Your image is stretched across the website page without distortion.

A full-width image adds visual impact to your text.

As always, Foster Web Marketing is dedicated to your success. If you need any help or feel something is not working properly, please contact us using the DSS Need Help button, emailing [email protected], or calling 888-886-0939. We will be happy to assist you!