I want to have a fallback Background only if the Image that is supposed to be the Background is missing.
This is what I got:
background: url(\'img/items/image.png\') , url(\'img/items/fallback.png\')
But in this case both backgrounds are shown at the same time.
Don´t know why.
As you can notice from the comments under your post, there is no such thing as a fallback but you always can find a way to solve the problem. Also keep in mind that sometimes when you come up with an unusual solution there is always be a price: performance, readability, etc.
For your situation I can suggest some ideas how you can solve that:
Use two images (those mustn't be transparent)
background-image: url("defaultImage.png"), url("backupImage.png"); background-position: 0 0, 0 0; background-repeat: no-repeat, no-repeat;
Use two nested HTML elements, for instance. Styling them and add background-image for both.
In css add pseudo elements through :before{content:" "; background:url(backup.png); display: block; position:absolute;}
Related
I have a circular image (a profile picture). This image may or may not be translucent so I've given it a background color to ensure that it's always visible. The problem I'm having is that the background color is visible even on images that are completely opaque (see figures).
After messing around with borders and padding I found a workaround. I found that adding an invisible border, and then removing it will fix the problem. To deal with images being dynamically added and removed, I do this on a timer (this was easier than injecting some code in all places where images are added to the page). This is what I've done and it seems to work but I don't like it.
setInterval(() => {
for (const img of document.getElementsByTagName("img")) {
if (img.style.border.length) {
img.style.border = "";
} else {
img.style.border = "0 solid transparent";
}
}
}, 500);
The <img> has the width and height attributes set to 32. It also has a border-radius of 16px and of course, a background-color.
Surely there must be a better way to deal with this than the setInterval above. Changing the border seems to be causing the element to be rendered again (and correctly). Perhaps there's a way to do this more directly?
Since this is a weird rendering issue, I should mention that I'm using Chrome 87.
I found another workaround that's a little bit more efficient. Whenever an image is added to the page, I attached an onload listener that updates the border.
img.onload = () => {
setTimeout(() => img.style.border = "0 solid transparent", 100);
};
This still feels like an ugly hack. Also, the edge around the image appears briefly before disappearing when the page loads. I'm looking for a better way.
I tried this out in Safari and updating the border doesn't help. It seems like I'll need to think outside the box.
Figure 1 - disgusting
Figure 2 - desired
Oh neat, what an interesting issue! Unfortunately I've looked and looked and looked and can't seem to see why this is happening. Triggering a reflow of any kind seems to fix it though, so whether you use the border or not should work.
However I think I've found another solution that would work without requiring a reflow, and that's using a radial-gradient background-image instead of a solid background color.
I set up an example pen here: https://codepen.io/xhynk/pen/ZEprxqq (it was easy to increment the ?4 to uncache the image and get it to "act weird" again.
Using this CSS for the background on the image, it seems to prevent the image from being close enough to "bleed" through the edge:
img {
background-image: radial-gradient(#000 70%, transparent calc(70% + 1px));
}
You could potentially drop the 70% down to 69% if you're still seeing it. I just tried to get it as close to the edge of the container as possible, and the +1px calc smooths it out instead of being jagged.
You can see in the following image, the first avatar has the radial-gradient applied and there's no bleed, and the second has the solid background: black instead which does.
I tried to replicate what you just told. And it seems to work just fine.
From what I understood, I am thinking of one possible error that is to replace fixed width of the image and set it to 100% and not care about the height of the image in the img tag.
Set the height and width of the image in your surrounding div and give that a background color.
<!DOCTYPE html>
<html>
<head>
<style>
img {
background-color: blue;
border-radius: 50%;
width: 100%;
}
#image-container {
width: 128px;
height: 128px;
background: lightseagreen;
}
</style>
</head>
<body>
<div id="image-container">
<img src="img_avatar.png"/>
</div>
</body>
</html>
Just copy paste it into https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic to see
I need to make a see-through window when user click in a given position of the screen, something like this:
It is, I need to highlight an arbitrary area in the screen (with a fixed width and height) in the position where the user clicks.
I have two options:
Use a plugin to take screenshots (like these).
Create 4 grayed boxes.
I don't like none of these options for different reasons:
The use of these plugins exceds my needs and adds an extra page load time and undesired complexity.
Manage these boxes may be complex in a future and browser compatibility may be an issue.
So, my question is, is there any way to do this in a simple manner using HTML (HTML5 and canvas is ok), CSS and Javascript/Jquery? A specific Jquery plugin will be an option due I could forget the maintenance of this code.
I did this once, I am not sure everyone will agree with my implementation but it worked for me at the time:
Create a div in the location you want, set height and width (for window effect);
position the div in the place you wish and then just add outline to it.
body {
background-image: url(http://lorempixel.com/800/800/nature/5/);
background-size: cover;
}
.windowDiv {
position: absolute;
top: 100px;
left: 100px;
height: 300px;
width: 300px;
outline: 4000px solid rgba(0, 0, 0, 0.5);
}
<div class="windowDiv"></div>
EDIT: use background-color rather than opacity.
2nd EDIT: as A.Wolf suggested you should use outline instead of border for easier positioning.
I am working on a legacy code here, and cannot use jQuery, CSS3 or HTML5.
I am using a background image for an input field in HTML. I am trying to achieve some sort of animation here, where the image appears initially and fades away slowly after 'n' seconds.
The sample CSS code that I have is:
.acceptValue {
background-image: url('../../images/accept.gif');
background-repeat: no-repeat;
background-position: right;
padding-right: 20px;
}
I want the above CSS property to be applied for 'n' seconds and then it should disappear.
Is there a way I can get this working in IE7 and IE8? I want something like SetTimeout in CSS definition where the image (accept.gif) appears just for a few seconds.
Please let me know.
I have a background image for an input box..It works fine in IE/FF, but for some reasons it is not visible in iPad Safari..Below is the CSS for the same;
#rightContent .inputBox{
background:transparent url(images/keyback.gif) no-repeat scroll center 6px;
border:0pt none;
float:left;
height:40px;
#height:37px;
margin-left:10px;
width:450px;
overflow: hidden;
}
Please help. Thank you.
I would suggest splitting out the background style into seperate parts. Not all browsers support transparent (and possibly other parts of that style).
When a browser sees a style they don't know what to do with, they usually ignore the whole style. Putting the background-image onto it's own line (eg. it's own style) will let that property get picked up by browsers that can deal with it, rather than getting missed because it is lumped in with things the browser doesn't know about.
I believe the default value of background-color is transparent. Have you tried not setting a color? Also, since you have a set image with no-repeat, why not make the image a jpg/png and set a color to match the background-color you want.
I've had the same problem and have managed to get a working solution using jQuery
$(document).ready(function () {
var buttonsFilename = '<%=ResolveUrl("~/Content/Images/Buttons.png") %>';
$('.commands .command').css({
background: 'url(' + buttonsFilename + ')',
width: '55px',
height: '55px',
display: 'inline-block'
});
});
I'm using this within an ASP.NET MVC website, hence the <% %> tag.
I could only get it to work using the background shortcut css property. I couldn't get any of the following to work ...
background-image
backgroundImage
'background-image'
... when using the object notation. Unfortunately that wipes out any other background settings you may have. But I got around that by using another piece of jQuery to set my background-position property.
I am having the same problem, but I found that the image slice I was using was too thin to display on iPad. It is a texture, so I was using a 15px slice and an x-repeat, which is fine in all browsers but not iPad. After some experimenting I found that the threshold for iPad seems to be 130px.
I need help finding code for my web page. I have a "customize.css" page which has code for loading the header image. But the header loads on a "header.asp", which is then loaded on the index page "default.asp". I guess my question is what can I use to generate, one of four of the header images I have created, randomly on each page reload/refresh for a header?
This code is from my "customize.css" file. After I get the code, what do I put in the "background-image:" for it to load to the page?
#header {
color: #FFF;
height: 350px;
background-color: transparent;
background-image: WHAT DO I PUT IN HERE?;
background-position: left top;
background-repeat: no-repeat;
}
I have searched the net forum after forum for the past week in search of an answer but have yet to get one. Anyone have any ideas? Thanks
I'd go simple. Define 4 different classes, each with a different background image. In your header ASP script, select one of the 4 classes at random, and output that class into your code. It's simple, the images will cache as they are displayed, and because you avoid JavaScript, it works for 100% of browsers/users. For a small project, it's easy to maintain.
Now, if you get into 100 different background images, you would want to do something different.
If it were me, I would create a separate web service to serve a random image. I would use PHP, but I assume you can do it in ASP).
#header {
background-image: url(/yourWebService.asp);
}
Have the service select one of the images at random, and return it accordingly.
The only way of doing that in the css is by calling a URL that returns the random image. Something like:
#header { color: #FFF; height: 350px; background-color: transparent; background-image: "/loadimage"; background-position: left top; background-repeat: no-repeat; }
But then you must code a service at /loadimage that returns the image.
It will be much more easy change the image at the page load via javascript. Assuming you have the images img0.jpg, img1.jpg, img2.jpg and img3.jpg at the images directory, you could do:
You can do:
<body onload="document.body.background = '/images/img'+Math.floor(Math.random()*4)+'.jpg';" />
See the random image header of this page
I am using a specify class for change the background-position css property.