Search code examples
cssimagebase64base64url

how to import image base64 in css

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...
Solution

  • 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 .