Trying to make a background color block reach the top and bottom of the screen

full width background color css
body background-color not extending to bottom of page
html, body not filling page
background-color not filling entire page
body doesn t reach bottom of page
extend background color css
css div full width of screen
background color full height css

I have a background image on my page, I'm trying to place a color block that goes behind all my content but leaves the background image visible in the margins.

How do I get it to reach the top and bottom of the page?

I've placed a <div> tag around all my content excepting the logo image in the corner like so (please let me know if anything is unclear):

<head>
    <meta charset="utf-8">
<title>Services</title>
<link href="Coppermug Stylesheet Services.css" rel="stylesheet" type="text/css">
    </head>

    <div>
        <a class="home-logo" href="EXAMPLE.html"><img src="EXAMPLE" id=bannerlogo></a>
     </div>

    <div class="white-background">
    <div class="navbar" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
  <a class="nav-link" href="EXAMPLE.html">Home</a>
</li>
<li class="nav-item">
  <a class="nav-link" href="EXAMPLE.html">Services</a>
</li>
          <li class="nav-item">
            <a class="nav-link" href="EXAMPLE.html">About Us</a>
          </li>
<li class="nav-item">
  <a class="nav-link" href="EXAMPLE.html">Contact</a>
</li>
   </div>
</div>


html {
    background-image: url("../Final Logo Assets/Minimized/Blur Mug-min Opacity-min.jpg");
    background-repeat: no-repeat;
  background-size: cover;
}   


.white-background {
    background-color: #FFFFFF; 
    margin-right: 20%;
    margin-left: 20%;
}

I didn't exactly get what you are trying to do, but in the most cases, if you want something to extend from top to bottom of the page, you could try height: 100% or height: 100vh, vh refers to viewport height and takes 100% of your screen height.

Also, it is kind of a bad practice to use a background image to the html tag, I'd suggest you to use a wrapper div and use the background on that div.

And if you're going to use the 100vh, use the calc function of css but you have to subtract the height of the navbar.

Example : If your navbar is 50px, you have to use height: calc(100vh - 50px)

CSS / HTML Background color for a div not reaching bottom of page , if you know in advance that you want elements to spread all over the screen, it might make sure you set box-sizing: border-box on your elements so that you'll get the size background-color: #262626; float: left; padding-left: 0px; padding- top: 0px; Old answer: Try specifying the height of the body as 100% too like this : I am trying to achieve a full width background color behind a code block on my website. The code block has two divs - one for the background color, and one for the content.The CSS I am using at the moment is as follows: #Bio { background-color: #e5e5e5; margin-left: -600px; margin-right: -600px;

1.) You need to use height: 100%; for the element itself AND for all its parent elements in order to have a height reference for the percentage.

2.) Add margin: 0 to body and html to avoid the default margin.

3.) Add a tiny (1px) top and margin-bottom to you .white-background element in order to avoid collapsing margins of its children elements to cause a margin at its top and bottom

4.) I suppose your logo has absolute position - if not, add it.

html {
  background-image: url("https://placehold.it/800x1200/fa0");
  background-repeat: no-repeat;
  background-size: cover;
}

html,
body {
  height: 100%;
  margin: 0;
}

.white-background {
  background-color: #FFFFFF;
  margin-right: 20%;
  margin-left: 20%;
  height: 100%;
  padding: 1px 0;
}

.home-logo {
  position: absolute;
}
<div>
  <a class="home-logo" href="EXAMPLE.html"><img src="https://placehold.it/100x30/af0" id=bannerlogo></a>
</div>

<div class="white-background">
  <div class="navbar" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="EXAMPLE.html">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="EXAMPLE.html">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="EXAMPLE.html">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="EXAMPLE.html">Contact</a>
      </li>
  </div>
</div>

Full Browser Width Bars, Want to make the full-width bar a different color than the heading background? fill vertically */ top: 0; bottom: 0; width: 9600px; right: 100%; background: green; positioned Login Box from disappearing off the left side of the screen. I've tried using the browser prefix -ms-overflow-x but no joy there. display: inline-block; I ran into a situation where I have a link that is set as a display:block.I'm trying to fill the background-color property with a color, but only behind the text; instead, it's filling the entire background of that row, which is logical, but not what I want.

The HTML and Body tags are the sizes of the content inside them in some browsers in others they are the viewport size but you can override the default CSS rules applied. The easiest way to combat this is to set your <html> tag to the viewport size.

CSS:

html{
   postion:absolute;
   top:0px;
   left:0px;
   right:0px;
   bottom:0px;
   overflow:auto;
   background:blue; /* this would be your background setup */
}

Creating sliding effects using sticky positioning, They're already doing what they need to do: stick to the screen. can pass and hide under on a page — I went with a background-image . top to bottom, starting with 50px of transparency and a color change with a hard stop at 50px . However, if I try to break things down into components in either react� I am trying to make the image only opaque while keep the rest of the screen normal. I have already tried a simple usage of opacity (ex: opacity: 0.9;) My current code looks like this: HTML

CSS Overlay Techniques, First, you need to make sure that the overlay is positioned absolutely with which is getting 100% the height of the body, won't reach the bottom of the height: 100%; width: 100%; z-index: 10; background-color: rgba(0,0,0,0.5); } of an element with position:absolute are relative to its containing block, the� How to change block background colors - posted in Store Design & Templates: I've got an image I want to pop up as a background on our website.I've got it on there using firebug so only I can view it and looks great!Problem is you cant see any of the block writing. The background color is dark and so is all the writing on the whole page..I know there is a way to do this, just cant pin exactly

Positioning, Or if you want to create a UI element that floats over the top of other parts of the no difference at all, except for the updated background color of the 2nd paragraph. My adjacent block level elements sit on new lines below me. Try setting top: 0; bottom: 0; left: 0; right: 0; and margin: 0; on your positioned� My computer) & Windows Defender. Step 2: Right-click on “Command Prompt” and click on “Properties”. This will open Command Prompt Properties. Step 3: Click on “Colors” section. Choose the “Screen Background” radio button if any other button is selected and click on any color to for a new Screen Background.

CSS Layout - The position Property, Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. example, the sticky element sticks to the top of the page ( top: 0 ), when you reach its top: 0; background-color: green; border: 2px solid #4CAF50; }. Try it Yourself �� Go to your phone’s Settings and tap on General. Now, go to Accessibility and select Vision. In the vision tab, there are three options you can select from: Greyscale: This will convert your screen to black and white. Screen color inversion: The screen colors would be shown in an opposite way.

Comments
  • As @Andrei Sandica mentioned, you shouldn't really style the very base of your webpage. You can create a div right next to the html and do the same styling you wish. Now for the full width and height, try setting your body like: {margin: 0px; padding: 0px;}.