adding header (banner) image to webform

Question

adding header (banner) image to webform

Joseph Hedbon 161

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>

Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-12-05T01:43:48.7766667+00:00

Hi @Joseph Hedbon,

I noticed that you posted a new question and did not close this post.

Do you have any other questions about this post? I am glad to help if you have any other questions.
Joseph Hedbon 161 Reputation points

2023-12-05T01:51:36.47+00:00

Hi @Lan Huang-MSFT , just closed this one. question i have is if i use the IMG vs background how could i float a horizontal navigation bar over it and not use the container or background image property.

Accepted answer

2 additional answers

Your answer

Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-12-05T01:43:48.7766667+00:00

Hi @Joseph Hedbon,

I noticed that you posted a new question and did not close this post.

Do you have any other questions about this post? I am glad to help if you have any other questions.
Joseph Hedbon 161 Reputation points

2023-12-05T01:51:36.47+00:00

Hi @Lan Huang-MSFT , just closed this one. question i have is if i use the IMG vs background how could i float a horizontal navigation bar over it and not use the container or background image property.

Answer 1

Lan Huang-MSFT 30,186 Microsoft External Staff

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.

Joseph Hedbon 161 Reputation points

2023-11-29T04:21:47.9733333+00:00

@Lan Huang

both solutions you presented work great. Thank you. one last thing on sizing the banner. if i want to keep the banner going no lower than lets say 250PX how would i add that into the above solutions.

Thank you

Lan Huang-MSFT 30,186 Microsoft External Staff

Hi @Joseph Hedbon,

Not sure if you want to limit height or width. If the height is set to min-height:250px;, if the width is set to min-width:250px;.

Height

<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;        
            min-height:250px;
        }
      
    </style>
    <title></title>
</head>
<body>
     <header><h1>Header</h1></header>
</body>
</html>

width

<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;
           text-align: center;
        }

         header {
            background: url('Resources/Header2.png');
            text-align: center;
            display: inline-block;
            min-width: 250px;         
        }
      
    </style>
    <title></title>
</head>
<body>
     <header><h1>Header</h1></header>
</body>
</html>

Joseph Hedbon 161 Reputation points

2023-11-29T21:25:41.7433333+00:00
@Lan Huang

that works but i dont think i was clear in the question on the height part. the header i want to use is attached. here is the code i have

<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; height: 250px } </style> <title></title> </head> <body> <header><h1>Header</h1></header> </body>

i want the image of the banner to auto size to within the first 250px of the page

this is wwhat i get with the above mentioned code:

i know this is probably an easy fix of missing 1 to 2 lines of code. this is my first go at CSS and at designing the webform. thank you in advance

Lan Huang-MSFT 30,186 Microsoft External Staff

Hi @Joseph Hedbon,

This is a known problem with CSS resizing. Unless all images have the same proportion, you have no way to do this via CSS.

The best approach would be to have a container, and resize one of the dimensions (always the same) of the images.

So the second solution in the answer is better for you. You can think of <header> as a container.

<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
        }


        .container {
            width: 100%;
            height: 250px;
            text-align: center
        }

            /* Resize images */
            .container img {
                width: 100%;
                height: 250px;
            }
    </style>
    <title></title>
</head>
<body>
    <header class="container" >
        <img src="Resources/Header2.png" alt="Banner Image" />
    </header>
  
</body>
</html>

Joseph Hedbon 161 Reputation points

2023-11-30T16:44:26.9233333+00:00

Hello @Lan Huang-MSFT

code worked great much appreciated and educated on a limitation with CSS. this is what i got when i implemented the code

i did try changing the width to 1700px to stretch it out since i need it to go end to end of the page not just align in the center. i did try changing the text-align but figured thats when i want to add text to the header. Thank you much
Joseph Hedbon 161 Reputation points

2023-12-01T01:44:43.52+00:00

Hello @Lan Huang

this may help as well i copied over the container code and img to another webform and worked great. i then inspected them during debug and here are the differences looking at the container.

Correct layout

incorrect(From inspecting webpage )
Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-12-01T01:46:15.1966667+00:00

Deleted
Joseph Hedbon 161 Reputation points

2023-12-01T01:53:00.5166667+00:00

@Lan Huang

I just posted above inspection of the website when I test. Would bootstrap alter anything?
Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-12-01T01:56:23.0166667+00:00

Hi @Joseph Hedbon,

Do you mean that the code does not work in your own project, but it works in the newly created page?

Looking at the inspecting webpage you provided, it seems that a conflict occurred because you set the width multiple times.

Can you provide as much code from your original project as possible? This way we can figure out what your problem is.
Deleted

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

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

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

Joseph Hedbon 161

@Lan Huang here is what i have: for the incorrect layout

<%@ 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>
               
         .container{
             width: 100%;
             height:250px;
             Text-align: center
         }
            /* Resize images */
            .container img {
                width: 100%;
                height: 350px;
               
            }
        
</style>
    <title></title>
</head>
     
<body>
    <header class="container" >
        <img src="Resources/Header2.png" alt="Banner Image" />
    </header>
    <form id="form1" runat="server">
        <div aria-readonly="True" style="height: 453px">

after the last line i have all the controls (labels, buttons, bootstrap modals) if need them let me know

Joseph Hedbon 161

this is from the correct layout:

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    

        <style>
               
         .container{
             width: 100%;
             height:250px;
             Text-align: center
         }
            /* Resize images */
            .container img {
                width: 100%;
                height: 350px;
               
            }
        
</style>
    <title></title>
</head>
     
<body>
    <header class="container" >
        <img src="Resources/Header2.png" alt="Banner Image" />
    </header>
    <form id="form1" runat="server">
        <div aria-readonly="True" style="height: 453px">
            <br />
            <asp:Label ID="Label1" runat="server" Font-Size="XX-Large" style="z-index: 1; left: 43%; top: 300px; position: fixed" Text="Policy Service Request"></asp:Label>
            <br />
            <br />
            <asp:Label ID="Label2" runat="server" style="z-index: 1; left: 121px; top: 326px; position: absolute" Text="*File is saved in your default download folder"></asp:Label>
            <br />
            <br />
            <asp:TextBox ID="TextBox1" runat="server" BorderColor="Black" ForeColor="Black" style="z-index: 1; left: 193px; top: 86px; position: absolute; width: 192px"></asp:TextBox>
            <br />
            <br />
            <br />
            <br />
            <br />
            <asp:TextBox ID="TextBox2" runat="server" BorderColor="Black" ForeColor="Black" style="z-index: 1; left: 163px; top: 183px; position: absolute; width: 192px"></asp:TextBox>
            <br />
            <asp:Button ID="Button1" runat="server" style="z-index: 1; left: 111px; top: 503px; position: absolute" Text="Button" />
            <br />
            <br />
            <br />
            <asp:TextBox ID="TextBox3" runat="server" BorderColor="Black" ForeColor="Black" style="z-index: 1; left: 306px; top: 135px; position: absolute; width: 192px"></asp:TextBox>
            <asp:TextBox ID="TextBox4" runat="server" BorderColor="Black" ForeColor="Black" style="z-index: 1; left: 298px; top: 285px; position: absolute; width: 192px"></asp:TextBox>
            <asp:TextBox ID="TextBox5" runat="server" BorderColor="Black" ForeColor="Black" style="z-index: 1; left: 514px; top: 131px; position: absolute; width: 192px"></asp:TextBox>
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
        </div>
    </form>
</body>
</html>

Joseph Hedbon 161 Reputation points

2023-12-01T02:10:58.72+00:00

Hi @Lan Huang

let me know where to pull the code you need to see. where could i have set the width multiple times?
Joseph Hedbon 161 Reputation points

2023-12-01T02:14:57.6633333+00:00

deleted

Lan Huang-MSFT 30,186 Microsoft External Staff

Hi @Joseph Hedbon,

I tested your code and found that using display:inline; works fine in the container.

 <style>
               
         .container{
             width: 100%;
             height:250px;
              display:inline;
         }
            /* Resize images */
            .container img {
                width: 100%;
                height: 350px;
              
            }

Joseph Hedbon 161 Reputation points

2023-12-01T03:00:02.66+00:00

Worked like a champ thank you @Lan Huang just have to find a way to get rid of margin there’s a small one of 15px
Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-12-01T03:28:36.0833333+00:00
Hi @Joseph Hedbon,

In fact, my suggestion is to change the idea of adding a background image to the Header in the first place.

At first I didn't know what exactly you needed a background image for. But based on your demo, you really only need to set it up with an image at the beginning. This prevents the image's style from being affected by the parent element.

<style> img { width: 100%; height: 350px; } </style>

<form id="form1" runat="server"> <img src="https://learn-attachment.microsoft.com/api/attachments/07513f61-1b21-4799-a252-08be06ca99fa?platform=QnA" alt="Banner Image" />
Joseph Hedbon 161 Reputation points

2023-12-01T17:16:37.75+00:00

@Lan Huang

the change to just the IMG worked great. last thing though when resizing browser window in windows 11 to auto size 2 windows. when scrolling to the right it leaves some white.
Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-12-04T03:56:10.7166667+00:00
Hi @Joseph Hedbon,

The reason for this problem is that the 100% width is equal to the width of the viewport, but the content under your image exceeds the width of the viewport, and dragging the scroll bar will not change the width of the image.

I think the easiest way is to directly set the width of the image to the width of the browser (remember to delete the CSS content related to the image), so that the image will not become smaller because the width of the viewport becomes smaller, and there will be no white space.

<img src="https://learn-attachment.microsoft.com/api/attachments/07513f61-1b21-4799-a252-08be06ca99fa?platform=QnA" width="1920" height="350" alt="Banner Image" />

Answer 2

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>

Joseph Hedbon 161 Reputation points

2023-11-30T16:58:17.03+00:00

instead of "banner" , the header of the page the. trying to get the image to resize and go only within the first 250px of height of the page. but go from left to right regardless if the page is maximized or not.

Answer 3

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

Share via

adding header (banner) image to webform

2 additional answers

Your answer