Dreamweaver CC – How to Add Images and Backgrounds [COMPLETE] – Howtoshtab – how to, lifehacks, tips and tricks

Hello! Welcome to this video! Here we will see how to add images and backgrounds with Adobe Dreamweaver CC. Leave feedbacks to correct mistakes in pronunciation. If you followed the previous videos in this show, you are able to make this simple basic structure.

If you find it difficult, you can download it in the video description. To understand better, we added visible black borders to all the Div Tags. First of all we must distinguish images from backgrounds in Dreamweaver. Images are considered files contained inside a Div Tag. In this case, if the Div Tag box has its size changed, the image will maintain its size. A background is different, since it is an image that always covers the Div Tag fully. So if the Div Tag changes size, the background follows. Let’s have a look. An image or any photo or caption can be imported normally on the Design View. For example you can copy and paste there, or drag the file itself. You will see that the text can’t be on the image, unless you use new lines.

The image imported is indicated through the img src=… command, with the width and the height in pixels, that can be edited dragging the small squares of the image. You can move the image selecting and dragging it. To delete the image, simply select and cut it, using CTRL+X. The Property Inspector shows all the image properties. Simply select it when the Live View is off. Src sets which image. Link adds a web address of destination when clicking on the image. On the right, W and H represent the size of the image. Close the lock to keep the aspect ratio constant. Next to Edit, you can apply simple editings on the image. For better ones, you can use Photoshop clicking on the PS icon, if you have it installed. Mind that all these editings are permanent, so you may need to use Edit Undo to come back.

Alt stays for Alternative Text, that is a piece of text that replaces the image in case it can’t be shown for any reason. For example we can import an image to make the banner. Remember to set the right layout in the end. You can set the layout properties of the image selecting it and then going to the plus in the Selectors section. To get help in positioning, check the related video in this show. Let’s see the background. All its options can be found selecting the Div Tag interested from the Selectors list and going to Background, the forth icon. For example, you can put a simple solid color. This color will affect also the Div Tags that have no backgrounds and are placed on the colored Div Tag. To add a background, you can also use a photo. Under background-image, go to url and browse the image through the folder button.

This will cover any solid color put before. You can put a gradient as well. However, the size of the image used may be wrong. So simply go to background-size, and choose pixels to start setting the proper size. Remember to have Live View on. Since it is a background, the text of the related Div Tag is shown on it. Plus, if you add a background to another Div Tag that is on it, this will be shown above. You can add backgrounds to paragraphs and headings as well, although all the line will be covered, without any control to the actual length. Must we use an image or a background? The first case is better in case there is no text inside, or you don’t need to adapt the image size when the Div Tag changes size according to the user’s screen, for example when the image is a caption of something. If you need to create a website that is flexible in front of different screen sizes, it is better to use backgrounds mostly.

Knowing this, we can simply import an image for the banner, a background for the Background Tag, and, if you like, a delicate solid color for the columns. This is up to you! Keep in mind that you may need to adapt layouts in case you import images. We can also import smaller images, that may represent the content of each column. Practice! That’s all! Watch the following video to know how to place objects and rule the positioning! Thanks for watching..

You may also like