How do I add a link to my CSS background?
Tags: html,css,background,hyperlink
Problem :
I am having trouble with add a link to my css background. I know it is not possible but I am wondering how I would add it through my html. this is my css
`.home-featured.wall {
padding: 20px 0;
background: rgb(0, 0, 0) url(images/bg-pattern-black.png);
background-image: url(http://viralcentro.com/wp-content/uploads/2013/05/NBA-ad-Viral-Centro.png);
background-repeat: no-repeat;
background-position: center top;
position: relative;
text-shadow: none;
height: 730px;`
My site is http://viralcentro.com/ and the background I am trying to add a link to is the basketball one.
Thanks in advance.
Solution :
Hmm well why don't you try making the image local and putting it in a folder with your other images on your server. It may not be working because its taking to long to process the image. Also try using quotes when you link to images.
.home-featured.wall {
padding: 20px 0;
background: rgb(0, 0, 0) url('images/bg-pattern-black.png');
background-image: url('dir_imgs/NBA-ad-Viral-Centro.png'); /* replace dir_imgs with your folder name*/
background-repeat: no-repeat;
background-position: center top;
position: relative;
text-shadow: none;
height: 730px;
CSS Howto..
CSS has different pseudo selector by which you can achieve such effect. In your case you can use :active : if you want background color only when the button is...
You could use .slice() like so: Working Example 1 $(function () { $("#tabs").tabs(); $('#tabs li').slice(2, 5).css('visibility', 'hidden'); }); or :nth-child() like so: Working Example 2 $(function () { $("#tabs").tabs(); $('#tabs...
I try never to preach using tables for non-tabular data, but you could just do it using a table: <table width=100% style='font-family: monospace;'> <tr style='border-bottom: 1px solid #000;'> <td> |...
Take a look to this chart : http://www.campaignmonitor.com/css/ I would recommend you to use inline styles instead of adding an external css sheet...
You can try: $('.dropdown-menu').css({ 'right':'auto', 'left': '0' }); Set the default value for right rule and the one you want for left...
Is there any reason it has to be with flexbox? If you don't mind using an alternative method this tutorial will show you exactly how to create masonry-style layouts. Here's...
I haven't come across this before, but I thought about it for a second and it seems like $css['default'] or $css['selector'] makes the most logical sense to me if I...
Using only CSS it would only be possible with Mozilla, in which it is still an experimental technology (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables#Browser_compatibility) . But you could use Less (http://lesscss.org) or Sass (http://sass-lang.com) to...
The best way to do this is using "font icon technology" - you can read all about this in the web. Also it is helps when you need your markup...
Use class name for the same, $(".className").css("",""); ...
Try this. From Eric Meyer's Reset CSS table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;...
Change your CSS to: #mainTopicTable, #mainTopicTable td { border:#000000 solid; border-collapse: collapse; } ...
Removing the float for #A and #b will make you divs centered in the wrapper. What you can do to align the two div always next to each other is...
If you want to encode the images locally, you can use something like this: $type = pathinfo($path, PATHINFO_EXTENSION); $data = file_get_contents($path); $base64 = 'data:image/'.$type.';base64,'.base64_encode($data); You can also use one of...
You can do this with pure CSS using Flexbox. The key property is the flex-wrap which can be set to wrap-reverse to get your desired layout. Demo: .container { display:...
You can use flexbox. support HTML <div id="container"> <div class="status"></div> <div class="status"></div> </div> CSS #container { width: 800px; height: 600px; margin: 0 auto; border: 1px solid #ccc; display: flex; align-items:...
Remove the > character between ul and li in your CSS declarations. What jquery does is wrap your li with a div element before it does the animations. When that...
You should be able to target those lis with any number of selectors, regardless of when they're added to the page - .parsley-errors-list li .parsley-required .parsley-errors-list .parsley-required to name a...
first, you can play with the basic principle on this fiddle. Playing with "position: fixed", float and negative margins does the trick. Then you can look at this page for...
Working Demo http://jsfiddle.net/cse_tushar/G6Cwe/4/ HTML <div class="Not_Editable id-left"><div class="triangle"></div>Not Editable</div> <table border='1px'> <tr> <td class='td tr'>first</td> <td>last</td> </tr> <tr> <td class='td...
You may want to assign a percentage to the width rather than a fixed pixel width. http://jsfiddle.net/FKQFX/...
Try this CSS: input::before { content: attr(min, integer, 0); } Or: input::before { content: attr(min, number, 0); } Replace the 0 with the number you want....
Previous answers doesn't really answer your question: "How do I create a radial css3 border gradient shadow" You can use a radial gradient to simulate a border shadow without images....
You have to make two click handlers for #topicicon and #searchform and use .hide() and .show() as shown :- $("#topicicon").click(function(){ $("#topiclist").show(); $("#searchform1").hide(); }); $("#searchform").click(function(){ $("#topiclist").hide(); $("#searchform1").show(); }); and you are...
try this .hoverTable{ background:url(../../Images/taxi.jpg) top right no-repeat; background-attachment:fixed; background-size: 100% 100%; width:100%; } ...
You have to escape special characters - see Link The following characters have a special meaning in CSS: !, ", #, $, %, &, ', (, ), *, +, ,,...
Try something like this: HTML: <div class="wrapper"> <img src="https://www.google.es/images/srpr/logo11w.png" /> <span class="close"></span> </div> CSS: .wrapper { position: relative; display: inline-block; } .close:before { content: '✕'; } .close { position: absolute;...
HIDING PARENT ELEMENT based on its direct descendant //Update the **sample-element-to-hide** with whatever you wanted to use as a child class with the parent element you wanted to hide e.g.,...
Further to Rusher's answer, animate should work. Here's a jsfiddle CSS: #movingImage { margin-left:100%; width:100px; height:50px; background:#ff0000; } HTML: <body> <div id="movingImage"></div> <a href="#" id="clickMe">Make it Move!</a> </body> JS: $('#clickMe').click(function(){...
You can use .height() to half the height of an on-screen image. .height() takes a function, the second parameter of which will be the current height of the element. Return...