`Background image and height properties on the div element are unresponsive`

My main content div contains the content and sidebar, with a background image and a minimum height of 1200px assigned to it.

Despite assigning properties to the #main in Chrome & Firefox, the source inspection shows no properties, resulting in the background image and height not functioning as intended.

<!--Main content layout -->
#main {
clear:both;
position: relative;
min-height: 1200px;
background-image:url(images/white.png);
background-repeat: repeat-x;

}

.sidebar1 {
float: right;
width: 20%;
padding-bottom: 10px;
margin-top: 20px;
}
 .content {
padding: 10px 0;
width: 76%;
float: left;
margin-top: 20px;

}

The website link is:

I would appreciate another set of eyes looking into this. This method has worked for me before, so I'm unsure why it's failing now.

htmlcss

Answer №1

The text "

<!--Main content layout -->
" is incorrectly formatted as a CSS comment, when it should actually be an HTML comment. This can lead to parsing errors.

Answer №2

Upon reviewing your layout, I have identified some disruptions that can be addressed with the following solution: Instead of setting the image as a background in CSS, consider inserting it in HTML like so:

<img width="1360" height="675" src="images/bg0.jpg" class="wrapper">
<div id="main">Your content</div>

Apply styles to the image and main elements as shown below:

.wrapper {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

#main{
    position: absolute;
    min-height: 1200px;
    width: 100%;
}

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

What is the best way to clear an arrayList when an error occurs in the ajax response?

Within my code, I have initialized an empty arrayList as var selection11Data = [];. Data is retrieved from an AJAX call as shown below: var selectionId=trData.selectionId; console.log("here"); $.ajax({ url : A_PAGE_ ...

javascriptjqueryhtmlajaxdatatable

Is the whitespace-pre-line feature of TailwindCSS experiencing issues?

whitespace-pre-line doesn't seem to be working for me. I attempted to replicate the same code from my text editor on https://play.tailwindcss.com/, and it worked perfectly. Below is a screenshot that I have attached. This is the sample code in my tex ...

htmlcsstailwind-css

The "list-group" class is not functioning properly in Bootstrap 4

I've been diligently working on a project with Bootstrap 4. In one particular section, I need to display images in rows within a list-group that pulls images from a folder. However, when using Bootstrap 4, the image sizes are too large, unlike when I ...

htmlcsslaravelbootstrap-4twitter-bootstrap-3

Issue with Left Alignment of Tabs in Material-UI

As of now, material-ui's latest version does not provide support for aligning tabs to the left in the component. However, I came across a workaround on this GitHub page I have implemented the same workaround, and you can view it here: Unfortunately, ...

cssreactjsmaterial-ui

What could be causing my backend to malfunction while the website is live?

Currently, I am working on a PHP5 dynamic site where content such as galleries and news can be added from the backend. Everything was functioning perfectly fine on my localhost, but when I uploaded it online, the dynamic part stopped working. The default P ...

phphtmlcssmysqlbackend

Link AngularJS model to HTML comment for debugging purposes

I am facing an issue with debugging an object id within my interface. Using logs to track this specific object which appears multiple times on the interface is proving difficult. My goal is to be able to click on the particular object and use the inspecto ...

htmlangularjsdata-bindingcomments

Tips for managing a fixed-positioned element during scrolling and zooming events

I have a situation where I need a fixed-position element to stay at the top-right corner of the viewport. Here is the HTML code: <div class = "header"> <p>This heading has an absolute position</p> </div> And here is the CSS: .he ...

javascriptjqueryhtmlcss

PHP child categories causing jQuery menu loading issue

Our custom jQuery menu has been functioning perfectly on our OpenCart store. However, we are facing an issue where the 2nd level child categories are not being displayed. It seems that there is an error in the PHP code for both the modified and original me ...

javascriptphpjquerycssopencart

What is the best way to align an SVG in the middle of a div?

I am encountering a problem where I cannot seem to center an SVG within a div of 900px width. The SVG itself is only 400px wide, and I have set its margin-left and margin-right properties to auto. However, the centering does not work as expected - it behav ...

csslayoutsvgpositioningmargin

Show and hide HTML div elements dynamically using jQuery based on the selection from a dropdown

I am attempting to display or hide various divs based on user input from a select drop-down box. In fact, I initially tried to directly use the code from jQuery dropdown hide show div based on value, but I seem to be missing something simple that is preven ...

jqueryhtmlshow-hide

What are the functioning principles of older ajax file uploading frameworks (pre-html5)?

Traditional HTML includes an input element with a file type option. Tools are available that enable asynchronous file uploads with progress tracking. From what I gather, this is achieved by splitting the file into chunks and sending multiple requests wit ...

javascriptajaxhtmlhttpasyncfileupload

Exploring the world of web scraping by using Python to loop through HTML elements

Created a Python script to extract information from the website regarding its asset listings. So far, I have successfully retrieved the name of the first coin "Bitcoin," but I'm unable to get the ticker. With 27 pages on the site, each containing 40 ...

pythonhtmlpython-3.xpandasweb-scraping

Is it possible to conceal specific HTML elements using only CSS?

Recently I encountered some HTML code that caught my attention: <address>telephone no <span>-</span> Some Street 2 <span>-</span> 9999 ZZ Place <span>-</span> Something else</address> This particular p ...

htmlcss

Steps for automatically collapsing the sidebar on mobile devices when the page loads

I recently purchased the Lexa bootstrap admin dashboard from Envato Elements, but I'm encountering a problem. When viewing it on mobile, the sidebar does not collapse by default. The Metis Menu is being used for the sidebar, and clicking on the toggle ...

javascriptjqueryhtmlcssbootstrap-4

The pseudo class remains unaltered

I've been experimenting with creating pop up links that appear next to a button when the button is clicked. So far, I've tried using various CSS selectors like :active and :hover without success. Additionally, I attempted to use selectors such a ...

htmlcsscss-selectors

Event triggered before opening the cell editor in ag-Grid

I'm facing a scenario where I have a grid with rows. When a user double clicks on a cell, a cell editor opens up. There are events associated with the cellEditor - cellEditingStarted and cellEditingStopped, but I need an event that triggers just befor ...

htmlcssangularag-gridtablecelleditor

Navigate through the overlay div to access the canvas, with a delegated click event triggered by the coordinates

Currently, my canvas application does not have a built-in zoom and pan feature. To work around this limitation, I have created an overlay on top of the canvas with pointer-events: all and opacity: 0, allowing users to zoom and pan seamlessly. However, I ...

javascripthtmljquerycss

Exploring the css filter property in the Edge browser

Do CSS filters work in the Edge browser? -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); Unfortunately, none of these seem to be effective. Disclaimer: ...

cssmicrosoft-edge

Discover how to reveal a hidden div tag upon hovering over a different div tag using CSS

I have a minor issue that I need help with. I want to achieve an effect where one div is displayed when another div is hovered over in CSS. Once the cursor is removed, the second div should be hidden again. How can I accomplish this? There is a second hid ...

htmlcss

Ways to eliminate the relationship between parent and child

I am attempting to create a design featuring a large circle surrounded by smaller circles. The parent element is the large circle, and the small circles are its children. My goal is for any circle to change color to red when hovered over, but if I hover ov ...

javascripthtmlcss