The body element is inheriting the background-color

I am attempting to create a layout with two stacked elements and a footer.

.background
.container-fluid 
.footer

You can view my code on this fiddle:

http://jsfiddle.net/z9Unk/309/

My expectation is for the background to be displayed in green with the footer at the bottom.

However, it currently displays as black (body's background color). Why is this happening?

If I remove the background-color from body, then the green background appears.

Is there a way to show the green background without removing the background-color from the body?

htmlcss

Answer №1

The CSS property z-index:-1; is being used on the selector .my-world-background. By default, the element body has a z-index:0;, causing it to be displayed in the front.

Answer №2

Opt for using background-color in place of color

.footer-layout {
  align-content:center;
  font-size:18px;
  background-color: teal;
}

Answer №3

In the hierarchy of elements, the .my-world-background div is positioned behind the body div, causing the background color of the body to take precedence. This explains why you are seeing a green color when you remove the background-color property from the body. On the other hand, the footer does not have a background-color property defined; it only has a color property that determines the color of the text. If this behavior aligns with your intentions, you may find the following link helpful:

http://jsfiddle.net/WSwjy/

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

Deactivate a chosen item following selection

Is there a way to deactivate a selectable element after it has been clicked in the scenario below? Additionally, I would like to modify its CSS style. $(function(){ $("#selectable").selectable({ stop: function() { var result = $( "#select-re ...

javascriptjquerycssjquery-uijquery-ui-selectable

A placeholder within the HTML <code> element

Is there a way to include a placeholder attribute in the < code> < /code> tag similar to the < input> < /input> tag? <input type="text" name="fname" placeholder="First name"><br> ...

htmlcsshaml

The clash between jQuery UI and Bootstrap themes

I am encountering an issue where the text on my Bootstrap-styled buttons is not appearing on my webpage. After some investigation, I discovered that certain lines in the jQuery UI theme file are causing this problem: .ui-widget input, .ui-widget select, . ...

cssjquery-uitwitter-bootstrap

Insert a colon after a designated amount of characters

One interesting feature on my webpage is the "Search Box". In this case, the value stored in the database is 00:12:34:56 However, an issue arises when searching for 00123456 as it does not return the correct result. Is there a way to automatically insert ...

htmlmysqlasp-classic

Node.js is experiencing difficulties loading the localhost webpage without displaying any error messages

I am having trouble getting my localhost node.js server to load in any browser. There are no errors, just a buffering symbol on the screen. The code works fine in VS Code. Here is what I have: server.js code: const http = require("http"); const ...

javascripthtmlnode.jsexpresslocalhost

ASP.NET Core 3.1 dynamic image resizing

<div class="col-md-6"> <div class="border"> <img height="300" width="400" src="~/Images/vg.png" class="rounded"/> <p>This is a sample paragraph.</p&g ...

htmlcsstwitter-bootstrapasp.net-core

What is the best way to set the width of a w2grid to 100%

Has anyone tried using w2grid before? I'm having trouble figuring out how to make it fill its container 100%. Here's the HTML snippet: <div id="a" style="width:100%"> <!-- top left container--> <div>This ...

javascripthtmlw2ui

How can custom CSS and JS be loaded in Sencha Touch based on the user's device - PC, tablet, or smartphone?

Is there a way to configure a webpage so that when the user is accessing it from a PC (using Safari/Chrome/Firefox), they see the "normal" version of the page, but if they are using an iPad to view the same URL, they get Sencha Touch (css, js) files in t ...

javascriptcssipadsencha-touchnavigator

Executing statements within a loop sequentially in jQuery: Best practices

I'm working on developing a program that will display different images in a loop when clicked. To achieve this functionality, I implemented jQuery to trigger a function upon clicking an image, which then cycles through all the images by updating the " ...

javascriptjqueryhtmlloops

unable to detect image input type

My dilemma lies in trying to submit a form using an image input type. The ajax request works as expected, and I receive a response from my php script. However, I encountered an issue where the image button was not changing its image upon submission. Accord ...

javascriptjqueryhtmlajaxforms

Disappearance of the second level in a CSS dropdown menu

I am currently working on creating a dropdown menu using only CSS. Check out this example I'm using: http://jsfiddle.net/DEK8q/8/ My next step is to center the menu, so I added position-relative like this: #nav-container { position: rela ...

htmlcssdrop-down-menu

Creating a versatile table design using flexbox

Looking to create a gallery for images and videos using flexbox properties to create a dynamic table of divs to hold media. The challenge is generating the table automatically without specifying the number of rows and columns needed. For example, if I ha ...

htmlcssflexbox

Styled-components' styles fail to update after transitioning from mobile view

Click here to view the app: When you open the app in desktop width, you will see that the div has a green background. If you reduce the browser width to mobile size, the background of the div should change to gray. Now, if you increase the browser width b ...

htmlcssreactjsstyled-components

`Arranging miniature images within tabbed sections`

I have been implementing angularjs to render my HTML and utilizing bootstrap 3 for styling. While the tabs are rendering correctly, I am facing an issue where the images within each tab are not displaying in a grid layout; instead, they are being outputt ...

htmlangularjstwitter-bootstraptwitter-bootstrap-3

What is the best way to utilize variable fonts with Google Fonts?

Traditional fonts typically require a separate file for each weight variant, such as 300, 400, and 500. However, with variable fonts, all weight combinations can be accessed through a single compact font file. This is extremely advantageous for web design. ...

cssfontsgoogle-fontsvariable-fonts

Spinning an object using JQuery

I am currently working on a project to test my skills. I have set up a menu and now I want to customize it by rotating the icon consisting of three vertical lines by 90 degrees every time a user clicks on it. This icon is only visible on smartphones when t ...

javascriptjqueryhtmlcssweb

Is it possible to find a match by searching through multiple arrays for a corresponding variable name?

Hi there, I'm currently working on a function that triggers an alert if the name of an array of images matches the data attribute of the selected element. This is just a test phase before proceeding with my main project, but I've hit a roadblock. ...

javascripthtmlarrays

Modify a HTML element periodically

My first project involves creating an HTML5 clock, but I'm encountering issues with updating the .innerHTML property every second. Interestingly, console.log is working perfectly fine for me. Here's my main.js: var baseDate = new Date(); var ...

javascripthtmldom

Transferring the selected option from a drop-down menu to a PHP page using an HTML form

I'm currently working on developing an HTML form that will send the user's question and the selected topic to a PHP page. The topics are retrieved from a MySQL database using PHP. My goal is to submit the chosen topic value from a dropdown menu, ...

phphtmlmysqlforms

Step-by-step guide on building an endless reviews carousel

Can someone assist me in creating an endless reviews carousel? I've been grappling with it for the past two days. Just so you know, I'm a newcomer to web development and my code may not be the cleanest. Here's the code snippet: <!DOCTYPE ...

javascripthtmlcss