Printing a particular div tag with labels and images intact in their positions

Donald Symmons 2,856 Reputation points
2023-03-18T09:31:56.73+00:00

I have this div tag where labels, image controls and background image are displayed.

The background image is gotten from database and displayed in the div like this:

protected void Page_Load(object sender, EventArgs e)
        {
                if (!this.IsPostBack)
                {
                    DivPrint.Attributes.Add("style",
                        string.Format("width: 100%; background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)),  url('{0}') no-repeat;", GetImage()));
                }
        }
private string GetImage()
        {
            string connectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
            string imagePath = string.Empty;
            using (SqlConnection con = new SqlConnection(connectionString))
            {
                using (SqlCommand cmd = new SqlCommand("SELECT [Image] FROM [ImageTable] Where Id=@Id", con))
                {
                    cmd.Parameters.AddWithValue("@Id", TextBox1.Text);
                    con.Open();
                    SqlDataReader dr = cmd.ExecuteReader();
                    if (dr.Read())
                    {
                        byte[] bytes = (byte[])dr["Image"];
                        imagePath = "data:image/jpeg;base64," + Convert.ToBase64String(bytes);
                    }
                    con.Close();
                }
            }
            return imagePath;
        }

This is how the background image is displayed in the div.bgimage

But the background image is still very visible. I want to reduce the visibility of the background image, make it really faint and;

How do I print just the div with the labels, the images, and the background image and any other control still intact, without displacing them?

Is it also possible to centralize the background image, make it appear at the center of the div?

<div runat="server" id="DivPrint"></div>
.NET
.NET
Microsoft Technologies based on the .NET software framework.
3,371 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,254 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,240 questions
0 comments
Accepted answer
  1. QiYou-MSFT 4,306 Reputation points Microsoft Vendor
    2023-03-20T07:57:49.05+00:00

    Hi @Donald Symmons

    Add a layer of div to achieve the function of transparent background:

    Code:

    <style>
   .backgrounddiv{
      margin: 40 auto;
      text-align: center;
      line-height: 200px;
      width: 800px;
      height: 500px;
      background-image:url('img33.jpg');
      background-size:cover;
       }
   .transparent{
        width: 800px;
        height: 500px;
        background: rgba(255, 255, 255, 1);
   }
</style>
</head>
<body>
    <form id="form1" runat="server">
        
        <div class="backgrounddiv">
        <div class="transparent"> 
            <p>Text</p>
        </div></div>
    </form>
</body>

    In general, background: rgba(255, 255, 255, 1), the last element 1 is opaque and 0 is transparent.

    But here we achieve the transparency of the picture by the transparency and opacity of the white background color. The picture is transparent when the background is white and opaque. This makes it transparent when the value is '1' and opaque when the value is '0'. Of course, this has to do with your background color.

    BackGroundTest

    Best regards,
    Qi You

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments

2 additional answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Bruce (SqlWork.com) 55,686 Reputation points
    2023-03-18T15:05:45.0833333+00:00

    You can not change the opacity of the background image without effecting the text. You will need a different solution. Either pseudo element before, or Overlay by positioning.

    https://coder-coder.com/background-image-opacity/

    1 person found this answer helpful.
    0 comments
  2. Donald Symmons 2,856 Reputation points
    2023-03-22T12:36:18.0933333+00:00

    @Bruce (SqlWork.com) ,

    You can not change the opacity of the background image without effecting the text.

    I did actually change the opacity of the background image in the server side.

    Here is how

    if (!this.IsPostBack)

                {

                    DivPrint.Attributes.Add("style",

                        string.Format("width: 100%; z-index: -1; background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)),  url('{0}') center center no-repeat;", GetImage()));

                }

    Image

    cool

    From the image, you can see that the background image is more opaque than that of the question.

    0 comments