Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

make my background image a clickable link?

  1. theinnerground
    Member

    Can anyone help me make my background image a clickable link? I have figured out how to insert the image using css on only the first page:
    http://www.theinnergound.com
    But I want to be able to click on the image and be directed to the 'home' page, which is my posts page. Right now I entered in for the heading image:
    body.page-id-155 {
    background:url('http://theinnerground.files.wordpress.com/2012/09/yogasepia.jpg') no-repeat scroll transparent center top!important;
    }

    What else can I enter to make this image a link? I have tried to read other forum posts, but cannot figure it out.
    Thanks!

    The blog I need help with is theinnerground.com.

  2. designsimply
    Staff

    There is not a way to add a link using CSS only. However, what you can do is repurpose a link from another part of the page and overlay it on top of the background image you added.

    Here is an example that takes the Home page link on from the main menu on the current static front page and uses that to cover the image with a clickable link area.

    body.page-id-155 #access ul {
	position: relative;
}
body.page-id-155 #access #menu-item-75 a {
	position: absolute;
	left: -348px;
	top: -24px;
	width: 295px;
	height: 750px;
	text-align: left;
	text-indent: -9999px
}

    Note that this CSS is dependent on your current setup, and anyone else viewing this example would need to update or remove "body.page-id-155" and also change the "#menu-item-75" part of the selector to match which ever menu item you'd like to move. Also note that any changes in the menu or other settings like the static front page setting would require that you also update the CSS accordingly and update the numbers in the example until it looks good to you.

    I'm not sure repurposing the "Home" link was the best choice (the page just links to itself in that example) but you could use a different link and adjust

  3. theinnerground
    Member

    Thank you so much for helping.

    I tried to enter this into css. it worked to a degree, but the link only linked a small portion of the top of the photo. Increasing the height didn't do anything.

    Also when you scroll over the menu items to the right, the format becomes very messed up.

    I do want it to link to the Home page. my front page is static, the Home page is the blog.

    Any other help will be great. I am not sure what the code stands for, so am at a loss for trying other options.

    Thanks!

  4. designsimply
    Staff

    To fix the menu issue, take out this part:

    body.page-id-155 #access ul {
	position: relative;
}

    The link will only extend as far as the #header element in this theme, and that's why it only works for the top part of the image.

    To use a different link, you could add another menu item and then repurpose that over the top of the image. You will need to do a little work to adjust the example I gave to make it work exactly how you want.

  5. theinnerground
    Member

    Ok, I took this part out and it fixed the menu problem! Thank you.

    Now I am still confused on how to extend the link to the entire photo. What I inserted in order to add the background photo only to the first page is:

    body.page-id-155 {
    background:url('http://theinnerground.files.wordpress.com/2012/09/yogasepia.jpg') no-repeat scroll transparent center top!important;
    }

    Is there some way to add the 'link' to this-instead of adding it to the header or menu region? It seems that even changing the height does not do anything.

    Thank you again for any help!

  6. designsimply
    Staff

    WordPress.com doesn't offer the option to change the HTML source code of themes, and so you must find a way to move already existing page elements using CSS. CSS is only for editing appearance and you cannot add links using CSS directly.

    I thought of another method that might work. Consider this experimental. :)

    .page #content {
	position: absolute;
	z-index: -9;
}
#header-wrapper {
	height: 800px;
}

  7. designsimply
    Staff

    Also note that you can change the link URL by adding a custom menu item (via the Appearance → Menus page) and moving that link over the top of the background image instead. Note that you will very likely need to adjust the numbers in the "body.page-id-155 #access #menu-item-75 a" block and change "#menu-item-75" to the value for the new menu item to make it work.

  8. theinnerground
    Member

    so, the above only moved the entire menu to center and the title to the far left.

    I wonder if there is a way to put a text link behind the background image? Is it possible?

    I don't understand how to add a menu item to a different location on the page...what is the menu item 75?

    Sorry I am a novice with css.

    Thank you again for trying! At least so far it is linked to the top of the image. I will keep hoping to find something that works!

  9. designsimply
    Staff

    so, the above only moved the entire menu to center and the title to the far left.

    I tested it one more time and it worked for me. Maybe try the latest CSS again. Note the last example should be added, not replace something else.

    I wonder if there is a way to put a text link behind the background image? Is it possible?

    Not with CSS only.

    I don't understand how to add a menu item to a different location on the page...what is the menu item 75?

    "#menu-item-75" is the unique ID given to the "Home" menu item and the one I used in my example.

    To add new menu items, see http://en.support.wordpress.com/menus/

  10. theinnerground
    Member

    It worked! Thank you so much! I am so excited...yes I had replaced it before instead of adding!

    Cool, thank you for all your help!

  11. theinnerground
    Member

    Oh no...there are other problems now :(
    Now I cannot edit the page...and all the formatting on the other pages is messed up.
    I wonder if I am supposed to enter the page id:
    .page #155 {
    position: absolute;
    z-index: -9;
    }
    #header-wrapper {
    height: 800px;
    }

    Something like that, to keep it on one page? I will leave it for now in case you look again.

    Sorry and thank you again anyway...so close!

  12. designsimply
    Staff

    Ah, yep. You're exactly right. To limit the updates you're working on to the front page, you should make the selector more specific.

    So replace this:

    .page #content {
	position: absolute;
	z-index: -9;
}
#header-wrapper {
	height: 800px;
}

    With this:

    body.page-id-155 .page #content {
	position: absolute;
	z-index: -9;
}
body.page-id-155 #header-wrapper {
	height: 800px;
}

    You're getting it! I think you're making good progress. :)

  13. theinnerground
    Member

    Ok...it is so close!
    It worked, but now the photo is a link, but it pushed all the page contents below the photo. What do you think? Any way to adjust this?

    Again, I am not sure this matters, but I had inserted the photo as a background image using:
    body.page-id-155 {
    background:url('http://theinnerground.files.wordpress.com/2012/09/yogasepia.jpg') no-repeat scroll transparent center top!important;
    }

    But we are linking it as a header, which is why I think it is pushing the contents down on the page. But i am not sure what to change.

    Thanks! I am so impressed that you have helped me get this far...

  14. designsimply
    Staff

    This is a pretty customized change!

    Try this to move the other content up on your home page:

    body.page-id-155 #entry-content {
	width: 240px;
	margin-top: -600px;
}

  15. theinnerground
    Member

    It worked! I can't believe it! Thank you. I adjusted the number so it is in the exact position I want!
    Thank you so much. This was much more challenging then I expected! I am grateful for your continued efforts in figuring it out! It can be done :)

  16. designsimply
    Staff

    Cheers :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags