[solved] Add link to background image in global.css

[Stransky]

Hi folks....

 

I am using Prestashop 1.5.2 and have successfully added a background image to my site so that it appears at the top of each page.

 

I edited global.css and added the line below:

 

 

generic style

************************************************************************************************ */

body{

font:normal 11px/14px Arial, Verdana, sans-serif;

color:#222;

background:#fff

 

url(/img/newsletter.jpg) 50% 2% no-repeat;

 

}

 

I would now like to attach a link to this image. I have done some searching on this forum and the web but cannot get a solution working.

 

Has anyone here successfully done this or have an idea?

 

Thanks....Dave

[vekia]

hello

 

sorry but you have to clarify it a bit more, what you exactly mean by "would now like to attach a link to this image" ?

where you want to attach link? and for what purposes?

[Stransky]

Hi there....

 

I have placed the image at the top center of my site next to the store logo - it is an image that invites visitors to sign up for my newsletter. The image is very prominent which is what I want.

 

I can place the image exactly where I want it by using the code I placed in the global.css file. The problem is that I cannot figure out how to make the image clickable in the traditional html manner with <a href></a> tags. The intention is for the destination to be the email list provider's signup page when users click the image.

 

Hopefully this helps explain what I am after.

 

Thanks....Dave

[PascalVG]

Hi Stransky,

CSS is meant to do the layout of your site, not really to add functionality to it.

 

Maybe a better way is to add the picture in the header.php file. Something like this:

 

Open file /themes/<your them folder>/header.php and add the red text:

(you can of course move the image around a little, (and change the picture ;-) ))

 

 

{$HOOK_HEADER}

<div ID="absolutelogo" style="position:absolute; width:100%; min-width:980px;" >

<a href="http://PrestaShop.com"><img src="http://i1164.photobucket.com/albums/q561/Pascalvangeest/facebookb_zps293f6f0a.png" alt="Facebook" style="position:absolute; top:120px; left:50%; z-index:9999;"></a>

</div>

</head>

 

 

 

N.B. The <div> is used to move the picture when resizing the window. The picture above is placed in the middle. Just change the left:50% to move it left or right. The z-index puts the picture on top

 

 

Hope this does the trick,

pascal

[Stransky]

Hi Pascal....

 

I don't have the file /themes/<theme folder>/header.php. The only header.php file I have is in the root.

 

Is this the correct file?

 

Dave

[Stransky]

Hello Pascal....

 

Sorry, should have taken the time to investigate before responding previously.

 

I put the changes you suggested in /themes<my theme>/header.tpl and made the required adjustments for link, image and placement. It worked out great!

 

Thanks so much for your help!

 

Cheers....Dave

[vekia]

Thanks for information that the problem is solved, I'm glad that it works for you as you expect

now i can mark this thread as [solved]

 

regards

[PascalVG]

Hi Dave, glad it worked.

 

Good luck with your shop,

pascal