image link

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Tony Groome 261 posts 804 karma points

Jun 24, 2015 @ 07:53

0

Image link

Hi All

I have an image in my stylesheet like here:

div#header { width:944px; background-color: #fff; border-bottom: 3px solid white; background-image: url('/media/1017/hpc-group-logos_tj-hpc-negative-page-004.jpg'); background-repeat: no-repeat; height:90px;float:right; }

Is it possible set it up here as a link to home?

I couldn't figure out how to do that so I referenced the image in my Template instead and now there is extra white space around it!

Nobody has noticed....yet!

Thanks. Tony

Copy Link
Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Jun 24, 2015 @ 08:14
101
Hi Tony,

What if you are doing something like this below would this remove the white space around the image.
```
div#header img { 
    display: inline-block;
    width: 100%;
    height: 100%;
}
```
Hope this helps,

/Dennis
Copy Link
Tony Groome 261 posts 804 karma points

Jun 24, 2015 @ 08:19

0

Hi Dennis

Thanks sorted! :)

Tony

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Jun 24, 2015 @ 12:18
1
Hi Tony

Even though the issue has already been resolved I'd like to propose another way of doing it just so you and others are aware of it in the future :)

You can of course not place a link in your CSS but you can have some markup like
```
<a href="/" class="logo" title="Go back to the homepage">Company name</a>
```
Then in your CSS you can place the background image like this
```
.logo{
      background: url(/media/1017/hpc-group-logos_tj-hpc-negative-page-004.jpg);
      display:inline-block;
      height:100px;
      height:100px;
     /* This is hiding the text in the anchor visibly*/
     text-indent:100%;
    overflow:hidden;
    white-space:nowrap;
}
```
You will of course need to adjust the dimensions and the position in the header.

The above example is from the top of my head but it should work :) (Famous last words).

Just my 2 cents.

/Jan
Copy Link
Tony Groome 261 posts 804 karma points

Jun 24, 2015 @ 14:05

0

Hi Jan

So, there's more than one way to skin a cat! It's always great to get another option. Thanks for that. :)

I'm playing with all sorts of options now, wrecking my own head moving stuff around!

Tony

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Jun 24, 2015 @ 16:51

0

Hi Tony

Indeed there is :) - And it's a matter of figuring out, which one is the most appropriate in the given context.

Off topic - How did the launch of the intranet go btw?

Happy coding! :)

/Jan

Copy Link
Tony Groome 261 posts 804 karma points

Jun 24, 2015 @ 20:37

0

Hi Jan

We haven't launched it yet, there have been some CSS changes to be made (grrrreat!!). It works but doesn't look exactly the required way yet (whatever that is!!). Another week or so..... :)

I'll be pestering again on Friday! Thanks. Tony

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?