May 042015
 

Last Updated: June 18, 2016

KompoZer Insert Header Image shows you how to insert a header image to the header.

Latest News: I have added a new link to the menu.

In this lesson you will learn how to insert a header image to the header and add the correct image path whether it be relative or static.

KompoZer Insert Header Image Steps

Step 1 ) The following image shows you where you need to click with your left mouse to select <div#header> tag as shown in arrow 2 below.

Note: Make sure you click inside the div tag as shown in arrow 1 below.

kompozer-insert-header-image

Step 2 ) Click on Insert -> Image to search for the image you want to insert. See image below.

kompozer-select-insert-menu

Step 3 ) The following image Image Properties -> Location allows you to set up the following options.

  • Image Location = Click on the folder to browse for the image location or you can type the URL path i.e. http://yourwebsite.com/images/imagename.jpg
  • URL is relative to page location. In this example the relative path is images/kompozer-header-mbrsolution.jpg (This option is optional. For this example I selected URL is relative….) I don’t encourage relative path. It is always best to select a static path.
  • Tooltip
  • Alternative text = For this example I added an alternative text KompoZer Header Image
  • Don’t use alternative text
  • Image Preview = Notice the image size 990 x 202
  • Advanced Edit
  • Click on OK when you finish adding your image

kompozer-image-selected

Step 3-1 ) The following image shows you the path added when you don’t select URL is relative to page location. The following path is added file///E:/….. because this was added from a local laptop. If you were working from a server then you might choose a static path http://yourwebsite.com/images/imagename.jpg. (Note: Your path will be different.)

kompozer-url-not-relative

Step 4 ) The following image shows you the header image added.

Note: The image is sitting nicely in between all the div tags. Remember to resize the images to fit in nicely.

kompozer-image-added

Click on the following URL Borders Tutorial to continue.

Go Back To KompoZer Tutorial List:

Manuel Ballesta RuizManuel Ballesta Ruiz is a web developer, Blogger and WordPress Enthusiast.

  2 Responses to “KompoZer Insert Header Image”

  1. bookmarked!!, I really like your website!

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

The following GDPR rules must be read and accepted:
This form collects your name, email and content so that we can keep track of the comments placed on the website. For more info check our privacy policy where you will get more info on where, how and why we store your data.