Resolving background div alignment issue in ASP.NET

I am facing a rather straightforward issue that requires resolution. I am currently working on fixing a background div (

<div class="main-background">
) that contains an image on my webpage. While it displays correctly in Design View in Visual Studio, it fails to appear when I run the application. The other elements on the page are visible, so I am unsure why this specific background div is not showing. Can anyone guide me on what might be causing this problem?

<div class="main-background">
  <div class="center">
    <asp:Panel ID="pnlOptions" runat="server" BackColor="#669999" HorizontalAlign="Center" Height="55px" Width="607px" BorderStyle="Double">
      <div style="vertical-align: top">
        <asp:Label ID="lblAvailableOptions" runat="server" Text="Available Options" Font-Size="X-Large" Font-Bold="True" ForeColor="Black" Font-Names="Trebuchet MS" Style="vertical-align: bottom"></asp:Label>
      </div>
    </asp:Panel>
  </div>
  <br />
  <br />
  <br />
  <asp:Panel ID="pnlButtons" runat="server" HorizontalAlign="Center">
    <asp:Button ID="btnGroupSummary" runat="server" Text="Group Summary" CssClass="btn btn-mainmenu" OnClick="btnGroupSummary_Click" BackColor="#3D5C5C" /><br />
    <br />
    <asp:Button ID="btnServices" runat="server" Text="Services" CssClass="btn btn-mainmenu" BackColor="#527A7A" /><br />
    <br />
    <asp:Button ID="btnLetters" runat="server" Text="Letters" CssClass="btn btn-mainmenu" BackColor="#94B8B8" />
  </asp:Panel>
</div>

The CSS for the "main-background" div is as follows:

.main-background {
  background: url(../Images/main-background.JPG) center fixed;
  background-size: 800px, 800px, auto;
}

Any assistance on resolving this issue would be greatly appreciated.

htmlcssasp.net

Answer №1

Update your CSS with the following code: "height: 800px;" 

.main-background {
  background: url(https://www.reneeaudubon.com/uploads/9/5/4/2/9542466/2748307_orig.jpg) center fixed;
  background-size: 800px, 800px, auto;    
  height: 800px;
}
<div class="main-background">
  <div class="center">
    <asp:Panel ID="pnlOptions" runat="server" BackColor="#669999" HorizontalAlign="Center" Height="55px" Width="607px" BorderStyle="Double">
      <div style="vertical-align: top">
        <asp:Label ID="lblAvailableOptions" runat="server" Text="Available Options" Font-Size="X-Large" Font-Bold="True" ForeColor="Black" Font-Names="Trebuchet MS" Style="vertical-align: bottom"></asp:Label>
      </div>
    </asp:Panel>
  </div>
  <br />
  <br />
  <br />
  <asp:Panel ID="pnlButtons" runat="server" HorizontalAlign="Center">
    <asp:Button ID="btnGroupSummary" runat="server" Text="Group Summary" CssClass="btn btn-mainmenu" OnClick="btnGroupSummary_Click" BackColor="#3D5C5C" /><br />
    <br />
    <asp:Button ID="btnServices" runat="server" Text="Services" CssClass="btn btn-mainmenu" BackColor="#527A7A" /><br />
    <br />
    <asp:Button ID="btnLetters" runat="server" Text="Letters" CssClass="btn btn-mainmenu" BackColor="#94B8B8" />
  </asp:Panel>
</div>

The image source can be found at

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stop the background from scrolling and prevent auto-jumping to the top on mobile devices

When users click on the hamburger icon in the top right of our mobile site, I want the drop-down menu to appear and be scrollable without the background scrolling. I tried using JavaScript to set the body to fixed when the menu icon is clicked, but this ca ...

javascriptjqueryhtmlcss

Maintain the border styling of a radio button when it is in the selected state

Having an issue with the radio type options - when selected, a blue border appears but disappears if clicking elsewhere. Need the blue border effect to stay even when clicked outside, unless switching to the other option. Looking to align the price in th ...

htmlcss

Tips for positioning an advertisement at the center of a full-screen HTML5 game

I am struggling to find a way to perfectly center my advertisement in a fullscreen HTML5 game. The game automatically expands to fullscreen when played, and I want the advertisement to always be positioned in the center, regardless of whether the game is b ...

javascriptcsshtml

Tips for avoiding HTML <tags> in the document.write function

I am trying to paint the actual HTML code within a tag using JavaScript but escaping it doesn't seem to be working. function displayHTMLString(n){ document.write("'<table>'"); for (i in range(0,n)){ ...

javascripthtml

Checking Twitter follower count using Jquery and JSON

Here is a script that counts twitter followers:. However, it seems to be displaying the list of followers twice. I would like some assistance in getting just the follower count stats for the array elements. Thank you! echo "<div id='twitter'& ...

phpjqueryhtmljson

Exploring the HttpApplicationState object

Is it possible to retrieve app state information without using Global.asax? I have stored some data in app_start that I need to access within a controller action. ...

asp.net

What is causing my DropDown List filter to reset when using Pagination?

I am currently working in ASP.NET MVC and I have set up a system to display data from my database on the screen. The interface includes a dropdown list at the top of the page which allows users to filter the data based on two options (option 1 and option 2 ...

c#jqueryasp.netajaxpagination

What is the best way to access the form button inside a div element?

Here is the code snippet for my form: <form accept-charset="utf-8" action="https:example.com" method="get" name="test"> <div class="classy"><input type="button" class="buttonE ...

javascriptphphtmljquerycss

What is the best way to retrieve a PDF file from another website and showcase it on our own site without any redirection?

Is there a way to display a pdf from another website without having to redirect to that site? I'm looking for a solution that involves using the URL directly. ...

javascripthtml

Issue with CSS positioning: Struggling to place images outside a div with floating properties

Here is what I need to design along with the code I have written, HTML: <div className='relative mt-64 mb-40 md:h-56 h-36 w-full gradient z-10'> <img className='bg-transparent w-20 h-28 absolute md:top-40 md:lef ...

cssreactjstailwind-csscss-position

Letters are frolicking in varying sizes and designs

Currently, I am encountering a strange issue with the text on my webpage. Some fonts are displaying with completely different shapes and sizes despite using <meta charset="UTF-8"> to ensure font consistency. Unfortunately, this did not resolve the pr ...

htmlcss

Press anywhere else on the screen to dismiss the bootstrap menu

I've been attempting to find a solution for closing the Bootstrap menu when clicking outside of it in a mobile window size, but I just can't seem to make it work. I did manage to get it working when clicking one of the 'a' links using t ...

javascriptjquerycsstwitter-bootstrapmenu

Adjust background image size to fit the screen, not just the content

Whenever I set the background image for each page using the following JavaScript code, var imageUrl = 'url(' + imageUrl + ') top left no-repeat fixed'; $('body').css({ 'background': imageUrl }); I also add ...

javascriptjqueryhtmlcssmobile

Using Google Maps to Cluster Markers on Your Website

I need to display numerous markers on a map for my website. My inquiry is whether the google maps api for javascript still supports clustering for websites? I attempted using marker cluster and it seems like it's not functioning properly. If so, can ...

javascriptasp.netgoogle-mapsgoogle-maps-api-3

The tab functionality in Bootstrap is malfunctioning

Struggling with implementing tab functionality on my navigation bar using Bootstrap. The tab links change the URL, but the content of the tabs doesn't update accordingly. I'm using Bootstrap 4 - do I need to add jQuery code to make this work? Wha ...

htmljquerybootstrap-4

A div element with the class name "draggable" is

One of my functions sends notifications to a page by prepending a main div with the notification. Here is the function: function displayNotification(notificationTitle, notificationContent, notificationColor, notificationSize) { console.log('Attem ...

javascriptjqueryhtmlcssjquery-ui

JavaScript query-string encoding

Can someone clarify why encodeURI and encodeURIComponent encode spaces as hex values, while other encodings use the plus sign? I must be overlooking something. Appreciate any insights! ...

javascripthtml

What are the security risks of evaluating user-supplied strings in web browser storage?

I'm in the final stages of developing a script that creates an API for performing storage operations across various web browser storage technologies. Currently, I am focusing on adding conditional retrieval and removal functionalities. These features ...

javascripthtmlsecurityweb-sqlindexeddb

Styling the footer of a webpage using CSS to adapt to different browser

I am currently working on a webpage that includes a footer. The footer is positioned correctly, but I encounter an issue when resizing the browser from bottom to top. For further details, please refer to the image below: Below is the CSS code for my foote ...

csshtmlfooter

The parent font size is influenced by the font size of the child element

I am encountering an issue with my code that seems to be quite simple. Here is the code snippet: <p> <h3>Title is here</h3> This is the paragraph </p> Here is the CSS: h2 {font-size:2.3em;} h3 {font-size:1em;} p {font-size:0. ...

htmlcss