Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 29, 2018 at 2:28 pm #991050
    michaelH

    Hi guys

    I have successfully created some nice features with your theme using a child theme. However, I struggle with the following (as I thought) easy thing to achieve and would love if anybody could help me out here.

    Here is what I got so far.

    1) CMS page with an empty color section with the ID called hintergrund. Minimum height is 100%.
    2) Some Quick CSS which should actually create the link over the whole background image. For some reason, this last piece is missing and the background image is not linked:

    #hintergrund { 
background: url('https://kriesi.at/test.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.takeover { 
    position: absolute; 
    display: block; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    cursor: pointer; 
}

.container { 
    position: relative; 
    z-index: 999; 
}

    3) Added this code in the header.php just after the opening body tag:
    <a href="https://kriesi.at/test" target="_blank" class="takeover"></a>

    As mentioned on point 2, the background image is displayed correctly so far, but I am missing the link on it. Any ideas?

    Thanks a lot in advance

    July 29, 2018 at 7:20 pm #991174
    Mike

    Hey Michael,
    I’m not sure that is going to work for you, at least the way I’m reading it. Here is another option: Apply link to column box where a link is inside the container and the javascript forces it to apply to the whole div.

    Best regards,
    Mike

    July 29, 2018 at 7:51 pm #991264
    michaelH

    Thanks a lot Mike!

    Unfortunately this does not quite what I wanted to, as the background image is almost not visible like that.
    Now I have a link on a big area, but the background image is gone. The goal would be to have a background image (100% width and 100% height) and to put a random link on that one.

    I hope that makes it more clear.

    Best regards
    Michael

    July 29, 2018 at 8:49 pm #991285
    Mike

    Hi,
    I tried to recreate your example, and found that modifying it a little worked.
    First I added a empty color section with 100% browser height, and gave it the ID “hintergrund”
    Then I added a code block element in the color section with a link and a class “takeover”

    <a class="takeover" href="http://google.com/"></a>

    Then I added is css:

    #hintergrund { 
background: url('https://127.0.0.1/2017demo1/wp-content/uploads/2015/07/portfolio-4-3.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.takeover { 
    position: absolute; 
    display: block; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    top:0;
    cursor: pointer; 
}

    please note the “top:0;” it forced the link cover the top of the color section, where it had been down about half way.
    The background image was visible and the link worked.
    Here is some more info on the subject: Turn an Entire DIV into a Clickable Link

    Best regards,
    Mike

    July 29, 2018 at 9:34 pm #991312
    michaelH

    Hi Mike

    Exactly what I wanted to achieve – thank you so much! Worked flawless.
    I did not expect getting an answer that fast on a Sunday, my respect.

    Best regards
    Michael

    July 29, 2018 at 9:39 pm #991315
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Create clickable background image for entry page’ is closed to new replies.