Twenty Fourteen (background) Image Header into link

cphxxx · Member · Aug 12, 2014 at 12:00 pm
Copy link

Add topic to favorites
Hello,

using this thread https://en.forums.wordpress.com/topic/twenty-fourteen-image-header-how-to-change-for-a?replies=22 I made a background image header. However I would like to make it clickable to a homepage.

I added this code:
```
h1 {
    background-size: contain;
}
#masthead {
position: relative;
top: 0px;
background: url('http://www.blog.superubezpieczenia.pl/2.jpg') no-repeat;
background-repeat-x: no-repeat;
width: 1250x;
height: 220px;
margin: 0px;
margin-top: 0px;
}
```
to custom css and was trying to make it clickable. Am I able to do that?

sandymcfadden · Staff · Aug 14, 2014 at 12:21 am

Hi cphxxx,

What if you tried something like this. It just extends what you’ve done a bit more and causes the link that is already there to fill the same space as the background image. That way you can click on it.

h1.site-title {
  background-size: contain;
  position: absolute;
  width: 100%;
  height: 220px;
}
#masthead {
  position: relative;
  top: 0px;
  background: url('http://www.blog.superubezpieczenia.pl/2.jpg') no-repeat;
  background-repeat-x: no-repeat;
  width: 1250x;
  height: 220px;
  margin: 0px;
  margin-top: 0px;
}
.site-title a {
    display: block;
    width: 100%;
    height: 100%;
}

Does that do it for you?

cphxxx · Member · Aug 14, 2014 at 9:11 am
Copy link
sandymcfadden, thanks for response.

Its not but I guess its because there is no link. I understand how this should work, but I copied it to custom css, and have no idea where I should put link.

sandymcfadden · Staff · Aug 14, 2014 at 11:35 am

Oh the title of your blog should be there as a link by default, but I’m guessing you have that set to not show.
You should be able to use this code instead, just slightly modified so it will show the link so it will work, but move it out of the way so no one will actually see the text.

h1.site-title {
  background-size: contain;
  position: absolute;
  width: 100%;
  height: 220px;
}
#masthead {
  position: relative;
  top: 0px;
  background: url('http://www.blog.superubezpieczenia.pl/2.jpg') no-repeat;
  background-repeat-x: no-repeat;
  width: 1250x;
  height: 220px;
  margin: 0px;
  margin-top: 0px;
}
.site-title a {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -10000px;
}
.site-title {
  clip: unset;
}

Let me know if that works.

cphxxx · Member · Aug 14, 2014 at 12:31 pm
Copy link
yeah, I knew I missed sth :) thank you very much, everything works fine.
sandymcfadden · Staff · Aug 14, 2014 at 2:01 pm
Copy link
Perfect, glad it worked.

The topic ‘Twenty Fourteen (background) Image Header into link’ is closed to new replies.

WordPress.com forums

Twenty Fourteen (background) Image Header into link