Ensure that the header stands out by creating a grey background for the rest

https://i.sstatic.net/XUCkS.png

Is there a way to change the background color of this layout to grey, excluding the top bar and bottom footer?

The layout is structured like this:

<html>

<head>
  <body>
    <div id="big_wrapper">
      <header id="header">
          <div>
            <img src="content"></img>
        </div>
    </div>
    <form>
      <div class="search-box">
        <input class="search-bar" type="search" name="" placeholder="Search...">
        <button class="text-btn" type="submit"><i class="fa fa-search"></i></button>
      </div>
    </form>
  </header>
  
  <div class="meat">
    'content'
  </div>
    
</div>
  </body>
</html>

Answer â„–1

Give it a go!

html {
  background-color: lightgray;
}

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

Discovering the div element with a corresponding data attribute and subsequently removing a class from it

My code attempt doesn't seem to be functioning as expected: $('container').find("[data-slider='" + one + "']").removeClass('hidden'); This is the complete function enclosed within a document ready function: $("#service ...

A JSON object received from an AJAX request is either null or empty

I recently deleted a previous question that I had posted because it was no longer relevant and there was another issue to address. The response provided below is very clear, more so than other responses, and I believe it will be beneficial for anyone else ...

Utilizing multiple div IDs within the same script functionality

I have multiple dropdown menus on a webpage, and whenever an onchange event happens with any of these menus, I want to utilize the same block of code rather than creating individual scripts for each menu's id. This approach is preferred as the page ma ...

How to position the <th> element at the center in a double header table using

I need help centering the th element Vieillesse de base between two other th elements in a table. I want to move the position of th Vieillesse de base to be aligned with both Provisionnel and RĂ©gularisation. Here is my HTML code: <div class="row mt ...

Make individual term span the entire width of 100%

Is it feasible to expand a single word like "News" to occupy 100% width of the div element? My goal is to automatically adjust letter spacing and justify individual words. Currently, I have a menu with items such as: Home About News Etc It would be idea ...

Flask-generated Bootstrap sidebars remain expanded and do not collapse

For my Flask Web App, I decided to incorporate a Bootstrap 5.0 sidebar by downloading an example from the Bootstrap page that suited my requirements. The standalone HTML/CSS/JS file worked perfectly, with the second level collapsing/expanding automatically ...

Is it possible for a user to chat on Whatsapp by entering their mobile number in an HTML form within the app?

<?php require_once('./database.php'); if(isset($_REQUEST['submit1'])) { $number = $_REQUEST['whatsappnumber']; $code = $_REQUEST['countorycode']; $sql = "INSERT INTO whatsapp (whatsappnumber,counto ...

The Firefox extension is experiencing an issue with loading moment.js before chart.js

I've been working on porting a Chrome extension to Firefox that includes Chartjs charts on a page. It runs perfectly on Chrome, but I've encountered an issue when trying to transition it to Firefox. The charts fail to load and an error message di ...

What is the best way to manage a custom child event that is triggered using this.$emit in a parent component, specifically within the <script> section of the .vue file?

In our project, we're utilizing vue and typescript, which means that our .vue files are structured very similarly to the layout outlined in this blogpost. One of our child components is emitting a custom event called changeType. I'd like to trig ...

Encountering an issue while trying to create a user in Firebase

I am currently following a tutorial on Vue.js from Savvy Apps, which utilizes Firebase with Firestore. As the tutorial mentions that Firestore is still in Beta, I anticipate potential changes - and it seems like that might be happening in this case. While ...

Insert placeholder text without access to the input field

Is it possible to activate a placeholder in a component that is outside of the current context? For example: <foreign-component [config]="someConfig" placeholder="somePlaceholder"></foreign-component> The <foreign-compo ...

React - The issue with my form lies in submitting blank data due to the declaration of variables 'e' and 'data' which are ultimately left unused

Currently, I'm working on incorporating a form using the react-hook-form library. Despite following the documentation and utilizing the handleSubmit function along with a custom Axios post for the onSubmit parameter like this: onSubmit={handleSubmit( ...

Select an option within a for loop nested in an each function

How To Fetch JSON Data and Create a Shopping Cart $.ajax({ url: "myurl", type: 'POST', dataType: "json" }).done(function(response){ $.each(response,function(k,v){ //UL this products info list ...

Can we use HTML and CSS to subtly reduce the emphasis of text on a webpage?

In my usual HTML(5) practice, I would implement the following structure: /* CSS Code */ footer p { font-size: 16px; font-weight: normal; } footer strong { font-weight: bolder; } <!-- Example of HTML Structure --> <footer> <p>Title &l ...

Extracting information from JSON ( AngularJS)

I have a collection of questions stored in my JSON file, but I want to display only one at a time until the user selects the correct answer and proceeds to the next question. Here is the HTML template: <div ng-controller="quizController"> <ul> ...

Dealing with substantial ajax responses using JavaScript

Currently, I am in the process of developing a website that utilizes jQuery File Tree. However, there is an issue with the enormous size of the AJAX response from the server - 900 KB and containing approximately 70,000 'files' (which are not actu ...

Changing the element to "position: absolute" prevents it from stretching to the full width

After styling my login page to perfection with the container div set to display: block and position: static, I encountered an issue when attempting to switch to display: inline-block or position: absolute. The container div stopped adhering to its maximum ...

The audio must start playing prior to being forwarded to a new page

As I delve into the world of website development on my own, I have encountered an interesting challenge. At the top of my webpage, I have embedded an audio file within a button. If the user chooses to mute the audio, the navigation links will remain silent ...

JavaScript progress bar with extended duration, inspired by the success-oriented approach

Currently, I am in search of a unique solution or plugin that can replicate the same effect as Kickstarter's crowd fund long term progression bar. It seems like existing solutions only offer short term dynamic progress bars that indicate the percentag ...

When the cancel button is clicked, the collapse attribute ceases to function

Check out this code snippet containing a button and a div: <button id="button2" class="btn btn-success btn-block" type="button" data-toggle="collapse" data-target="#collapseGroupTwo" aria-expanded="false" aria-controls="collapseGroupTwo"> <sp ...