adding header (banner) image to webform

Joseph Hedbon 161 Reputation points
2023-11-29T00:09:13.8933333+00:00

looking to add a banner to my webform using CSS i was able to add the background image using the code below. any help would be appreciated.

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="PDF_find_Fields_test.WebForm2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    
 <style>
    body{background:url('Resources/R.jpg') 100% 100% fixed no-repeat  }
    body{background-size:cover}
   
    </style>
    <title></title>
</head>
<body>


i also tried this but did nothing.

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="PDF_find_Fields_test.WebForm2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    
    <style>
         body{background:url('Resources/R.jpg') 100% 100% fixed no-repeat  }
    body{background-size:cover}
    header{background:url('Resources/Header2.png')}
</style>
    <title></title>
</head>
<body>
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,405 questions
VB
VB
An object-oriented programming language developed by Microsoft that is implemented on the .NET Framework. Previously known as Visual Basic .NET.
2,659 questions
{count} votes

Accepted answer
  1. Lan Huang-MSFT 28,831 Reputation points Microsoft Vendor
    2023-11-29T03:37:25.5+00:00

    Hi @Joseph Hedbon,

    You need to ensure that there is content in the header.

    For example: <header><h1>Header</h1></header>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    
        <style>
            body {
                background: url('Resources/R.jpg') 100% 100% fixed no-repeat
            }
    
            body {
                background-size: cover
            }
    
            header {
                background: url('Resources/Header2.png');
                text-align: center;
            }
        </style>
        <title></title>
    </head>
    <body>
        <header><h1>Header</h1></header>
    </body>
    </html>
    

    If you don't need the content in the header but just the image, you can use <img> directly in the header.

        <header style="text-align: center">
            <img src="Resources/Header2.png" alt="Banner Image" />
        </header>
    

    Best regards,

    Lan Huang


    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.

    1 person found this answer helpful.

2 additional answers

Sort by: Most helpful
  1. SurferOnWww 2,411 Reputation points
    2023-11-29T02:03:43.75+00:00

    What is the "banner" you mean? Something like below?

    enter image description here

    If so it can be shown on the page using the following code:

    <%@ Page Language="C#" AutoEventWireup="true"
        CodeBehind="WebForm30.aspx.cs"
        Inherits="WebForms1.WebForm30" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Banner Sample</title>
    </head>
    <body>
        <header>
            <a href="https://validator.w3.org/">
                <img style="border: 0; width: 88px; height: 31px"
                    src="images/vcss.gif"
                    alt="Valid CSS!" />
            </a>
        </header>
        <form id="form1" runat="server">
            <div>
                <h1>Best practices</h1>
    
                <p>
                    While it is best to use the header element and ensure it is 
                    not a descendant of any subsection of the page, sometimes 
                    you don't have access to the underlying HTML. If this is the case, 
                    you can add the role of banner to the element of the page which 
                    should be exposed as a banner with JavaScript. Identifying 
                    the page's banner in this way will help improve the site's 
                    accessibility.
                </p>
            </div>
        </form>
    </body>
    </html>
    

  2. Deleted

    This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.


    Comments have been turned off. Learn more