I want to show a icon in css. But until now the icon is not visible.
Only when I define some text in the a href attribute then the icon will be visible, but also the text
Googled, following tutorials
So I hava a href selector, like this:
return $"";
and the css class:
.msgdownload {
position: relative;
}
.msgdownload::after {
content:'';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100% ;
background: url('../hepchat/downlaod\ -\ kopie.jpg') no-repeat bottom;
}
But the image is not vissible now.
But for example if I do this:
return $"donwload";
Then the image is vissible. But also the text download.But I only want to show the Image not the text.
Thank you.
So I try to make it empty like this:
return $"";
Try below css code. You need assign display and height width in order to make it work to class .msgdownload
.msgdownload {
position: relative;
width: 50px;
height: 50px;
display: block;
}
.msgdownload::after {
content:'';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100% ;
background: url('https://dummyimage.com/600x400/000/fff') no-repeat bottom;
}
Related
I'm trying to apply a watermark(with an image) to an image inside a carousel. I replaced my previous ngx-bootrap/carousel by ng-image-slider. In my previous code, I use this and it works fine:
.watermarked:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-image: url("/assets/images/confidential.png");
background-size: 300px 300px;
background-repeat: space;
opacity: 0.9;
}
Now, I find the container in the DOM and located the classs to override the css by my custom watermark css (is what the author recommends):
ng-image-slider .ng-image-fullscreen-view .custom-image-main img {
content: '';
display: block;
background-image: url('/assets/images/confidential.png');
background-size: 300px 300px;
background-repeat: space;
opacity: 0.9;
border: 3px solid orange;
}
It 'works', because while the image is loading, I can see the background with my image, but after the load, it disappears..
While loading:
After the image load, the background get covered and I cannot see anything:
Is this a normal behaviour? Is possible to maintain the background in the front line?
Thanks!
You forgot to use ::after in your example code. Add that to the container of the image since ::after doesn't work on img. I would suggest the following, but make sure that either .custom-image-main or another parent in your slider has position: relative; or the absolute positioning won't work.
.ng-image-slider .ng-image-fullscreen-view .custom-image-main::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: url('/assets/images/confidential.png');
...etc
}
I want to show a text when not a image is available
So I have this css:
.msgdownload {
position: relative;
width: 25px;
height: 25px;
display: block;
}
.msgdownload::after {
content:'';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100% ;
background: url('') no-repeat bottom;
}
.msgdownload > p {
position: relative;
z-index: -1;
}
and this I have as html. Comes form C#:
return $"";
But when the image is not available want to show just text: download.
Thank you
That you will see the text
This is the icon when it is available:
background: url('./images/downloadIcon.jpg') no-repeat bottom;
How to change this:
return $"";
But If I do this:
return $"<img src=\"#\" alt=\"download\" />";
And the image is also available. Then You will see the text and the icon.
Firstly, you can not use alternative text for a tag except img. Maybe, it is which make you in trouble.
<img src="..." alt="Text Here" />
I hope, it helps you.
I solved like this:
return $"<img src='./images/downloadIcon.jpg' alt=\"Download\"/>";
And changed this:
.msgdownload::after {
content:'';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100% ;
}
I try to create heading like this...
Title --------------------
This line with a custom image background
HTML :
<h2>Title</h2>
CSS :
h2 {background:url('line.png') repeat-x 15px 10px;}
Result :
Live : http://jsfiddle.net/5G2aq/
I try to repeat this image with X-axis and add some padding into the left.
But it doesnt work, 15px doenst work... or what ?
PS :Try to do with a single element <h2>, not :after or full-long image
Any trick ?
Do it like this, use :after pseudo with content: ""; and be sure you use display: block;, now we use position: absolute; and assign position: relative; to the container element. Last but not the least we use overflow: hidden; so that we don't get dirty scroll.
Demo
h2 {
position: relative;
overflow: hidden;
}
h2:after {
position: absolute;
height: 2px;
content: "";
display: block;
width: 100%;
top: 50%;
left: 60px;
background:url(http://oi39.tinypic.com/m7t8xw.jpg) repeat-x;
}
Coming to your solution, you are using repeat-x, so you won't see the background-position changing on the x axis as the image is repeating, if you want to go for this approach, you shouldn't repeat.
Even better approach
Demo 2 OR Demo 3 (Using your image)
<div><span>Hello</span></div>
div {
border-top: 1px solid #000;
margin: 20px;
position: relative;
}
div span {
display: block;
position: absolute;
top: -12px;
background: #fff;
padding-right: 10px;
}
The above way will be title width independent, I would've chosen this way
Note: You can replace div with h2
I'm trying to make a background image be outside a div and can't figure out how to do this (if even it's possible). My HTML:
<div id="test"></div>
My CSS:
#test {
width: 50px;
height:50px;
background: 0 50px url('https://developers.google.com/_static/images/developers-logo.svg') blue;
}
A stand-alone demo:
http://jsfiddle.net/568Zy/
The demo shows the image within the 50x50 div. What I was hoping for was to have the background image start at 0px from the top and 50px from the left.
Any ideas?
Your question does not make it clear exactly what you want the end result to look like.
It is not possible to make a background image 'overflow' it's element, however you can apply the background image to a pseudo element and make that whatever size you want and position it wherever you want.
I have used this technique on your example: http://jsfiddle.net/ybw750jd/
#test {
background: blue;
height:50px;
position: relative;
width: 50px;
}
#test:before {
background: url("https://picsum.photos/450/100") repeat scroll 0 0 transparent;
content: " ";
display: block;
height: 100px;
position: absolute;
width: 450px;
z-index: -1;
}
If this is not the effect you want, please rephrase your question and consider making a mock up image showing what you want it to look like.
Try this: http://jsfiddle.net/568Zy/16/. Essentially, you're creating two <div> elements, and set one to be absolute with a z-index: 0; on one and z-index: 1; on the other.
<div id="test">zzz</div>
<div class="z-index"></div>
#test {
background: blue;
width: 50px;
height:50px;
position: relative;
z-index: 1;
}
.z-index {
position: absolute;
background: url('https://developers.google.com/_static/images/developers-logo.svg');
z-index: 0;
width: 300px;
height: 100px;
top: 0px;
left: 50px;
}
i've look around online and tried various ways to go about this, but haven't managed to find one technique that works for me. i'd like my website's background image to be centered, fill the entire browser screen, and work with responsive design.
is there an easy technique, besides the CSS3/background-size: cover? that just didn't work at ALL for me (not sure why...).
LIVE DEMO
body{
background:url(img.jpg) center center fixed;
background-size:cover; // CSS3 *
}
Note: CSS3. For other old browsers please make it as ugly as possible! ;)
If you're not opposed to a solution involving HTML in addition to CSS, you can simulate the background-size: cover behavior with an img tag.
HTML:
<body>
<div id="image-matte">
<img src="..."/>
</div>
... Page content below ...
</body>
CSS:
#image-matte {
position: fixed;
top: 0%;
left: -50%;
width: 200%;
height: 200%;
}
#image-matte img {
display: block;
margin: auto;
min-height: 50%;
min-width: 50%;
}
/* Covers the image to prevent pointer interaction */
#image-matte:after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
EDIT: To get a vertically AND horizontally centered background image, you'll need to create a table/table-cell relationship between the wrapper div, and an inner div that holds the image itself... The HTML and CSS would look like this:
HTML:
<div id="image-matte">
<div>
<img src="..."/>
</div>
</div>
CSS:
#image-matte {
position: fixed;
display: table;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
text-align: center;
}
#image-matte div {
vertical-align: middle;
display: table-cell;
}
#image-matte img {
position: relative;
text-align: center;
min-height: 50%;
min-width: 50%;
}
/* Covers the image to prevent pointer interaction */
#image-matte:after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Working example: http://jsfiddle.net/qkpvb/
To work nice on all browsers, I'd suggest this solution using jQuery :
HTML
<img src='./templates/lights3.jpg' alt="bg" id="bg"/>
CSS
#bg {
position: fixed;
top: 0;
left: 0;
z-index: -5000; // Yes I always overdo ^^ (that's not very clean)
}
.bgwidth {
width: 100%;
}
.bgheight {
height: 100%;
}
JQUERY
$(window).load(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(resizeBg).trigger("resize");
});
This solution would be responsive and resize your background image relative to the size of browser window.
Try to add this html tag inside tag or css in the link:
<img src="img/beach.jpg"
style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:-5000;">
http://thewebthought.blogspot.com/2010/10/css-making-background-image-fit-any.htmlg