``There is an issue with elements not remaining within the boundaries of the div that has

http://codepen.io/apswak/pen/qNQxgA

Has anyone encountered issues with nesting elements inside a header with a background image? I'm facing the problem where every element I place inside gets pushed above the background image. Is there a more effective way to achieve this?

  <div class="header">
    <h1>Lorem ipsum random stoof</h1>
    <h3>Master.</h3>
  </div>

.header {
  background-color: #222;
  background: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/825303XHAE.jpg')50% 100px no-repeat;
  background-size: cover;
  height: 700px;
  margin-top: -50px;
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
  -ms-filter: blur(1px);
  filter: blur(1px);
}
htmlcss

Answer №1

There are a couple of reasons for the issue you are facing:

Firstly, the background placement 50% 100px is causing the background image to be pushed down by 100px. You can resolve this by simply removing the 100px...

Secondly, the margin-top: -50px; on the .header class is contributing to the problem. Consider adjusting or removing it based on your desired outcome.

Check out this link for further details.

Also, please note that using filter: blur(1px); will not only blur the background image but everything within the .header section, including text. You may want to reconsider using this property...

Answer №2

Your CSS code is causing an error. The margin-top:-50px; rule is moving everything up by 50 pixels. To fix this, either remove that line or change it to a positive value to see the desired changes!

.header {
  background-color: #222;
  background: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/825303XHAE.jpg')50% 100px no-repeat;
  background-size: cover;
  height: 700px;
  margin-top: 10px;
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
  -ms-filter: blur(1px);
  filter: blur(1px);
}
  <div class="header">
    <h1>Lorem ipsum random stoof</h1>
    <h3>Master.</h3>
  </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

What steps can I take to avoid scaffold.css from taking precedence over my custom CSS?

I'm having trouble with this. It seems like a small issue, but I'm still very new to learning about rails. Any help you can provide would be greatly appreciated! Solution: To resolve the problem, I accessed the file responsible for adding head ...

ruby-on-railscss

What is the best way to create an element that is clickable but transparent in appearance?

Is there a way to achieve an inset box shadow on elements like an iframe without blocking clicks on the element itself? The common strategy of overlaying a div over the iframe achieves the desired visual effect but unfortunately hinders interaction with th ...

htmlcss

Tips for creating zoomed-in background images on small screens

I am currently implementing this code for a website project .homepage{ background-image: url(/wp-content/themes/ep/img/_.png); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background ...

twitter-bootstrapcss

How come an image with position:absolute doesn't have a height? Even though I can clearly see its height in the browser

I'm perplexed as to why a div with display:block won't position itself below another div with the same style. Here's my code: .container{ display: block; position: relative; } .container img{ width: 100%; position: absolute; t ...

htmlcssposition

Issues with Firefox's -moz-placeholder functionality were observed not being functional as

I'm having trouble styling this placeholder in Firefox 13.0.1 Here is the input field with a placeholder: <input class="textFieldLarge" placeholder="Username" id="username" name="username" type="text" /> This is the CSS associated with it: . ...

csshtmlfirefox

What is the process for extracting specific text from a web page source using Python with Selenium?

The following is the HTML source code: <div class="dropdown-popup"> <a href="/integrations/sources/" class="dropdown-item">Sources</a> <a href="/integrations/destinations/" cla ...

htmlpython-3.xseleniumselenium-webdrivercss-selectors

Guide to navigating through a webpage to locate the specified element with Selenium

Is there a way to ensure that when scrolling to an element in selenium, it appears at the very top of the browser window rather than just being visible on the page? What steps can be taken to make sure that the element being scrolled to is positioned at t ...

pythonhtmlpython-3.xseleniumselenium-chromedriver

Using Django to upload an XML document via an HTML form

When working with Django framework and python scripts to validate XML files, my usual approach involves parsing the XML file located at a specified location using the following code: import xml.etree.ElementTree as ET tree = ET.parse('config.xml&apos ...

pythonhtmlxmldjango

Hide the entire TR if Mysql equals zero

How can I apply the style "display: none;" to an entire TR if the result from row credits is 0? Should I achieve this using CSS or a MySQL query? <?php $username = "root"; $password = ""; $database = "aaa"; $mysqli = ne ...

phpcssmysql

Having trouble with refreshing the div content when using jQuery's $.ajax() function

My goal is to refresh a div that has the id #todos after saving data in the database. I attempted to use .load() within $.ajax() $('.todo--checkbox').change(function () { let value = $(this).data('value'); $.ajax({ url: ...

javascripthtmljquerynode.jsajax

Troubleshooting the challenges with jQuery's next().addClass() and prev().addClass() functions

I am attempting to create a slider feature. I have four different contents that I've positioned consecutively, but made them invisible initially. I defined a class called active-client with the attribute display: flex. Using jQuery's addClass() m ...

javascriptjqueryhtmlcssslider

What could be causing the second image to not drop in the proper position in an HTML and JavaScript environment?

I am encountering an issue with a simple drag and drop implementation using images in my code. The first image works fine, but for some reason the second image does not display correctly when dragged inside the div boxes; it appears outside of the box. Can ...

javascripthtml

Retrieve all HTML dependencies, such as JavaScript and CSS files, using the same method as a web browser

I am currently working on a Single Page Application (SPA). My main objective is to evaluate the performance of the application using . Given that the application is an SPA, I want to simulate a scenario where all static content is loaded when a user firs ...

javascripthtmlcss

Incorporating HTML themes within ReactJS

While I am still relatively new to ReactJS, I am eager to expand my understanding of it with this question. I have a preexisting HTML/CSS theme that I would like to integrate into a React application. Is there a method to incorporate this theme seamlessly ...

javascripthtmlreactjs

What is the best way to animate the preprending of a div in an AJAX response?

Here is the code I am currently working with: $.ajax({ type: 'POST', url: 'load_more.php', data: {val:myval}, success: function (data) { $("#load_current").prepend(data); ...

javascriptjqueryhtmlcssajax

I encountered an issue while attempting to retrieve data using route parameters. It seems that I am unable to access the 'imagepath' property as it is undefined

Is there a way to access data when the page loads, even if it is initially undefined? I keep getting this error message: "ERROR TypeError: Cannot read properties of undefined (reading 'imagepath')". How can I resolve this issue? import { Compone ...

htmlangulartypescriptcomponentsrouteparams

Issue with ng-repeat causing HTML table data to not appear

Trying to create a Flask web app, I encountered an issue while attempting to display tabular data on my webpage using AngularJS. Despite using ng-repeat to iterate through the data, it doesn't seem to work and no errors appear in the console. Can anyo ...

htmlangularjsangularjs-ng-repeat

contenteditable -- Utilizing AngularJS to create a block element for the title only

When I click on an input field that is editable, I want the background color to change to white within the box. Can someone please assist me with this? Below is my code: HTML <div id="section{{section.index}}"> <h2 class="title" contentedit ...

javascripthtmlcssangularjscontenteditable

Implementing CSS styles according to user preferences. Switching between dark mode and light mode based on subscription

Is there a way to dynamically change CSS property values based on user interaction, such as toggling between dark mode and light mode? I am currently exploring the option of setting up a subscription to track these changes, but I want to know how I can act ...

javascripthtmlcssangular

Aligning the tooltip element vertically

I've created a unique flexbox calendar layout with CSS tooltips that appear on hover. One challenge I'm facing is vertically aligning these tooltips with the corresponding calendar dates effectively. Although I prefer to achieve this alignment u ...

javascriptjquerycssflexbox