Css background image blob

my CSS background image is not displaying

I have uploaded the file in my git repository and copied the link and pasted here. Is there any certain method?

4 Answers 4

You need to use this raw image URL raw_background_img_src as the URL you are using will not work. See working example below:

body< background-image: url("images.app.goo.gl/FrArwNnFp8MZQEAk8?raw=true"); > I have tried this , taking image from google.. it is not displaying. Actually I’m new to this so I’ve been exploring a lot.

@Vindhya this is the image URL img.freepik.com/free-vector/…, If you add exactly what you want then i can solve your problem.

The url that you used (https://github.com/vindhya97/images/blob/master/pinkbackground.jpg) returns a HTML page containing (among other info) the target image itself. Just visit the URL and see. I know it might look a little bit strange at first sight but this is how GitHub works. So, because the url doesn’t actually serve the image, you can’t see the image rendered on your background.

If you want to get the image itself and not the HTML page, you must access the «raw» URL for the image which is: https://raw.githubusercontent.com/vindhya97/images/master/pinkbackground.jpg Just use this URL instead of the original one.

But be careful with this approach of embedding images in web pages. Now your repository is public. But if you deploy the webapp on some server and then you make your repository private, most probably the users that access the webapp won’t see the image.

Источник

How to set an image as a background image in html using input type=»file»?

I am creating a web page that can receive an image and set it as a background image. My work till now:

Since the value comes as C:\fakepath\Image.extension , the background doesn’t changes. So, can you please help me to do this using javascript only. I know this is a very strange question. But it will help me to learn something new and can help others too.

I’m sorry. I don’t know how to ask questions properly. I had even read the page which helps to know us how to ask good questions. But nothing worked. Can you please help me to improve the question? Thanks for the comment.

2 Answers 2

Simply wrap the File blob into an Object-URL ( URL.createObjectURL ) and set that as source for the CSS background image.

This will simplify your code, the image will be processed faster and image size will be less of a problem:

document.querySelector("input").onchange = function()

Ah, that fakepath. No, those are not directly related, it’s not using an actual path to the file in the system. It uses a pseudo-protocol (blob: via the Object-URL) which references data in memory (or via an file lock managed internally by the browser). There is luckily no direct access to the filepath itself.

You need to read the contents of the selected file using HTML5 FileReader API then get base64 encoded Data-URL of it. Then you can set this URL as background of anything.

If you don’t know Data-URL is a type of URI that does not point to the location of a file, rather it holds the whole content of the file in base64 encoded format inside the URL. Any file can be converted to a Data-URL. You can read more about it here.

Note: Data-URI is only preferred for small files. Do not convert megabyte size files into Data-URI.

function previewFile(fileInput) < var file = fileInput.files[0]; var reader = new FileReader(); reader.addEventListener("load", function() < setBackground(reader.result); >, false); if (file) < reader.readAsDataURL(file); >> function setBackground(imageURL)

Источник

How To Create CSS Animated Blobs in under TWO minutes and more?

If you ask me, blobs are one the most beautiful-looking things that one can create using CSS. The animated ones, even more so.

But me being someone who sucks at creating beautiful design elements, thinking about making something like a blob seemed pretty scary to me in the beginning. Turns out, beyond the fear, things are pretty simple. It is fairly simple to create nice-looking blobs using plain CSS and without the need for any CSS libraries like TailwindCSS.

Let’s dive in and see how can we create CSS Blobs.

Create CSS Blobs

We will create a simple a create a couple of varieties of a CSS blob, along with a simple CSS blog. They will look as below:

To create something like the above, create an HTML file and create a couple of divs in it as done in the code below:

 . 
CSS Blob & Animated Blob Examples
 . 

This will be the base of the design, which we will style.

Now to tun this invisible div, add the following CSS to the section of your HTML file. Or, link it to an external CSS file. I do the latter, in my example.

That’s all you need to create a CSS blob as shown above. Feel free to play with the CSS values and see how they reflect on the HTML page.

How To Animate CSS Blobs?

While it might sound a complex thing to do, it only takes a few additional lines of code to animate your CSS blob. Update the following CSS code in your file and reload the HTML page and you should see the animation in action!

border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%; width: 250px; height: 250px; background: rgb(0, 255, 98); background-image: linear-gradient(45deg, #3023AE 0%, rgb(0, 255, 98) 100%); box-shadow: -10vmin 10vmin 0 rgba(255,255,255,0.07); animation: animateBlob 10s linear infinite alternate;

[BONUS] How To Add an Image Background To a CSS Blob?

While playing around with the look & feel of the CSS blob, I also tried adding a background image to an animated blob, just to see how it looks. I liked what I was able to come – up with so sharing the same. Maybe you will find some real use case to use it. If you do, I would be interesting to see it. So, do share.

The code of the CSS Blob with an image background is given below:

border-radius: 23% 31% 30% 67% / 72% 47% 40% 26%; width: 450px; height: auto; background: linear-gradient(#a03692, #b46ca8, #c0aec5); overflow: hidden; animation: animateImg 8s linear infinite;

You can also download the example project from here. It has all the 3 examples I have talked about here.

Источник

Set Background-Image to a Blob: Uri

How to use a blob URL as an image source in Chrome’s Global Media Controls?

I ended up using JPG images which work just fine.

So, my conclusion is: you can use a blob URL as an artwork source, as follows:

navigator.mediaSession.metadata.artwork = [ 
 sizes: '150x200', 
src: 'blob:https://blablabla.com/4065a1d2-a23b-4cff-8ccd-3c6bce6e3b55', 
type: 'image/jpeg' 
>
];

My other conclusion is that there’s a bug with PNG images (see EDIT 1 in my question).

Is it possible to set backgroundImage with created image in JavaScript?

You can’t just simply assign the data returned by .toDataURL() to the backgroundImage property as it expects it to be wrapped inside «url()».

var canvas1 = document.getElementById("firstCanvas");var ctx1 = canvas1.getContext("2d");var canvas2 = document.getElementById("secondCanvas");var ctx2 = canvas2.getContext("2d");
ctx1.beginPath();ctx1.arc(50, 50, 40, 0, 2 * Math.PI);ctx1.stroke();
function transform() < var dataURL = canvas1.toDataURL("image/png"); canvas2.style.backgroundImage = "url(" + dataURL + ")";>transform();

How to set an image as a background image in html using input type= file ?

Simply wrap the File blob into an Object-URL ( URL.createObjectURL ) and set that as source for the CSS background image.

This will simplify your code, the image will be processed faster and image size will be less of a problem:

document.querySelector("input").onchange = function()

CSS background-image renders as url(‘undefined’); even though I defined it. (JSX)

@J. Doe,
I got your problem. It is worth raising an issue with react team to debug more. But the route cause/fix i have in place is as below. Hope that helps!

When series of css class names have — , the inline url is set to undefined.

Workaround: (either one of the below)

Sample html

 
 
 
>> 
FOR Rent
 
 
 
339 N Oakhurst Dr Apt 303
 
 Beverly Hills, CA 90210
 
$3000/month
 

.set_bg background-repeat: no-repeat; 
background-size: cover; 
background-position: top center;

Источник