Stop the background from moving by fixed positioning the content

After reading an enlightening article, I decided to create a supporting example for the questions that have arisen.

body{
  height:100%;
  width:100%;
  margin:0px;
}

h1{
  margin:0;
  padding:0;
}

.wrapper{
  height:100vh;
  background: url('https://wallpaperaccess.com/full/257525.jpg') no-repeat center center / cover;
  background-attachment: fixed;
}

/* dark overlay */
.wrapper::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:100%;
  background-color: rgba(33, 33, 33, 0.5);
}

.content{
  position:absolute;
  color:#fff;
  top50%;
  left:0;
  right:0;
  width:50%;
  margin:auto;
  text-align: center;
}
<div class="wrapper">
  <div class="content">
    <h1>
  Let's write some text
  </h1>
  Lorem ipsum dolor sit amet consectetur adipisicing elit... // Text shortened for brevity //
  </div>
</div>

  1. Question one delves into the positioning of text within the layout. By tweaking the CSS properties such as removing position:absolute; for the .content class, it affects how the elements stack in relation to each other.
  2. The second query brings up the issue of overflowing content causing the page to become scrollable, detracting from the intended experience. This problem prompts consideration of potential solutions to maintain the aesthetic balance.
  3. Is there a feasible alternative using position:relative; and z-index: 1; to reach the desired outcome?

I appreciate your insights on navigating the intricacies of CSS.

htmlcss

Answer №1

  1. :before (or ::before) refers to the element's innerHTML content appearing before it. It does not affect the position context. In your example, the :before pseudoelement has absolute positioning, placing it on top of statically positioned elements by default. If you remove position: absolute from your .content, it will revert to position:static, which is the default setting.

  2. You are able to scroll because the content div contains additional text that extends beyond the background image. To prevent this, you can add overflow: auto and height: 100% to your .content styling to keep it within its container.

  3. position: relative establishes a new position context for z-indexing purposes, but unlike position: absolute, it does not remove the element from the document flow. In the specific case presented here, defining the height achieves similar functionality as this very specific case.

.content{
  color:#fff;
  top: 0;
  left:0;
  right:0;
  width:50%;
  margin:auto;
  text-align: center;
  height: 100%;
  overflow: auto;
  position: relative;
}


body{
  height:100%;
  width:100%;
  margin:0px;
}

h1{
  margin:0;
  padding:0;
}

.wrapper{
  height:100vh;
  background: url('https://wallpaperaccess.com/full/257525.jpg') no-repeat center center / cover;
  background-attachment: fixed;
}

/* dark overlay */
.wrapper::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:100%;
  background-color: rgba(33, 33, 33, 0.5);
}

.content{
  color:#fff;
  top: 0;
  left:0;
  right:0;
  width:50%;
  margin:auto;
  text-align: center;
  height: 100%;
  overflow: auto;
  position: relative;
}
<div class="wrapper">
  <div class="content">
    <h1>
  Let's write some text
  </h1>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, minima quod? Molestiae cumque sint veniam corrupti mollitia? Tenetur sint officia quod ex aspernatur? Blanditiis reiciendis, pariatur vero suscipit magnam deleniti!
  <!--Content continues...-->
  </div>
</div>

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

Customizing the language parameter for the apply button script on LinkedIn

Our company's website features the AWLI button which allows users to apply for jobs using their LinkedIn profile. <div name="widget-holder"> <script type="text/javascript" src="https://www.linkedin.com/mj ...

javascripthtmllinkedin-api

Concealing an element in React

In my code, I have a couple of React classes implemented. When the app is launched, the user sees the following: <div> <h1 className="headings" id="heading"> Football </h1> <input type="text" placeholder="name" /> & ...

javascripthtmlreactjscomponents

Tips for showcasing individual row information in a popup window with Angular 9

Here is the code snippet for utilizing the open dialog method in the component: import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { AuthService } from '../_services/auth.se ...

htmlangulartypescript

What are the steps to connecting incoming data to an Angular view utilizing a reactive form?

Hello, I am currently fetching data from an API and have successfully displayed the teacher values. However, I am unsure of how to utilize the incoming array values for "COURSES" in my Angular view. This is the response from the REST API: { "courses ...

htmlarraysangulartypescript

div element failing to adjust size when zoomed

I've encountered an issue with a form located below the banner on a website's homepage. The form includes a submit button and the entire site is designed to be responsive. When zooming in or out of the browser (ctrl + scroll up/down), I noticed ...

htmlcss

Troubleshooting issues with dropdown functionality in HTML when using Bootstrap

I'm encountering an issue with my dropdown menu not functioning properly when using bootstrap. The dropdown only appears on screens smaller than the $md variable. The problem arises when I try to click on the dropdown icon and it does not respond as ...

javascripthtmlbootstrap-4dropdown

Interactive div containing elements that cannot be clicked

http://codepen.io/anon/pen/zxoYBN To demonstrate my issue, I created a small example where there is a link button within a div that toggles another div when clicked. However, I want the link button to not trigger the toggle event and be excluded from the ...

javascriptjqueryhtmlcss

Set a CSS rule to style every other row in a table, starting from the second row and resetting after

Is there a way to refresh the even and odd count in CSS whenever a specific row is shown? Here's an example setup: header header header even even even odd odd odd Subhead Subhead Subhead even even even How can I ensu ...

htmlcss

Is it possible to upload a file to my web application without having configured any backend system?

Currently, I am in the process of developing a landing page that includes a form where users can input their data and send an email. I have successfully implemented the form using HTML, CSS, and JavaScript, and I have even managed to incorporate the email- ...

javascripthtml

Turn off automatic downloading of embedded frame content in Safari for iOS

I am encountering an issue with a modal that displays a PDF and offers two options - one to print and one to download. The download option uses a blob with content-type: application/octet-stream, while the print option utilizes a blob with content-type: a ...

javascripthtmliosreactjssafari

Tips for attaching an image to an email

Can anyone assist me with an HTML form that sends emails using PHP with image attachments? I have tried various codes, but none of them seem to work properly. The message gets sent with all the texts and even the image name, but the actual image is missing ...

phphtmlimageemailsend

fragment of the visual display

Are you aware that by utilizing the canvas tag in HTML5, it is possible to load a small portion of a large image with minimal load times? This can be advantageous when creating a game with just a few tiles but of considerable size, as it reduces the numb ...

htmlcanvashtml5-canvas

Prevent the loading of items on mobile devices

I am currently working on creating a responsive website with a background video feature. However, I am concerned about the amount of data it will consume on mobile devices. With Bootstrap, I can hide the video on small screens by using classes like hidde ...

javascriptjqueryhtmltwitter-bootstrapresponsive-design

I am encountering an issue with my HTML parser as it fails to display the complete HTML code that is utilized by the webpage when I inspect the code. Below is the snippet of my code

` import requests from bs4 import BeautifulSoup as bs import html5lib from selenium import webdriver from selenium.webdriver.common.keys import Keys driver = webdriver.Chrome(executable_path=r'D:\Web Scraping\chromedriver.exe') url = ...

pythonhtmljsonweb-scrapingbeautifulsoup

Creating an HTML dynamic table with fixed height to prevent expanding when adding text

I have a dynamic table with fixed width and height. By using a random function, I determine the number of cells (ranging from 3x3 to 7x7) in the table. The table renders correctly, but when clicking on a cell to write a letter, the row expands in height. H ...

htmlcss

Try placing the div class above the navbar in Bootstrap

I've created these fork me ribbons in CSS with the intention of placing them on top of the navbar, similar to the Github images. Here is how they currently appear: http://jsbin.com/womib/1 .ribbon { background-color: #F38419; overflow: h ...

htmlcsstwitter-bootstrap

Title with moderate underline decoration - Bootstrap

Can Bootstrap be used to add a border bottom with a width of 3rem (for example) and specify the color in the tag using a class? Here is an example: .half-title:after{ content: ""; display: block; width: 3rem; height: 4px; margin-top: . ...

javascriptcsstwitter-bootstrapbootstrap-4

Exploring nested objects within Stylus

My build script compiles my stylus code and includes some data. stylus(stylFile) .set('filename', 'index.css') .define('data', require('./data.json')) .render(...) The data.json file contains groups with nes ...

javascriptcssjsonnode.jsstylus

What is the best way to ensure that the content container's max-width for a split tier is the same as the width of a full-width tier?

My goal is to create a split tier on a webpage with a 60/40 layout. The size of this tier should be calculated based on the maximum width of the container above it. Using JavaScript and jQuery, I managed to derive the max-width value of the full-width-tier ...

javascriptjqueryhtmlcss

Add several converted links as variables in each section

The title may not be the clearest, but I am facing a challenge with an ecommerce site that has unmodifiable HTML. My goal is to include additional links for each product displayed on a page showcasing multiple products. Each link should be unique to its re ...

javascriptjqueryhtml