CSS background: seeking a fresh background for the rest of my pages

When I use CSS background: url(stuffhere.jpeg) for the background, it remains unchanged when clicking on other videos categorized as "projects," not pages.

I have attempted using <body id="home"> and <body id="projects">, creating two backgrounds for #home and #projects separately, but unfortunately the projects section does not display the correct background...

Afterward, I tried using <div id="projects">; however, divs are not able to alter the entire background since it's not a standalone page.

Could someone please take a look at this issue and provide feedback? Visit www.montagemd.com, click on one of the videos, and observe how the grey background needs to cover the entire screen or override what is set in #home.

cssbackground

Answer №1

To achieve a gray background that fills the entire viewport, follow these steps:

  1. Set the div's width to 100% and min-height to 100% (min-height allows it to expand if its content exceeds the window height).

  2. Ensure that the div's parent is the <body> with a defined height of 100%. Percentage heights only work when the element's parent also has a set height.

The code will resemble this structure:

<body>
    <div id="gray-box"></div>
</body>

Here's the corresponding CSS:

html, body {
    /* Parent of #gray-box needs a defined height for % height to work */
    height: 100%;

    /* Remove any additional spacing around #gray-box */
    margin: 0;
    padding: 0;
}

#gray-box {
    width: 100%;
    min-height: 100%; /* Allow #gray-box to adjust with its content */
    background: #ddd;
}

Check out a live demo 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

What are some solutions for repairing unresponsive buttons on a webpage?

My task is to troubleshoot this webpage as the buttons are not functioning correctly. Here’s a snippet of the source code: <!DOCTYPE html> <html lang="en"> <head> ... </head> <body> <div id="container" ...

javascripthtmlcssbarcode

The simplest way to increase the size of a child element in order to generate a scrollable area

When working with HTML, it's important to consider how the size of a child div affects the parent div. If the child div is larger than its parent, scrollbars will appear on the parent div if the appropriate style rules are set. However, I'm inte ...

javascripthtmlcssresizescroll

Trouble with the Width of Selection Box Options

Encountering a peculiar issue with multiple select boxes in my project. Some of the options within the select box are exceeding the width of the box. Proper Dropdown View: https://i.sstatic.net/xDy6I.jpg Incorrect Dropdown Display: https://i.sstatic.ne ...

htmlcssangular-clibootstrap-4

Internet Explorer will automatically apply a blue border to a div element when a CSS gradient is utilized

I'm attempting to create a gradual fading gray line by using a div that is sized at 1x100px with a CSS gradient applied for the fade effect. The only issue I am encountering is in Internet Explorer where the div is displaying a blue border which I am ...

cssinternet-explorergradientlinear-gradients

Sliding in images with JQuery

I need help with animating the slide-in effect of 7 "card" images from the left to the center of the screen. I attempted to achieve this using the following code: function FetchCards() { $("#pack").css('margin-left', 0); $("#pack").css(& ...

javascriptjqueryhtmlcssimage

The hovering over a table data element results in a superior transformation

I recently created a table with an interesting structure where the first <tr> contains two <td> elements (the first one having a rowspan), while the second <tr> only has one <td>. My goal is to have hovering over the <td> in t ...

csshover

Having trouble with the WordPress style file not functioning properly

I'm currently facing an issue while trying to upload a CSS file and a JavaScript file to a custom theme on WordPress. When I open the webpage, nothing appears and there are no elements displayed. However, when I delete the functions.php file, the webp ...

phpcsswordpress

To ensure a rectangular image is displayed as a square, adjust its side length to match the width of the parent div dynamically

How can I make the images inside my centered flexbox parent div, #con, be a square with side length equal to the width of the parent div? The image-containing div (.block) is positioned between two text divs (#info and #links). I want the images to be squa ...

javascripthtmljquerycss

H3 Tag Embraced by a Repetitive Image

As I'm developing a website, I've encountered an interesting challenge... I have an h3 tag that requires a repeating background on both sides. It's a bit difficult to describe, so I created this graphic to illustrate... Essentially, it&apo ...

htmlcss

Reorganizing bootstrap grids for smaller devices such as extra small screens

Below is a snippet of my HTML markup: <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> Some contents </div> <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12" > Some Content </d ...

htmlcsstwitter-bootstrap-3responsive-design

Ways to utilize a single HTML page for various URLs while changing one variable value based on the queried URL

My current HTML page structure looks like this: <body ng-controller="DashboardDisplay" onload="submit()"> <div class="container-fluid" > {{scope.arr}} </div> </body> <script> var myApp = angular.module(&apos ...

javascripthtmlcssangularjsnode.js

Adding space around images in JavaFX

Just a quick question. I'm wondering if there is a way to apply padding to an ImageView using CSS in JavaFX. I've attempted insets, padding, and other methods with no success. Alternatively, can the same effect be achieved with a Text Object? ...

javacssjavafx-8

The flex grow animation fails to activate when the Bootstrap 4 style sheet is added

Trying to implement transitions with flex grow has been a challenge. It works smoothly without any issues, but as soon as I add the bootstrap 4 style sheet, the transitions stop working. I haven't even started using the bootstrap 4 classes yet, it&apo ...

cssflexboxbootstrap-4transition

Is there a way to adjust the SVG level so that it aligns with the center of the polygon instead

Looking to align a simple svg icon for a dropdown button with the text in the button so that the centers match up. Currently, the icon is aligned with the bottom of the text instead. Here's the code for the svg: <svg xmlns='http://www.w3.org ...

cssreactjssvg

Incorporate Javascript to smoothly transition a div into view, display it for a specified duration, gradually fade it out, and ultimately delete

I am excited to experiment with toast notifications by creating them dynamically. Each toast has a unique id number and I increment a counter every time a new one is created. The current functionality includes the toast sliding down, staying visible for 3 ...

javascriptjqueryhtmlcss

The Python Django site is failing to detect and implement CSS updates

Currently, I am in the process of developing a Django website where I have successfully loaded my CSS and HTML files as static resources. In this project, I am utilizing two CSS files: one for Bootstrap and another for my custom styling. However, I encoun ...

pythonhtmlcssdjango

The 'slide.bs.carousel' event in Bootstrap carousel is triggered just once

Take a look at my JavaScript code: $('#carousel-container').bind("slide.bs.carousel", function () { //reset the slideImg $('.slideImg',this).css('min-height', ''); //set the height of the slider var ...

javascriptjqueryhtmlcsstwitter-bootstrap

Having trouble adjusting the vertical position of jQuery Spinner buttons

I'm attempting to customize the jQuery spinner with styling applied like this: <span class="ui-spinner ui-widget ui-widget-content ui-corner-all" style="height: 14px;"> <input id="testSpinner" class="ui-spinner-input" name="value" aria-value ...

jqueryhtmlcss

Creating a dynamic image carousel using jQuery

Today, I completed the jQuery course on Code Academy and am now trying to create an image slider using it. While I have a general idea of how it should work, I feel like I'm missing a key element. My goal is to have the slider continuously running whe ...

javascriptjqueryhtmlcss

The website is displaying a strange mix of text and HTML when viewed on a PC

While browsing the internet for C programs, I stumbled upon this particular program that caught my eye: <span style='color:#004a43'>#</span><span style='color:#004a43'>include</span><span style='color:#8 ...

javascripthtmlcssfirefox