So I would like to have a clickable area beneath a transparent PNG.
I have a 200x200px PNG image laying on top of a 200x300px div. The div is salmon colored. Only the 100px to the right of the div are clickable.
jsFiddle here: http://jsfiddle.net/xhAVU/1/
In modern browsers: By uncommenting pointer-events: none; you can see how the PNG gets ignored and the salmon div can be clicked on anywhere.
In IE9: No way to click through the image.
Is there a way to force IE9 to click through transparent PNGs?
Dup of https://stackoverflow.com/a/10968016:
Replace
<img width="200" height="200" style="pointer-events: none" src="...">
with
<svg width="200" height="200" pointer-events="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="200" height="200"
xlink:href="..." />
</svg>
as IE supports the SVG pointer-events property.
Did you tried sending png image back using a low z-index value lets say 10 and bringing the click able area up using high z-index value lets say 20.
This might work. look below code.
.container {
width: 500px;
height: 500px;
background-color: #eeeeee;
}
.container img {
width: 200px;
height: 200px;
position: absolute;
z-index:10;
/* pointer-events:none; */
}
.clickable {
width: 300px;
height: 200px;
background-color: salmon;
cursor: pointer;
z-index:20;
}
If the PNG file could be moved into CSS, then I find that you could implement it this way in all browsers:
http://jsfiddle.net/CkmH6/
With CSS:
.container {
width: 500px;
height: 500px;
background: #eeeeee;
}
.overlay {
background: url(http://ima.gs/transparent/none/36f/transparent-png-200x200.png) no-repeat;
width: 200px;
height: 200px;
position: absolute;
}
.clickable {
width: 300px;
height: 200px;
background-color: salmon;
cursor: pointer;
}
Related
Currently I have the situation as shown below in the snippet.
But now I want a triangle that is the same on every page. No matter how long the page is. So for example if the page is really long, then the triangle will at one point go out of the screen and there will be no more green background. (as shown here)
But the most important thing is that on every page the triangle/angle will be the same. How to do this?
$(document).ready(function() {
function waitForElement(elementPath, callBack) {
window.setTimeout(function() {
if ($(elementPath).length) {
callBack(elementPath, $(elementPath));
} else {
waitForElement(elementPath, callBack);
}
}, 300)
}
waitForElement("#leftdiv", function() {
// Initial background height set to be equal to leftdiv
$('#rightdiv').height($('#leftdiv').height());
// Initial triangle height set to be equal to leftdiv
$('#triangle').css('border-top', $('#leftdiv').height() + 'px solid transparent');
});
// When window resizes
$(window).resize(function() {
// Change height of background
$('#rightdiv').height($('#leftdiv').height());
// Change height of white triangle
$('#triangle').css('border-top', $('#leftdiv').height() + 'px solid transparent');
});
});
.container-general {
float: left;
position: relative;
background-color: black;
height: 500px;
width: 70%;
}
.background-general {
float: right;
position: relative;
/*height is set in javascript*/
width: 30%;
background-color: green;
}
#triangle {
position: absolute;
height: 0;
width: 0;
bottom: 0;
left: -1px;
border-left: 10vw solid white;
border-right: 0px solid transparent;
/*border-top is set in javascript*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-general" id="leftdiv">
</div>
<div class="background-general" id="rightdiv">
<div id="triangle"></div>
</div>
You don't need JavaScript and jQuery at all for this, as long as you are willing to make minor changes to your markup:
Step 1: Update your markup
Wrap both your .container-general and .background-general with a common parent element
Use display: flex; overflow: hidden; on the parent. This has the effect of stretching the shorter background element to full height of .container-general
Step 2: Determine the fixed angle you want and set aspect ratio
Important note: If you want to keep the angle constant, you will need to know what angle you want. That will require one important trick: you want to keep .background-general the same aspect ratio in all cases, so the angle stays constant. Let's say you want it to be 60° (i.e. Math.Pi / 3): with some math, that means that the height of the .background-general should be this ratio relative to the width:
containerHeightRatioToWidth = Math.tan(Math.PI / 3) = 1.732052602783882...
There is a trick to preserve the aspect ratio: you simply set the padding-bottom of the background element. In this case, you want it to be padding-bottom: 173%); (we don't need absolute precision so we can drop the decimal points).
Here's a handy table on the height (in CSS percentages) you can use:
30deg: padding-bottom: 57%:
45deg: padding-bottom: 100%:
60deg: padding-bottom: 173%:
You can also precalculate the percentage in your browser console by pasting this:
var desiredAngleInDegrees = 60;
Math.tan(Math.PI * desiredAngleInDegrees / 180) * 100
The markup is structured as follows:
└─┬.wrapper
├──.container-general
└─┬.background-general
└─┬.background-general__background
├─::before (triangle)
└─::after (remaining fill)
To achieve the triangle effect, you have two approaches:
Step 3A: Use clip-path to trim the background element to look like a triangle
clip-path is very widely supported by modern browsers, with a notable exception for IE11 and Edge :/ This should do the trick: clip-path: polygon(100% 0, 0 0, 100% 100%);
.wrapper {
display: flex;
overflow: hidden;
}
.container-general {
background-color: black;
height: 500px;
width: 70%;
}
.background-general {
position: relative;
width: 30%;
background-color: green;
overflow: hidden;
}
.background-general__background {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* Triangle */
.background-general__background::before {
flex-grow: 0;
content: '';
display: block;
width: 100%;
padding-bottom: 173%;
background-color: white;
clip-path: polygon(0 100%, 0 0, 100% 100%);
}
/* Extra fill */
.background-general__background::after {
flex-grow: 1;
content: '';
display: block;
background-color: white;
/* Needed to fix subpixel rendering */
margin-top: -1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container-general" id="leftdiv">
</div>
<div class="background-general" id="rightdiv">
<div class="background-general__background"></div>
</div>
</div>
Step 3B: Use an inline SVG as background image
For the greater browser compatibility, use an inline encoded SVG and stretch it to 100% width and 100% height of the parent.
We can create a simple 10×10px SVG of the following markup:
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10">
<path fill="green" d="M0,0 L10,0 L10,10 z"></path>
</svg>
Note: The preserveAspectRatio="none" is required so that we can freely stretch the SVG beyond its usual aspect ratio. For more information of how the <path>'s d attribute works, see this article: The SVG path Syntax: An Illustrated Guide
Then, all you need is to stuff this short SVG markup as data:image/svg+xml for the background image of the background container, i.e.:
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10"><path fill="green" d="M0,0 L10,0 L10,10 z"></path></svg>');
See example below:
.wrapper {
display: flex;
overflow: hidden;
}
.container-general {
background-color: black;
height: 500px;
width: 70%;
}
.background-general {
position: relative;
width: 30%;
background-color: green;
overflow: hidden;
}
.background-general__background {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* Triangle */
.background-general__background::before {
content: '';
display: block;
flex-grow: 0;
width: 100%;
padding-bottom: 173%;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10"><path fill="white" d="M0,0 L0,10 L10,10 z"></path></svg>');
background-size: 100% 100%;
}
/* Extra fill */
.background-general__background::after {
flex-grow: 1;
content: '';
display: block;
background-color: white;
/* Needed to fix subpixel rendering */
margin-top: -1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container-general" id="leftdiv">
</div>
<div class="background-general" id="rightdiv">
<div class="background-general__background"></div>
</div>
</div>
A simple "border triangle" bind to vw units might do:
body {
min-height: 2000px;
}
#triangle {
position: absolute;
top: 0px;
right: 0px;
border-top: 100vw solid #ff0000; /* The height of the triangle */
border-left: 30vw solid transparent; /* The width of the triangle */
}
<div id="triangle"></div>
A fiddle to play with.
Ok so I have an image which is blurred, and unblurred when the dom is loaded.
<div class="image-wrapper-container2"><div class="image-wrapper orig" style="background-image: url('https://www.w3schools.com/css/img_fjords.jpg'); background-size: cover; background-position: bottom; background-color: #a5a0a5; filter: blur(15px);"></div></div>
But the trouble with this is there is a white haze around the outside of the image.
Here is a fiddle to demonstrate whats going on
As you can see, I tried to remove the haze by using width: 110%;margin-left: -5%;height: 110%;margin-top: -5%; for the second image. but this is not the right solution.
Once the dom is loaded and the image is unblurred the image is outside the div by 5%;
Is there any way I can get the image haze to disappear from around the edge of the image without the image going outside the boundary of the image-wrapper-container2 div element
Cheers
Ok so here is the solution,
As #Kaiido suggested I needed to use the svg filters method.
But for internet explorer I needed to generate a base64 image, with a small resolution. 10px x 10px
Then load the base64 image for internet explorer, which created a blurred effect when the image is streched to fit the container.
For the transition to a non blurred image, I used the SMIL transition for browsers which support it. filter: blur transition for browsers which don't support SMIL and no transition for IE the image is just swapped.
HTML:
<svg width="0px" height="0px"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<filter id="better-blur" x="0" y="0" width="1" height="1">
<feGaussianBlur stdDeviation="25" result="blurred">
<animate id="anim" attributeType="XML" attributeName="stdDeviation" from="25" to="0" begin="indefinite" fill="freeze"
dur="0.35s"></animate>
</feGaussianBlur>
<feMorphology in="blurred" operator="dilate" radius="25" result="expanded"></feMorphology>
<feMerge>
<feMergeNode in="expanded"></feMergeNode>
<feMergeNode in="blurred"></feMergeNode>
</feMerge>
</filter>
</svg>
<div class="image-wrapper orig" style="background-image: url(\'' . esc_url($thePostThumbUrl) . '\'); background-size: cover; background-position: bottom; filter: url(#better-blur);visibility: hidden;"></div>
JAVASCRIPT:
<script type="text/javascript">
if (!jQuery("#anim")[0].beginElement) {
jQuery(".image-wrapper").css("filter", "blur(25px)");
}
</script>
<script type="text/javascript">
jQuery(window).load(function() {
setTimeout(function() {
if (jQuery("#anim")[0].beginElement) {
jQuery("#anim")[0].beginElement();
}
else {
jQuery(".image-wrapper").css("filter", "blur(0px)");
}
}, 1000);
});
</script>
CSS:
.image-wrapper {
transition: 0.25s filter linear;
-webkit-transition: 0.25s filter linear;
-moz-transition: 0.25s filter linear;
-o-transition: 0.25s filter linear;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: block;
}
Thanks Kaiido for all your help :)
There seems to be no way to remove the blurry edge around elements within the filter:blur rule. I would suggest a simple trick instead:
Create two overlapped divs containing the same image, the first one containing an img element with the image, and the second one as an empty div with the same image as a background.
Inside the superior div, insert the image centred inside a bigger wrapper, creating the effect of a border around it, thick enough to contain the blurry edge. Then apply the filter:blur to the whole wrapper, making the blurry edge fit the fake border; then, adjust the dimensions of the image you wish to show, through overflow:hidden.
Via JavaScript, just hide the superior div on load.
setTimeout(function() {
$('.fake-image').hide();
}, 2000);
.fake-image {
overflow: hidden;
width: 560px;
height: 360px;
margin: 0 auto;
position: absolute;
top: 10px;
left: 50px;
z-index: 10;
}
.container-backup{
width: 680px;
height: 480px;
background-color: rgba(255,255,255,0);
filter: blur(15px);
margin-left: -60px;
margin-top: -60px;
}
.image-top img{
padding: 40px;
display: block;
}
.real-bck-image {
position: absolute;
top: 10px;
left: 50px;
overflow: hidden;
width: 560px;
height: 360px;
background-image: url('https://www.w3schools.com/css/img_fjords.jpg');
background-repeat: no-repeat;
background-position: center;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fake-image">
<div class="container-backup">
<div class="image-top">
<img src="https://www.w3schools.com/css/img_fjords.jpg" alt="">
</div>
</div>
</div>
<div class="real-bck-image"></div>
I hope it helps!
Cheers
I want to use object-fit CSS rule.
This is not supported in MSIE and MS Edge Browser.
While there are some polyfills for IE, there is none to my knowledge that works in Edge.
E.g. the polyfill fitie by Jonathan Neal works with IE, but not in Edge (at least not on my machine). This is because fitie uses element.currentStyle and element.runtimeStyle which are MS only JS objects which do not any support in Edge browsers anymore. But if I use window.getComputedStyle(element).getPropertyValue('object-fit'), Edge returns nothing.
So how do I obtain the value of CSS rule object-fit rule with JavaScript in MS Edge browser?
img = document.getElementById('i');
s = self.getComputedStyle(img);
console.log('object-fit: ', s.getPropertyValue('object-fit'));
console.log('-ms-object-fit: ', s.getPropertyValue('-ms-object-fit'));
div {
width: 400px;
height: 320px;
overflow: hidden;
}
#i {
display: block;
width: 100%;
height: 100%;
-ms-object-fit: cover;
object-fit: cover;
}
div {
box-sizing: border-box;
border: 1px solid gold;
}
div,
p {
font-family: sans-serif;
font-size: 20px;
width: 400px;
margin: 0 auto;
}
<p>img: Has object-fit CSS rule, but does not appear in MS Edge JavaScript log</p>
<div>
<img src="https://dummyimage.com/640x240/333/444.png" id="i" />
</div>
Edit
It must be possible somehow, as it is not fully ignored.
The Developer Tools show the rule curly underlined
Bonus question:
Is there any polyfill for object-fit that works in Edge?
You should be able reference it directly:
// 'Fill' in Chrome and undefined in Edge
console.log('object-fit',
window.getComputedStyle(document.querySelector('.test')).objectFit);
// 'rgb(255,0,0)' in both
console.log('color',
window.getComputedStyle(document.querySelector('.test')).color);
.test{ color: red; }
<div class="test">test</div>
That style property will be undefined in browsers that don't support it (like Edge) even with a polyfill.
The problem is that, as far as Edge is concerned: there is no object-fit rule. When Edge parses the CSS it fails to recognise the rule and just skips it. If you shim the behavior with other properties or JS that doesn't change the fact that Edge just doesn't know about it.
So, in answer specifically to "So how do I obtain the value of CSS rule object-fit rule with JavaScript in MS Edge browser?" you can do window.getComputedStyle(ele).objectFit to get the value, and it's always undefined (even if successfully shimmed).
For the bonus question: background-size: cover is supported by Edge, so you should be able to set the image as a CSS background to a display:inline-block element and get the behaviour that you want. You can swap out the <img> for a styled <div> fairly easily...
var img = document.querySelector('.i');
// If object-fit missing
if (!window.getComputedStyle(img).objectFit) {
// Create a div
var div = document.createElement('div');
div.className = img.className;
// Set the background image to be the source
div.style.backgroundImage = 'url(' + img.src + ')';
// Set background-size to the object-fit we want
div.style.backgroundSize = 'cover';
// Swap them
img.parentNode.replaceChild(div, img);
}
.test {
width: 400px;
height: 320px;
overflow: hidden;
border: 1px solid red;
}
.i {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="test">
<img src="https://dummyimage.com/640x240/333/444.png" class="i" /></div>
That's just the basic idea - a shim like object-fit-images takes this idea a lot further and supports additional properties like object-position.
Alternatively (and with a lot more HTML) you can keep the <img> tag and wrap it in a container that behaves like it's applying object-fit relative to it. This is what object-fit-polyfill has done.
Both shims should work in Edge.
I want to use object-fit CSS rule.
You don't need to obtain the value of CSS rule object-fit rule with JavaScript in MS Edge browser to be able to make an img cover its parent.
Bonus: No need to use a polyfill and works across all browsers down to IE9
Side note, MS Edge ver. 16 supports object-fit
Here is a solution that works exactly as object-fit: cover, making use of transform: translate and min-width/height.
div {
width: 400px;
height: 320px;
box-sizing: border-box;
border: 1px solid gold;
margin: 0 auto;
overflow: hidden;
}
#i {
position: relative;
display: block;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<div>
<img src="https://dummyimage.com/640x240/333/444.png" id="i" />
</div>
If you want you can use CSS #supports to also reset the above properties and add object-fit.
div {
width: 400px;
height: 320px;
box-sizing: border-box;
border: 1px solid gold;
margin: 0 auto;
overflow: hidden;
}
#i {
position: relative;
display: block;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#supports (object-fit: cover) {
#i {
min-width: auto;
min-height: auto;
top: auto;
left: auto;
transform: none;
width: 100%;
height: 100%;
object-fit: cover;
}
}
<div>
<img src="https://dummyimage.com/640x240/333/444.png" id="i" />
</div>
Another overlooked option when one need to use an img because one want to set the image source in the markup, is to use a inline style for the background-image source.
Given the fact, in this case, where a div with fixed width/height sets the boundaries for the image, here is a simple sample of that.
div {
width: 400px;
height: 320px;
box-sizing: border-box;
border: 1px solid gold;
margin: 0 auto;
overflow: hidden;
background-position: center;
background-size: cover;
}
<div style="background-image: url(https://dummyimage.com/640x240/333/444.png)">
</div>
Updated
You can of course mimic object-fit: contain as well
div {
width: 400px;
height: 320px;
box-sizing: border-box;
border: 1px solid gold;
margin: 0 auto;
overflow: hidden;
}
#i {
position: relative;
display: block;
max-width: 100%; /* changed to max */
max-height: 100%; /* changed to max */
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<div>
<img src="https://dummyimage.com/640x240/333/444.png" id="i" />
</div>
Updated based on a comment
When it comes to mimic object-fit for video things gets much more complicated.
The video element doesn't respond in the same way an image does.
Here is 4 different samples showing that some video work when mimic cover and some when mimic contain
https://jsfiddle.net/zvtx6uy7/2/ cover with a more square video
https://jsfiddle.net/zvtx6uy7/3/ cover with a more wide video
https://jsfiddle.net/zvtx6uy7/5/ contain with a more square video
https://jsfiddle.net/zvtx6uy7/6/ contain with a more wide video
To achieve a consistent and the same good result as with the image, one need to run a small script to get the video aspect ratio, and then set its width or height to 100% based on its and its container aspect ratio.
Here is another post at SO, simulate background-size:cover on <video> or <img>, which show some more approaches how one can go about this.
One other option I found is to use media query and its max/min-aspect-ratio
Fiddle demo
Src: https://fvsch.com/code/video-background/
Sorry about not having an example, but basically I want to give an effect of having a text box crossed out, like being cancelled, etc.
Anyone got any ideas?
Alternatively, here is a pretty solution using SVG lines (no JS), which automatically scales to the dimensions of your text-area. It can also be applied over img elements for example.
JSFiddle: http://jsfiddle.net/xbbzcsrk/
HTML:
<div class="crossed">
<textarea>This is a test</textarea>
<svg>
<line x1="0" y1="100%" x2="100%" y2="0" />
<line x1="0" y1="0" x2="100%" y2="100%" />
</svg>
</div>
CSS:
.crossed {
position: relative;
width: 200px;
height: 80px;
}
.crossed svg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.crossed svg line {
stroke: rgb(255, 0, 0);
stroke-width: 2;
}
.crossed textarea {
width: 100%;
height: 100%;
box-sizing:border-box;
}
Here's another possible method, this one using the HTML5 canvas element to draw an 'x' over the textarea.
http://jsfiddle.net/rmqJf/
Since I started working on it a bunch of other, answers popped up, some of them pretty similar. Lots of options to go with!
I place the textarea directly on top of the canvas (of the same size), then use rgba() with alpha 0 on the background of the textarea to make the background transparent so you can see the canvas underneath.
Looking through these though, I'm inclined to feel like the background image solution suggested by #Ragnarokkr and sussed out by #kalpesh patel may be the simplest solution, if executed right.
The code for mine:
HTML:
<canvas id="myCanvas" width="200" height="100"></canvas>
<textarea id="myTextArea"></textarea>
JS:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle="red";
ctx.moveTo(0,100);
ctx.lineTo(200,0);
ctx.stroke();
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
CSS:
html, body {
margin: 0;
padding: 0;
}
#myCanvas {
padding: 0;
margin: 0;
width: 200px;
height: 100px;
}
#myTextArea {
position: absolute;
left: 0px;
right: 0;
height: 102px;
width: 202px;
background: rgba(255,255,255,0);
padding: 0;
margin: 0;
}
Adding this one as a new answer because I think it works better than my initial response:
http://jsfiddle.net/QrLLA/
only a few lines of code this time.
The HTML:
<textarea id="myTextArea"></textarea>
The CSS:
#myTextArea {
display: block;
background-image: url('http://i.imgur.com/4zKm6.png');
background-size: 100% 100%;
width: 200px;
height: 100px;
}
Just uses a image of an 'x' that I made in MS Paint as the background image for the textarea; the background-size: 100% 100%; property allows for re-sizing.
Screenshot:
This still enables the textarea to be written in; I'm not sure if that would be desired behavior in your case or not.
the screenshot:
html
<div class="con">
<div class="input-con"><input type="text" value="text example" /></div>
<div class="strip top-bottom"></div>
<div class="strip bottom-top"></div>
</div>
css
.con {
position: relative;
}
.strip {
margin-left:2px;
position: absolute;
left: 0px;
top: 0px;
z-index: 10;
border-width: 0 0 1px 0;
border-color: red;
border-style: solid;
width: 145px;
transform-origin:top left;
-ms-transform-origin:top left;
-moz-transform-origin:top left;
-webkit-transform-origin:top left;
}
.top-bottom {
margin-top: 2px;
transform:rotate(8deg);
-ms-transform:rotate(8deg);
-moz-transform:rotate(8deg);
-webkit-transform:rotate(8deg);
}
.bottom-top {
margin-top: 1.2em;
transform:rotate(-8deg);
-ms-transform:rotate(-8deg);
-moz-transform:rotate(-8deg);
-webkit-transform:rotate(-8deg);
}
.input-con > input {
line-height:1.2em;
width:146px;
}
You could create an image (one diagonal line) and set the textbox's background with that image (horizontally repeating if you want):
You can try out this:
Markup:
<div class='canceled_input_container'>
<input type='text'/>
<span></span>
</div>
CSS:
div.canceled_input_container {
position:relative;
height:30px;
}
div.canceled_input_container span{
position:absolute;
background-image: url("/path/to/image");
background-repeat: no-repeat;
height:/*background image height*/
width:/*background image width*/
top:-15px;
z-index:1;
}
This is just to guide you and does not contain final solution, you have to set position and other properties as per your requirement.
Well, this is will work in most browsers:
Empty: ☐ ☐ ;
Checked: ☑ ☑ ;
Disabled: ☒ ☒ ;
Add colors to make it looks even more disabled.
http://jsfiddle.net/tylerbrownhenry/NRHY5/
Here you go. For the markup...
<input type='text'/>
Then using jquery, you can either make this a function or a callback, but this is what you should run to add the 'X' to the input field. I'm just using 'input' as the selector but you can change it to fit your need.
I just wrapped the input with a div, and then put another div inside that div. The z-index of the child div should be higher than the input field, so that it will lay on top.
var input = $('input'),
divWidth = input.width();
input.wrap('<div class="ex" style="width:'+divWidth+';"></div>').before('<div class="exMark exImage"></div>');
Then I don't want to post the entire css that was in the jsFiddle. Because I used a dataUri so I didn't have to upload an an image, but you can just make the background-image whatever 'X' image you want.
.ex{
z-index:10000;
width:0px; /* This will get overwritten by the javascript */
}
.exMark{
width:150px;
z-index:1000;
height:2px;
position:absolute;
}
.exImage{
position:absolute;
width:150px;
height:50px;
background-repeat:no-repeat;
background-image:url('x.jpg');
}
Hope that helps!
<hr id="linethru" width="100%" color="black" >
for a button if i need a background image i would use background like below
#statusButton span {
color: #445058;
font-size: 14px;
font-weight: bold;
text-shadow: 1px 1px #fff;
padding: 7px 29px 9px 10px;
background: url('../images/Arrow.png') no-repeat 53px 7px;
display: block;
}
similar to here http://www.soundendeavors.com/clients/index.html
now How do i add this type of image as a foreground for a image. when i use same background attr for image th regular image will overlap is what i need is something of foreground type of css.
an image over a image.
So you want to put another image on top of one, right? You can do it this way:
div{ /*You can use whatever element you prefer*/
width: 400px;
height: 400px;
background-image: url('link1.jpg'), url('link2.png'); /*URLs*/
background-position: left top, right bottom; /*position*/
background-repeat: no-repeat; /*repeat or not*/
}
Fast and easy. The first image in the list will show up on the very top.
Demo: http://jsfiddle.net/DerekL/Pdxpe/
The good thing about this method is that you still has one solid element, instead of wrappers floating around.
if i understand You right, You want to overlay another image over an image?
to overlay another image over an existing image You can work with position in CSS:
CSS:
#wrapper {
position: relative;
}
#img1 {
position: absolute;
top: 0;
left: 0;
z-index:0;
}
#img2 {
position: absolute;
top: 0;
left: 0;
z-index:100;
}
HTML:
<div id="wrapper">
<img src="img1.jpg" id="img1" />
<img src="img2.jpg" id="img2" />
</div>
now the image with the id #img1 is under the image #img2, because of the lower z-index value...