If an image is clicked from ImageButton in a repeater control and the image is displayed onto a div background, does it mean that the image is not recognized by the server side?

I have tried to save any image that is dynamically displayed as a div background into the database but it looks like the image is not recognized as an element.

For example, I have series of background images displayed inside a repeater control, using ImageButton. When user clicks on any image in the ImageButton, the image that is clicked is transfered to a div as the background image, but the problem how to save that background image into the database.

private void GetTemplates()
{
    using (SqlConnection con = new SqlConnection())
    {
        con.ConnectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
        using (SqlCommand cmd = new SqlCommand("SELECT Data FROM Templates WHERE ContentType=@ContentType", con"))
        {
            cmd.Parameters.AddWithValue("@ContentType", 'image/png');
        con.Open();
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataTable dt = new DataTable())
            {
                sda.Fill(dt);
                backgroundTemplates.DataSource = dt;
                backgroundTemplates.DataBind();
            }
        }
        con.Close();
    }
}

protected void BackgroundImageChanged(object sender, ImageClickEventArgs e)
{
    ImageButton imagebuton = sender as ImageButton;
    string image = imagebuton.ImageUrl;
    using (SqlConnection con = new SqlConnection())
    {
        con.ConnectionString = ConfigurationManager.ConnectionStrings["CString"].ConnectionString;
        using (SqlCommand cmd = new SqlCommand("Select Data FROM Templates WHERE Data = @Data", con))
        {
            cmd.Parameters.AddWithValue("@Data", image);
            con.Open();
            byte[] imagebytes = Convert.FromBase64String(image.Split(',')[1]);
            string base64image = Convert.ToBase64String(imagebytes, 0, imagebytes.Length);
            string backgroundimg = "data:image/png;base64," + base64image;
            FrontCard.Style["background-image"] = "url('" + backgroundimg + "')";
            FrontCard.Style["background-repeat"] = "no-repeat";
            FrontCard.Style["background-size"] = "cover";
            con.Close();
        }
    }
    Page.ClientScript.RegisterStartupScript(this.GetType(), "pageLoad", "pageLoad();", true);
    Page.ClientScript.RegisterStartupScript(this.GetType(), "Loadpage", "Loadpage();", true);
}

//Trying to insert that selected background image into database

protected void BtnCard_Click(object sender, EventArgs e)
{
    try
    {   //Below here I have tried four (4) possible ways to insert that background image whch was selected from the repeater control ImageButton onto the div background

        // 1.  byte[] imagebytes = Convert.FromBase64String(FrontCard.Style["background-image"]);
        // 2.  string base64image = Convert.ToBase64String(imagebytes, 0, imagebytes.Length);
        // 3.  string backgroundimg = "data:image/png;base64," + base64image;
        // 4.  byte image = Convert.FromBase64String(FrontCard.Style["background-image"].Replace("data:image/png;base64,", ""));

        byte[] image = Convert.FromBase64String(FrontCard.Style["background-image"].Replace("data:image/png;base64,", ""));

        using (SqlConnection con = new SqlConnection())
        {
            con.ConnectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
            string query = "INSERT INTO SaveCard(Name, Background)" + "VALUES(@Name, @Background); SELECT @@IDENTITY";
            using (SqlCommand cmd = new SqlCommand(query, con))
            {
                cmd.Parameters.AddWithValue("@Name", named.Text.Trim());
                cmd.Parameters.AddWithValue("@Data", image);
                con.Open();
                int id = Convert.ToInt32(cmd.ExecuteScalar());
                Session["IDCard"] = id;
                con.Close();
                Response.Redirect("DisplayTemplate.aspx");
            }

        }
    }
    catch (SqlException ex)
    {
        string msg = "Error:";
        msg += ex.Message;
        throw new Exception(msg);
    }
}

<div class="row col-sm-12">
    <div class="col-sm-6">
        <asp:repeater runat="server" id="Repeater1">
            <ItemTemplate>
                <div class="col-sm-6 col-md-6">
                    <div class="thumbnail">
                        <asp:ImageButton ID="ImageButton1" CssClass="ImageButton" OnClick="BackgroundImageChanged" runat="server" ImageUrl='<%# "data:image/png;base64," + Convert.ToBase64String((byte[])Eval("Data")) %>' Style="width: 100%; height: auto; margin: 0 auto; border-radius: 10px; background-size: cover; border: 1px solid #f0f1f2;" />
                    </div>
                </div>
            </ItemTemplate>
        </asp:repeater>
    </div>
    <div class="col-sm-6" runat="server">
        <!--Div where the background image will be displayed after ImageButton click in repeater-->
        <div class="FrontCard" runat="server" id="Div1">
        </div>
    </div>
</div>

<asp:button id="Button1" runat="server" cssclass="btn navbar-btn" text="Save Bg" onclick="BtnCard_Click" />

This is the error I got:

Server Error in '/' Application.

The input is not a valid Base-64 string as it contains a non-base 64 character, more than two padding characters, or an illegal character among the padding characters.

It is from this:

byte[] image = Convert.FromBase64String(front.Style["background-image"].Replace("data:image/png;base64,", ""));