how to import image base64 in css

Question

Is it possible to somehow import the image base64 from another file? or save the url to a variable and import it to CSS? since the code is very long and it does not seem clean in this way.

Thank you for your help guys.

index.css

    .column {
      margin: calc(var(--grid) / 2);
      border: var(--borderWidth) solid #fffddd;
      border-radius: var(--borderRadius);
    
      
        background-image: linear-gradient(rgba(0, 0, 0, 0.769),rgba(0, 0, 0, 0.961)),url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QDWRXhpZgAATU0AKgAAAAgABAEPAAIAAAASAAAAPgEQAAIAAAAMAAAAUIKaAAUAAAABAAAAXIdpAAQAAAABAAAAZAAAAABOSUtPTiBDT1JQT1JBVElPTgBOSUtPTiBENTEwMAAAAAAKAAAMgAAFgpoABQAAAAEAAACigp0ABQAAAAEAAACqiCcAAwAAAAICgAAAkAMAAgAAABQAAACykgoABQAAAAEAA...

Don't post images. Post your actual code. – Apr 27 '21 at 18:24 — , Apr 27 '21 at 18:24
Great. I upvoted your answer. Thanks for complying. – Apr 27 '21 at 18:37 — , Apr 27 '21 at 18:37

score 4 · Accepted Answer · answered Apr 27 '21 at 18:32

4

What you could do is to use var() CSS from inside another CSS file that you can import .

File myCssVar.css

:root {
--mybguri64: url(data-image/jpeg;base64, ... ) ; 
}

Your CSS file

@import url(myCssVar.css);

.column  {
background-image: linear-gradient( ....), var(--mybguri64) ... ; 
}

It will make your CSS easier to read. Looks like from your edit you almost had it .

answered Apr 27 '21 at 18:32

G-Cyrillus

101,410
14
105
129

1

Thank you very much, it was just what I was looking for, I wish you an excellent day! – JGPcode Apr 27 '21 at 18:48

score 0 · Answer 2 · answered Apr 27 '21 at 18:22

0

Background-image's URL is a string value. Of course, you can store it in another file, import it and use js to inject it dynamically.

answered Apr 27 '21 at 18:22

filoscoder

495
1
4
10

1

Thank you for your contribution, I wish you an excellent day! – JGPcode Apr 27 '21 at 18:49

Ande Caleb · Answer 3 · 2021-04-27T18:48:57.633

The best solution to that is to use the server side script with an inline css to make this happen. to make this happen. lets say the backend language is php. and your pages are made up of 3 templates components. It could be in different backend languages either ASP.net, Javs, php, node... but i'm using php here since i'm vast in it. just follow through its quite simple and direct.

base64ImageFile.php - the file with the base64image variable it could be more than 1
header_template.php
footer_template.php
application.php

then in your base64Images.php you have this there..

<?php 
   
    $base64Img ='data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7';

    $base64Image2 = 'data:image/png;base64,sgw....';
    $base64Image3 = 'data:image/png;base64,sgw....';
    $base64Image4 = 'data:image/png;base64,sgw....';
?>

**in my header_template.php, add the template to the beginning of the file.. **

<?php 
    require('base64images.php');   //the images are rendered here.. 
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
     li {
         background:url(<?php echo $base64Img; ?>) <!-- and used here --->
          no-repeat
          left center;
          padding: 5px 0 5px 25px;
       }
    </style>
</head>

in my footer_template.php

<!---  footer elements/scripts go here  --->
 <script src="...."></script>
 <script src="..."></script>

</html>

application.php - file, merge template components to build page here

<?php require('header_template.php'); ?>

<body>
    .......body content coes here... 
</body>

<?php require('footer_template.php'); ?>

this way you can re-use and seperate the components and even seperate images into different files and call them. in your file instead of typing it out. or even multiple images... but the CSS must be inline with the HTML..

Thank you for your contribution Ande, I wish you an excellent day! — JGPcode, Apr 27 '21 at 18:50

how to import image base64 in css

3 Answers3