What is the reason behind needing to set both top/bottom and left/right to 0 so that my body::before can effectively cover the entire page?

I am currently diving into the world of front-end web development and I am having some trouble grasping the concept behind the behavior of body::before. Below is a snippet of my CSS code:

body::before {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 0, 0.45)), url(https://cdn.pixabay.com/photo/2015/03/03/05/56/avenue-656969_960_720.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}

With this setup, the background seems to shift towards the bottom-left slightly (CodePen screenshot), and only fully covers the screen when top/bottom and left/right are both set at 0. Why does the positioning behavior of body::before differ from that of the regular body? Furthermore, why does body::before not appear at all if the position is set as relative?

css

Answer №1

The default margin of 8px on all sides of the body element causes it to shift slightly towards the bottom-right. By removing this margin with body { margin: 0; }, the issue is resolved.

Additionally, when you specify 

position: relative; width: 100%; height: 100%
, the element follows the normal document flow and occupies 100% of the width and height. However, if the width and height of the body element are not defined, the ::before pseudo-element defaults to 0 dimensions and remains hidden. To use position: relative; on a child element, the parent element's width and height should be specified using absolute length units.

Therefore, the following code snippet resolves the issue:

body{
  background: #000;
  width: 100vw;
  height: 100vh;
}

body::before {
  content: "";
  position: relative;

  /* Requires parent dimensions in absolute units */
  width: 100%;
  height: 100%;
  ...
}

Answer №2

When using CSS, the ::before pseudo-element is created to be the first child of the selected element. It is commonly used for adding decorative content to an element using the content property and is inline by default.

  1. Since the ::before pseudo-element is the first child of the body, there may be a slight offset in the background position towards the bottom-left due to the default margin of the body element being added to the offset of the pseudo-element when it has position:fixed;.

An absolutely positioned element is one where its computed position value is absolute or fixed. The top, right, bottom, and left properties indicate offsets from the edges of the element's containing block (with the containing block being the ancestor relative to which the element is positioned). If the element has margins, they are included in the offset calculation. This element establishes a new block formatting context (BFC) for its contents.

  1. The pseudo-element does not display when using position:relative;. In a position relative scenario, the element is placed according to the document's normal flow; furthermore, since ::before pseudo-element is inline, it only occupies the space required, making setting height and width ineffective. Without any content, it does not occupy any space causing the background image to vanish. If you wish for it to fill its full height and width, utilize display:inline-block/block; or eliminate it from the normal document flow using position:fixed;, resulting in a change in display property to block.

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

Shifting Divs/Text while adjusting zoom levels in HTML/CSS with Bootstrap

As a newcomer to the coding world, I am encountering an issue with my Navbar. Everything appears fine at 100% zoom on the browser, but when I zoom in to 150%, everything becomes jumbled. How can I ensure that everything stays the same size regardless of zo ...

htmlcssbootstrap-4zooming

The background image for a pseudo element is not functioning as expected

After researching various solutions on Stack Overflow, I attempted to set fixed dimensions for the pseudo element (height: X px; width: X px;), but this is not an ideal solution for me as I require a scalable and responsive image that fits its parent eleme ...

htmlcss

Encase the entire section following cloning with JQuery

Make sure to check out the jsfiddle demo linked below before proceeding: JSFIDDLE I need to transform the original structure as shown below: <div class="out"> <a>im here</a> <a>to save</a> <a>our</a> ...

javascriptjqueryhtmlcss

What's causing the appearance of a horizontal scrollbar?

I'm puzzled by the appearance of a horizontal scroll bar on my webpage and I can't seem to pinpoint the exact cause. I've tried simplifying the page as much as possible, but there still seems to be an issue. Here's all the information I ...

htmlcssbootstrap-5devexpress-blazor

I prefer boxes to be aligned next to each other without any gaps, and I won't be

In my quest to showcase 3 boxes seamlessly lined up in a row, I am faced with the challenge of eliminating spaces between them. My goal is to accomplish this feat without resorting to the font-size property. html,body { height:100%; width ...

htmlcss

What is the best way to adjust the spacing between elements using CSS?

I am attempting to achieve this layout using CSS: The margin between each element is set to 10px. The height of the textarea is 100px and the width is 150px This snippet shows some HTML code for your reference: main form label { ...

cssmarginelement

Scaling boxes responsively according to screen size utilizing Bootstrap

Creating a portfolio website with a carousel section to display completed projects in a 2x2 grid layout, transitioning to a 1x4 on smaller screens is proving to be quite challenging. After trying various methods from Bootstrap documentation and YouTube tut ...

htmlcssbootstrap-4gridbootstrap-5

Incorporate dual repeated background images within one div element

I am struggling to apply two repeating background images in the X direction for my div. Is there a way to achieve this? I want to divide my single div into two equal parts, using the first image with background repeat-x for the first part and the second ...

htmlcss

Moving pictures using css3 transitions

Trying to create a straightforward image slider. Below is the provided JavaScript code: $(document).ready(function() { $('#slide1_images').on('click', 'img', function(){ $("#slide1_images").css("transform","translateX ...

javascriptjquerycss

Disable the borders on HTML input fields

I am looking to implement a search feature on my website. It seems that in Firefox and Internet Explorer, the search function appears fine without any unexpected borders. Firefox IE However, when viewing the search function in Chrome and Safari, there ...

csscross-browserzurb-foundation

A step-by-step guide on making an animation series with html and css keyframes

I've been working on creating a captivating animation using HTML and CSS keyframes, but I seem to have hit a roadblock. Despite trying different rotations and transforms, I can't seem to achieve the desired effect depicted in the image below. The ...

htmlcss

Trouble with Bootstrap CSS buttons: color consistency problem persists

I am facing an issue with my Bootstrap button, which currently looks like this: https://i.sstatic.net/MWHYP.png The HTML code for the button in question is as follows: <button type="button" class="btn-primary.custom-btn" data-bs-to ...

htmlcsstwitter-bootstrapbootstrap-4

Utilizing variable values in HTML and CSS to enhance a website's functionality

My current project involves modifying an HTML web resource for use in Dynamics 365. I need to replace a static URL with a dynamic value obtained via Javascript, specifically: var URL = Xrm.Page.context.getClientUrl(); There are multiple instances within ...

javascripthtmlcssmicrosoft-dynamics

The issue is that only the first checkbox within ngFor is being toggled on and off each time a different checkbox is clicked

When I have checkboxes inside a ngFor loop and click on any one of them, only the first one gets checked and unchecked, updating only the status of the first checkbox. Here is the HTML template: <div *ngFor="let num of count" class="m-b-20"> & ...

javascripthtmlcssangularcheckbox

Find and target all CSS elements that have the property of "display: inline

Can the CSS be searched by property:value instead of selector/attribute? Or does this require parsing through a server script? If it is achievable, I am considering developing a script that will automatically include the IE7 hack when the selector contain ...

jquerycss

What is the precise description of the CSS property font-size when measured in pixels?

When defining the CSS property font-size, it can be set to a specified length in pixels. What exactly does this measurement describe? Is it the width or height of a particular character (such as 'm'), is it an attribute within the font file desc ...

htmlcssfontstypeface

What is the best way to add a border around an image along with a button using VueJS?

I am struggling to link a button and an image in VueJS to display a border around the picture. While I can successfully display the border on the button, I am unsure how to extend it to the image as well. Vue.component('my-button', 'my-img& ...

javascripthtmlcssvue.jsvuejs2

Adding link styles to the <a> tag in Bootstrap 4 Alpha 3: A simple guide

The following code is quite simple: <a>This is a link</a> In a demonstration of Bootstrap 4 Alpha 2 here, the link appears blue. When you hover over it, it turns dark blue. However, in a demonstration of Bootstrap 4 Alpha 3 here, it displays ...

csstwitter-bootstraptwitter-bootstrap-4

Hiding divs toggle off when either all or only one is selected

In a certain page, there is a script that displays a div when a user selects an option. The script functions correctly, except for a scenario where if the user selects 'd' (which shows 'a', 'b', and 'c'), and then se ...

javascriptjqueryhtmlcss

A superior method for implementing CSS keyframe transitions

Currently, I am utilizing the Rico St.Cruz brilliant query.transit library for my work. However, I need to make some changes involving classes instead of CSS transitions. Although I am not very confident in CSS transitions, I attempted to replace: JS: $ ...

javascriptjqueryhtmlcss