background-image: url('filepath/to/your/image.jpg')
It’s not a clickable link you see in that line of css. Links are written in the DOM.
I’m not sure why you would want to make the entire background of your site a link? That doesn’t seem very user friendly. An option here would be to write a script that handles that functionality.
It’s not the CSS that import the image in the website, but a php file, but I don’t know which file.
I’ve tried already background-image: url(‘filepath/to/your/image.jpg’) but It doesn’t work.
I’d like to make the background clickable because the background pictures is a commercial. That’s what my client wants 😉
have a look to the website if you want to: http://www.freespingratis.net
Please let me know.
It may not be the css file that is importing the image, but that line of code that says “background-image:…” is what is controlling what image gets placed there. It’s not a link.
What you are trying to accomplish is, to say the least, not a good idea. The only solution I see to your issue is wrapping the ENTIRE body in a link. It just doesn’t make sense to do that.
I would recommend rewriting some of your code to allow for custom images on the sides of your website and making those proper links.
here is some further reading.
https://wordpress.org/support/topic/can-you-make-a-body-background-image-clickable?replies=9
Here we GO!!!!
Done, after struggle with google for a day.
I add two “a” tag after the “body” tag, then I define the style of the a tags, the first fixed on the left hand side, the second fixed on the right hand side. Both of them take to the same page…
please have a look: http://www.freespingratis.net
<body <?php body_class(); ?>>
<a href="https://banners.livepartners.com/click.php?z=6387" target="_blank" style="display:block; height:100%; width:155px; position:fixed; left:0; top:0; z-index:0; text-indent:-5000em;"> Jump to the website</a>
<a href="https://banners.livepartners.com/click.php?z=6387" target="_blank" style="display:block; height:100%; width:155px; position:fixed; right:0; top:0; z-index:0; text-indent:-5000em;"> Jump to the website</a>
Thanks a lot!!!
Marcello
Marcello if you were here I would kiss you!!
After hours and hours you made my day. So many combination and nothing worked until I saw your post.
Thank you soo much! :))
Feel free to kiss me whenever you want Denza.
marcello8080 how did you get the full website view as the default for mobile view? I’m trying to get my mobile view to be a full website view without manually changing it at the bottom of the page link.
Hi Devine, I’m not sure I understand your question.
But if you want to make your CSS more flexible you should use this code in CSS file:
.left_side_background{
display:block;
height:100%;
width: 11%;
position:fixed;
left:0;
top:0;
z-index:0;
text-indent:-5000em;
}
Width is 11% instead of 155px, same thing for the right side background.
The HTML code is gonna be:
<body <?php body_class(); ?>>
<a href="https://banners.livepartners.com/click.php?z=6387" class="left_side_background" target="_blank"> Jump to the website</a>
<a href="https://banners.livepartners.com/click.php?z=6387" class="right_side_background" target="_blank"> Jump to the website</a>
Let me know…
Well, i was talking about my mobile view using on a cell phone. I wanted to see how you was able to maintain the “desktop view” on mobile devices. I kind of figured out that if I just turn off the Jetpack mobile feature it will then show my site as a desktop view on mobile devices. I guess since the theme is responsive already it’s not necessary to have on the Jetpack mobile feature unless I wanted it on for convenience. Am I correct?
Not sure because now that i disabled the Jetpack mobile feature, the desktop view does not show well on “Android Firefox” browser. It show fine using “Android Chrome” etc. Here’s the site I’m talking about: devinemarketers.com
Hi Devine, I know very well the template you are using for that website.
In that case you don’t need to change the code for the mobile view.
What I suggest is add this code to the CSS file.
@media only screen and (max-device-width:480px){
/* styles for mobile browsers smaller than 480px; (iPhone) */
.left_side_background{
display: none;
}
.right_side_background{
display: none;
}
}
This code is gonna hide the “side background” if the side background is active.
By
