reposition background image depending on screen size

[Dianne]

Hello

We recently implemented gift certificates on our website - we have a custom background image we would like to use however, it only works for one size screen. It shifts depending on the screen sized in which the gift certificate page is viewed. How can we fix this?

Also is there a way to have a separate image for the email certificate?

Thanks
Dianne

[Jim]

You would need to add some css to the template to reposition the image.

There is a separate section of the gift certificate template that defines the email gift certificated. You could modify that section of the template and put what ever image you want in it.

[Dianne]

Thank you Jim

Could you provide more detail in terms of which item in the css should be modified?

Also, the main issue is being able to view the gift certificate page correctly regardless of screen size. Is it even possible to load a custom background image? One that is not just a tiled background?

Lastly, i noticed in the shopsite tutorials it state that the gift certificate page should be the same as a store page - how is this accomplished? Can the gift certifacte be loaded into a product page? If so how?

Thanks

[Jim]

You normally specify the background image on the Merchandising > Gift Certificates > Configure screen. However, you can modify the template to just use a hardcoded image if you want to.

The css to prevent the image from repeating is "background-repeat:no-repeat;" So in the css that is loaded for your template you would add that line to the existing css or you could add it as a new style in the head section of the page like this.
<style type="text/css">
body {
background-repeat:no-repeat;
}
</style>

You can find good information on css online at http://www.w3schools.com/css/ or just do a google search for the topic you have a question on such as "background image repeat" or "background image position"

You want the gift certificate purchase screen to look like the rest of your site, so use the same colors, header/ footer images, etc. That way when the shopper clicks on Purchase a gift certificate they are familiar with the look and won't think they have gone to someother site. As for the Gift certificate itself, it probably could look different from your site since it will be sent either by mail or email and the person receiving it would not have seen your site before. However, having a familiar background image that matches your site would be nice since they will go to the site to redeem the gift certificate.