CSS - Can you replace the header image of a CSS design?

The idea is to import, modify then upload a new header image to your Actinic site and apply it to your site design.

Prerequisites: You must have imported an Actinic CSS site design into your Custom Designs to be able to modify the header. The procedure is described in detail in How do I customise my CSS Design?

We also suggest you read Advice on modifying a CSS Design before beginning this exercise.

Let's imagine you want to modify the header image of your site and that you are not a CSS expert. By simply editing the image used in your site design you won't have to change the settings in your Style Sheet.
 1) Copy your site's current header image

Open a preview of your site in the Mozilla Firefox browser, then right-click on the header image and choose "View Background Image" in the context menu to open the image file in the browser window.
You can now right-click on this image and choose "Save Image As" to save the image onto your computer. We recommend a header width of 980 pixels which corresponds to the average screen resolution (1024 pixels on a 17" screen).
 2) Modify the image

In this step you will integrate your logo, the colours, artwork or photos you want displayed on every page in your site.

Open this image file in your favourite photo retouching software and change it to suit you. Be careful not to change the dimensions of the original image (height and width in pixels), otherwise you would need to change your style sheet settings accordingly.

A useful tip: Gimp is an image manipulation program offering similar functionality to Photoshop but with the added advantage of being GNU free software that you can download free of cost.

Save your new image in a web friendly format such as GIF, JPG or PNG. If your software offers the option "Save for the Web", we recommend using this tool to save your image.

Be sure that your image's file name is web-compatible (no spaces, accents, apostrophes, quotes, etc.). For ewample: my-header-image.jpg. If you do not respect these rules, when you upload your file, its name will be automatically changed by the system and replaced by random numbers.
 3) Upload to your image gallery

Go to the [Galleries\Images] menu and click on the [Add] button.

Attention: Be careful not to use the automatic resizing function when uploading!
Choose the dimension option for uploading the image without modification.
Dimension: Original (No modification of the image dimensions).

Confirm saving your header image to your image gallery.
 4) Find the applicable class

Using Firebug, scan your page to find out which CSS class defines the header background image. To do so, we suggest reading How do I customize my CSS design?.
Usually, the class used for this is called either "headerarea" or "headercontainer".
The CSS instruction defining a background image is: background-image.

background-image: url(/DesignCss/17000/366/header366.jpg);
 5) Modify the CSS code

Click on the [Site\Site Design] menu, then on the [Create and Manage Custom Site Designs] button to access the [Edit Properties] icon of your custom CSS design.

Find the class definition in the CSS Content area and modify the line of code defining background-image display. Remember, you can use the "Ctrl + F" or "Cmd + F" tools to easily find the class in this very long text area.

To define the image you imported into your image gallery, you need to know it's relative URL. For help finding this, we suggest reading How do I find the URL address of the images in my site?

If your account number was 12345 and you called your new header "my-header-image.jpg", this line of code would look something like this:

background-image: url(/Files/12345/Img/12/my-header-image.jpg);

Save the modifications made in your Custom Design.
 6) Delete the images used in the site header

We advise against using the functions found in the [Site\Header and Logo] menu once you use a CSS Site Design for your site. It's better to insert artwork or photos directly into the header background image used by your Custom Design.

If you have previously added a logo or header image with the [Site\Header and Logo] menu, we suggest you delete them.

Add to favorites: http://www.oxatis.co.uk/Help/HelpCenterContent.asp?ActionID=1024&TID=55155&MID=16001&LangID=1
© 2001-2018 Oxatis. All rights reserved.