Attempting to extend a colored background block to span the full height of the screen

I'm currently working on a page with a background image, and I want to add a color block behind all my content while still allowing the background image to be visible in the margins.

How can I make sure that the color block extends from the top to the bottom of the page?

To achieve this layout, I have enclosed all my content in a <div> tag, except for the logo image in the corner:

<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%;
}

https://i.sstatic.net/GYK5E.jpg

Answer №1

It seems like you're looking to make something stretch from top to bottom of the page. One way to achieve this is by using either height: 100% or height: 100vh. The "vh" unit represents viewport height and will take up 100% of your screen's height.

Another tip is to avoid applying background images directly to the html tag. It's generally better practice to create a wrapper div and then set the background on that div instead.

If you do choose to use 100vh for height, consider using the CSS calc function to adjust for elements like a navbar. For example, if your navbar is 50px tall, you could use height: calc(100vh - 50px).

Answer №2

1.) Ensure that both the element and all its parent elements have height: 100%; to establish a height reference for the percentage.

2.) Set margin: 0 for body and html to eliminate default margins.

3.) To prevent collapsing margins from causing unwanted spacing, add a small (1px) top and margin-bottom to your .white-background element.

4.) If your logo does not already have absolute positioning, make sure to 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>

Answer №3

Some browsers consider the HTML and Body tags to be the sizes of the content inside them, while others view them as the viewport size. However, you have the ability to override the default CSS rules that are applied.

To address this issue effectively, one simple solution is to adjust your <html> tag to match the viewport size.

CSS:

html{
   position:absolute;
   top:0px;
   left:0px;
   right:0px;
   bottom:0px;
   overflow:auto;
   background:blue; /* customize your background here */
}

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

React NextJS CSS - Setting the section's height to 100% of the parent's height results in taking up 100% of the page's height

I've encountered an issue while transferring my project to NextJS from Create-React-App. In NextJS, setting the height of a section to 100% is causing it to take up the entire page height instead of adjusting for the header and footer elements. I nee ...

Discover the secret sauce to effortlessly adding text upon hovering over a button

I am completely new to CSS and only know the basics. Recently, I stumbled upon this code online that creates a button. However, I want to use an image inside the button, add a color overlay when hovered, and display text saying "LEARN MORE" upon hovering ...

Looking for a comprehensive guide on multi-column programming options?

After reviewing information from source1 and source2, it appears that IE9 will not support multi-column CSS3. Since IE9 is still the most popular browser (which I find puzzling), I am left with no choice but to utilize Programming Power to implement multi- ...

Troubleshooting problems with CSS background-image cover styling

My sanity is hanging by a thread as I struggle with an issue on my new webpage. I'm working on a project at www.romaheritage.co.uk/beta, and I can't seem to get a background image to show up in the "contact" section near the bottom of the page wh ...

The pre-line white-space property is not functioning as anticipated in my CSS code

content: string; this.content = "There was an issue processing your request. Please try using the browser back button."; .content{ white-space: pre-line; } <div class="card-body text-center"> <span class="content"> {{ content }} </span& ...

How to set up a multi-select box for tagging purposes

I tried to implement a multi select box to create tags using the code below. I downloaded select2.min.css and select2.min.js from https://github.com/select2/select2, then copied them into the project's css and js folders. Here is the HTML code snippe ...

`The functionalities of classList.add and classList.remove aren't behaving as anticipated.`

I'm currently working on a list of items (ul, li) that have a class applied to them which adds a left border and bold highlight when clicked. My goal is to reset the style of the previously clicked item back to its original state when a new item is c ...

Maximizing the number of divs arranged horizontally in HTML while utilizing the full line width

My website consists of several fixed-width div elements that are styled to flow inline using the display type inline-block. This layout creates empty space at the end of the line where subsequent div elements cannot be accommodated and have to wrap to the ...

"Implementing a full page refresh when interacting with a map using

Here is an example of how I display a map on the entire page: <div id="map_canvas"> </div> UPDATE 2: I have successfully displayed a menu on the map, but there is a problem. When I click on the button, the menu appears briefly and then disapp ...

What is the best way to horizontally replace buttons in a Navbar?

I'm currently new to coding and I'm attempting to create a navbar using Bootstrap. However, I'm struggling to align the buttons horizontally. I've attempted using class="float-right" on every element without success. I even tried using ...

Guide to collapsing all menus in an Angular 4 Accordion

I am a beginner with Angular 4 and I have implemented an accordion with the structure of Categories, Groups, and Subgroups. When I click on a category, it displays all the groups within that category. Similarly, when I click on a group, it shows all the s ...

Adjust background-color to a specific percentage offset

I have a scenario where I am populating rows in a <table> using a foreach loop. However, I encounter an issue when trying to set a grey background for a cell based on a percentage calculated in PHP. For example, if the percentage is 50%, half of th ...

Transform the appearance of an HTML tag using React

I am attempting to alter the appearance of the h1 tag in React by using style attributes, specifically focusing on color attributes. <h3 style={{color: "white", font-family:"opensans-bold"}}> Hello World! </h3> Unfortunatel ...

Styling the resizable textarea background color in Firefox

I am seeking to change the background color of multiple textareas on my website from the default white. textarea { background-color:Red; width:120px; height:80px; } <textarea>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...

select only a single element within a specific section/div

One of the challenges I'm facing on my HTML page is with a section that has a max width set by a container. The heading and two columns in this section are not floated, only the columns are floated left while the heading is center text aligned. This a ...

Obtain the contenteditable span's value

I'm facing an issue with a content editable span - I want to extract its value when the post button is clicked, but it's not working as expected. Please note that I am unable to convert the span to a textbox or div, I specifically need the value ...

Ignored CSS Style Class

Recently, I've taken on the task of developing a website that utilizes uikit features that are new to me. I'm slowly getting the hang of it. One specific part of the website is a drop-down menu containing links and headers. I have successfully s ...

Incorporate CSS styling into ScalaHelpers

Is it possible to customize the CSS for Scala Helpers and remove certain text from the textfield? https://i.sstatic.net/eG6HY.png @inputText(advForm("weeknr")) @inputText(advForm("jaar")) @inputText(advForm("datum")) --------------------EDIT 1---------- ...

Trouble displaying a cloned HTML element

I used jQuery to create a copy of a div and positioned it on the page, but for some reason, it's not displaying. When I checked using F12 tools, all the properties such as top, left, height, and width seemed to be set correctly. <div id="divLine" ...

Utilize div elements to replicate the functionality of an iframe on a web page

In a recent discussion in my coding course, the topic of creating a structure similar to an iframe using only divs and javascript/css came up. The teacher mentioned that it was achievable, but as someone new to programming, I'm struggling with the con ...