I'm using following css formatting to display a loading panel on form submission, and I have stored the gif image in \src\main\resources\static , but the the html div is not picking up the image, it takes all the other css formattings except the image. I have referred the following SOF link, but the mentioned solutions are not working. any one came across similar issue?
How to set background url for css files in thymeleaf?
<style >
#loader {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background: rgba(0,0,0,0.75) url([[#{/loading2.gif}]]) no-repeat center center;
z-index: 10000;
}
</style>
You've set display: none; - therefore an element, including background image, is invisible. Get rid of this property.
Otherwise it looks good.
Related
I need a textarea control with mask able property, if the textarea is mask able then the text should appear as stars instead of actual text.
I can have any no of textareas in my form, So i can't save actual text in other variable and save the stars or dots for actual textarea.
Can somebody help me to solve this issue?
As others have already pointed out, it's not possible and should not be done. But here is something which you should give a try. If you really want to achieve it, you'll have to compromise on something. Use contenteditable div instead of input and use following CSS:
Demo: http://jsfiddle.net/GCu2D/793/
CSS:
.checked {
font-size:20px;
position:relative;
display:inline-block;
border:1px solid red;
}
.checked:before {
font-size: inherit;
content:" ";
position: absolute;
top: 0;
bottom: 0;
left: 0;
background-color: #FFF;
width: 100%;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Asterisk.svg/32px-Asterisk.svg.png");
background-repeat: repeat-x;
z-index: 1;
background-size: 12px;
background-position: left center;
}
HTML:
<div contenteditable class="checked">Sample Text</div>
Obviously, this is not a perfect solution, but you can start from here.
Note: You will need to adjust the font-size and the image used. Both dimensions needs to be in sync. Ofcourse you can change the size of image using background-size . Border here is just for visual feedback. If you need to adjust the width of the stars, then you may use calc() and play around with the exact dimension.
I've searched everywhere to see how to code a background image into a clickable link. I have found a couple of answers to my question but none of them work!!! HELP!
You can try to achieve this using the following CSS trick:
Create an tag as normal and give it an id. You'll need for the custom css.
Clickable Background
Now the custom css for the #clickable-background div:
#clickable-background {
background-image:url(your-image-path);
background-size: 100% 100%;
display:block;
position: relative;
height: 100%;
overflow:hidden;
text-indent:100%;
white-space: nowrap;
}
Don't forget to add
* { margin: 0; padding: 0; } to your css.
Give it a go and see if it does what you want. Don't forget to edit your-image-path.
Just like the Title says, "How to use text as a background instead of an image?"
I'm making a little application, that I personally think is cool but will probably be a waste of peoples time, and am altering the button in the drop down button to an upside down triangle using this html code ▼ . I'm not talking about setting the z-index or anything just simply placing a character for the little arrow. I thought about leaving it blank but I don't think users would understand that they are supposed to use the menu if I did so. Therefore I'm going to use the upside down triangle.
My CSS for the drop-down list is set up like this
select {
border: none;
overflow: hidden;
background: no-repeat right #ffffff;
-moz-appearance: none;
-webkit-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Put the text inside an HTML tag with class .text-background, set CSS styles to
.text-background {
position: absolute;
z-index: 1;
}
and set z-index to the elements you want to be on top of the text with z-index higher than 1.
edit:
If you know what the size of the select element is, you probably want to position that text over the dropdown. This however will block the button.
JSFiddle
If you want better looks and functionality you can use a 3rd party libraries such as this or this.
edit 2:
I just found this CSS only solution given by Danield that's probably going to suite your needs better.
https://stackoverflow.com/a/13968900/1419575
Try This, as suggested by Paulo Bergantino:
JS Fiddle
Click Here
HTML
<div id="container">
<div id="background">
Text to have as background
</div>
Normal contents
</div>
CSS
#container{
position: relative;
}
#background{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
overflow: hidden;
}
I have a problem with hover. I have a normal pic with opacity and another one with white background. I did this:
html:
<div id="glob" style="margin-right:5px;margin-top:2px;float:right;height:45px;width:40px;">
<img src="images/icon_globus.png" width="32" height="33" alt="" style="margin-right:5px;margin-top:7px;"/>
</div>
css:
#glob:hover{
background:url('../images/icon_globushover.png') no-repeat;
}
As you can see from the pic, the white one (upper globus) is behind the other one. It should not be behind.
What is not good?
EDIT: Thanks all, it's working. I did like the first answer. Don't know why I used img tag. I always use divs as image, but here I was stupid. Thanks a lot all for your help!
Because background always has the lowest z-index of all elements and content will be on top of it. I would suggest you to put "images/icon_globus.png" this as a background for div glob and remove that image tag. Then it should work the way you want it.
try without the image part.
glob {
background: url('icon_globus.png');
}
glob:hover {
background: url('icon_globus_hover.png');
}
Depending on the browsers you want to support, you could do something like this in CSS:
#glob { position: relative; }
#glob:hover:after {
content: '';
display: block;
position: absolute;
z-index: 1000;
left: 0;
top: 0;
right: 0;
bottom: 0;
background:url('../images/icon_globushover.png') no-repeat;
}
Because your image icon_globus.png is above your div background so when you hover, you actually apply a background to the container containing your image, you globushover appears behind your ..
try this instead:
html:
<div id="glob></div>
css:
#glob {margin-right:5px;margin-top:2px;float:right;height:45px;width:40px;background:url('../images/icon_globus.png') no-repeat;}
#glob:hover{
background:url('../images/icon_globushover.png') no-repeat;
}
this way you change/overwrite the default background-image. css means cascade style, cascade is wat permits you to overwrite styles depending on a certain condition, thats theory applied here. just overwrite a background-image with another one on hover.
remove all style and change as below
// CSS
glob:hover{background: url("/images/icon_globushover.png") no-repeat;}
.glob{
background: url("/images/icon_globus.png") no-repeat;
float: right;
margin: 0px 0px 15px 20px;
overflow: hidden;
padding: 0px;
width: 32px;
height: 33px;
}
<div class="glob"></div>
if your path source is like this
myhardrive/MysiteFolder/Images/ and your index.html is in MysiteFolder so in css must be (/images/)
if your path source is like this
myhardrive/MysiteFolder/files/mystyle.css here you do ("..\images\")
I'm trying to make a footer for my page and I'm using the following CSS:
#footer {
height: 100px;
background-color: #F3F3F3;
position: absolute;
bottom: 0;
}
The footer appears at the bottom of the page as it should. I can see the text I write glued to the bottom of the page properly. However, the background colors refuse to appear at all. It's just the plain white background of the rest of the page.
Any idea why this is happening?
EDIT Checked for any conflicting/overriding CSS. Nothing that I can see.
EDIT2 The HTML
<div id="footer">
<center><p> Sup dawg, I'm a footer </p></center>
</div>
The css attribute to set the background color is background color. Change your css to:
#footer {
height: 100px;
background-color: #F3F3F3;
position: absolute;
bottom: 0;
}
Here is a working example: http://jsfiddle.net/gfKXU/1/
Did you mean background-color: #F3F3F3; instead?