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% ;
}
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 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;
}
I am searching for something like a "sliding drawer" - however they all span across the entire height of the page.I would like the slide in-out to just occupy the space it needs - and not cover the entire page.I also googled for hamburger menu on similar lines.
I guess I found out the element which I need.Please refer the screenshot below.
My ask is :
What is the element called so that I can search and develop my own version of it.Any pointer will be a great help.
https://www.templatemonster.com/blog/responsive-sliding-drawer-menu-lightbox-effect/
trying this
[demo]
html
<div class="slideOutTab">
Like Us on Facebook
</div>
css
div.slideOutTab {
position: fixed;
width: 150px;
height: 43px;
top: 200px;
left: -107px;
}
div.slideOutTab a {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
text-indent: -999em;
background: 0 0 url('http://s9.postimg.org/okyi00edn/fb_like_us.gif') no-repeat;
}
div.slideOutTab a:hover {
background-position: 0 -43px;
}
You can search for:
Sliding panel, fixed position panel, fixed sliding panel
At least you can start from those search terms and find more stuff as you delve deeper into the examples.
I made a 2 minute search using the above terms and I found a lot of examples that might help you. Give it a shot!
Try with pure css
div.slideOutTab {
position: fixed;
width: 150px;
height: 43px;
top: 100px;
left: -107px;
transition-duration:1s;
-ms-transition-duration:1s;
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
}
div.slideOutTab a {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
text-indent: -999em;
background: 0 0 url('http://s9.postimg.org/okyi00edn/fb_like_us.gif') no-repeat;
}
div.slideOutTab:hover {
background-position: 0 -43px;
left:0;
}
<div class="slideOutTab">
Like Us on Facebook
</div>
I have this picture:
and I want this picture:
to be over the picture so I get this "dot-effect".
I also have to repeat the picture so it fits the other one. I managed to have them both in the same place but never to have the second one repeated over the first one.
Please help. I googled this for the past 2 days and couldn't figure it out.
You can use multiple background images
.avatar {
width: 180px;
height: 180px;
background-image: url(http://i.stack.imgur.com/G9pqm.png), url(http://i.stack.imgur.com/DSToa.png);
background-repeat: repeat, none;
}
<div class="avatar"></div>
or alternatively, an actual image in the HTML and a pseudo-element overlay.
.avatar {
width: 180px;
height: 180px;
position: relative;
}
.avatar::after {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url(http://i.stack.imgur.com/G9pqm.png) repeat;
}
<div class="avatar">
<img src="http://i.stack.imgur.com/DSToa.png" alt="" />
</div>
Use first image as main background, than use position: absolute and background image on another element to place doted image over first one. Why background image for overlay? It's because you can set background-repeat attribute for background (default to repeat x and y).
.wrapper {
float: left;
position: relative;
}
.overlay {
background: url("http://i.stack.imgur.com/G9pqm.png") repeat;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
<div class="wrapper">
<img src="http://i.stack.imgur.com/DSToa.png" />
<div class="overlay"></div>
</div>
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