Background color for the DIV is not displaying properly when it is set to the

While trying to set the background color of a div to light blue #2390bb, I encountered an issue. Even though I have already set the body background color to Light Grey#D6D6D6, the light blue color doesn't display in the div. Can anyone help me figure out why this is happening? Thank you in advance for any assistance. Here is the code snippet:

HTML;

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<style>
body {
background-color: #D6D6D6;
}
</style>
</head>
<body>
<!--TOP COLOR BG-->
<div id="bg-top"></div>

</body>
</html>

CSS;

#bg-top {
background-color: #2390bb;
}

Here's an example of what I am aiming for:

Answer №1

Just a heads up:

The issue with the div not showing the blue color is due to it having no content or specific dimensions like width/height.

To eliminate gaps on the edges, try adding this CSS code:

#bg-top {
  background-color: #2390bb;
  position:absolute; 
  top:0;
  left:0;
  width: 100%;
  height: 200px;
}

If this solution works for you, please mark it as the answer!

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

Is there a way to process the output of phantom.js in PHP efficiently?

I have successfully retrieved output from a phantom.js request via the command line and it meets my expectations. Now, I am interested in invoking phantom.js from a php script and then analyzing the output for specific content. My phantom.js script appear ...

When the resolution changes, the text shifts away from the bar in CSS

When I adjust the resolution of my display, the text on my top bar also changes. Can anyone help me fix this issue? In normal view: With changed resolution or smaller browser window: This is my HTML code: <body> <div class="top-panel"> ...

Generating automatic slugs in Django is a useful feature to simplify URL generation

I'm in the process of creating a blog and I am looking for a way to automatically generate the slug so that the URL can be based on the article title. Thank you very much ...

What is the best way to make my input tags move downwards when resizing the screen?

I need help with a grid layout. My goal is to have the input tags (marked in blue) shift below when resizing the browser or viewing on a mobile or tablet device, while keeping the other three tags on the same line. I attempted to position the small box to ...

What is the best way to shorten text in React/CSS or Material UI based on the line height multiples?

I'm facing an issue with creating a Material UI card that contains text. My goal is to set a fixed height for the card and truncate the text if it exceeds 3 lines. Can anyone suggest the best approach to achieve this? Here's the code snippet I&a ...

Designing a nested box layout with bootstrap HTML/CSS styling

Can anyone provide guidance on how to create a HTML/CSS layout similar to the image below? I am specifically struggling with designing the silver "Add corkscrew" box, a white box beneath it, and then another silver box nested within. Any suggestions on ho ...

The appropriate use of spacing after text in the context of HTML and

Why is it that when I add padding or margin, no extra space is created after the text? Here is the output: I have tried adding padding and margin after the Stay Tuned text, but it seems to be not working. Any insights on what might be causing this issue? ...

Stop unauthorized access to php files when submitting a contact form

I have implemented a contact form on my HTML page that sends an email via a PHP script upon submission. However, when the form is submitted, the PHP script opens in a new page instead of staying on the current page where the form resides. I have tried usin ...

Grid of squared CSS elements contained within a wrapper div that is set to a maximum

When attempting to create a CSS grid layout with square boxes, I encountered an issue. While the first row of squares remains square when setting the maximum height of the wrapper, subsequent rows are cropped into rectangles instead. The culprit seems to b ...

What is the best way to align a card-body to the right for screen sizes larger than 1280 using Bootstrap

I'm having trouble getting the float classes to work on my Bootstrap cards. Specifically, I want to float a card-img left and the card-body right using Bootstrap cards, but it's not behaving as expected. Can someone provide some insight into what ...

Sending a parameter to a form within Edge Animate

I'm facing an issue where I need to pass a variable to a form from Edge Animate. Here's the current instruction snippet: sym.$("form").append('<iframe width="100%" height="100%" src="login_PRA.php?v_id="vidn frameborder="0" scrolling="no ...

"Error: The function $(...).autocomplete is not recognized" in conjunction with Oracle Apex

Currently experiencing some frustration trying to solve the issue at hand. The Uncaught TypeError: $(...).autocomplete is not a function error keeps popping up and I have exhausted all resources on Stack Overflow in an attempt to fix it. This problem is oc ...

Having trouble incorporating custom CSS into my Rails/Bootstrap project

I’m having trouble figuring out what I’m doing wrong. I’ve added custom files and tried to override the existing ones. application.css.scss @import 'bootstrap-sprockets'; @import 'bootstrap'; /* * This manifest file will be co ...

What is the best way to implement NgClass on a single iteration within NgFor while utilizing parent/child components?

My goal is to toggle the visibility of tiered buttons when a parent button is clicked. I am using ngFor to generate three buttons on tier 1, but I'm struggling to select only the desired tier when clicked instead of affecting all of them. I've m ...

Saving Information from an HTML Form Input?

I am currently working on a form that collects information about employees including their name, age, position, and details. When the "Add Record" button is pressed, this information should be added to a designated div. Although I have set up the Object C ...

Are the site-wide navigation links working on one page but not the other?

Currently, I am in the process of constructing a website on rails and have successfully integrated a site-wide navigation bar to display on all pages. However, an issue has arisen where the navbar is visible on both pages, yet the links and hover effects a ...

`The height attribute of the textarea element is not being accurately adjusted`

When I tried to match the width(178px) and height(178px) of my table to the width and height of a text area upon clicking a button, I encountered an issue. While setting the width works perfectly fine, the height is being set to only 17px. It seems like ...

What is the best way to distinguish between relative blocks and convert them to absolute positioning?

What is the best way to locate relative blocks and convert them to absolute position while keeping them in the same place? Is this something that can be achieved using JavaScript or jQuery, or is it simply not possible? Thank you very much. ...

Choosing an option will display a specific div while hiding another using JQuery

My question involves a Select Option <select class="input_select" name="customer_type" id="central_company"> <option value="standard">Standard</option> <option value="central">Central Station</option> </select> ...

Move the element that can be dragged with the identifier X to the designated drop area with the identifier

I am attempting to create a function that will allow me to drag a draggable element and drop it into a designated container using their IDs. However, I am unsure of how to get started. dropToContainer("myDraggable", "div3"); function dropToContainer(co ...