``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 is the best way to add a right-hand side navigation bar without blocking the scrollbar from view?

Take a look at this webpage: I am designing a website that includes a header, a footer, and a central container with left and right navigation bars surrounding a content area. However, I want the scrollbar for the content to appear on the right side of th ...

css

Easily toggle between various image source paths

In my current application, all HTML files have hardcoded relative image paths that point to a specific directory. For example: <img src="projectA/style/images/Preferences.png"/> Now, I am considering switching between two different project modes: & ...

javascriptjqueryhtmlangularjs

Make sure the inputs in separate table data cells are lined up in

I need help aligning two input fields in separate td elements to be on the same line. The issue I am encountering is that when an input is added to a td, it covers up any text within the td. https://i.stack.imgur.com/c7GiQ.png There are two scenarios: I ...

javascripthtmljquerycss

I attempted to implement a CSS and Typescript animation for a sliding effect, but unfortunately, it isn't functioning

So I'm encountering an issue with this unique ts code: {/* Mobile Menu */} <div className="lg:hidden"> <button className="flex items-center w-8" onClick={toggleMenu}> {isMobileMenuOpen ? ( ...

cssreactjstypescriptcss-animations

What is the point of the horizontal scroll bar in WP Thesis?

There seems to be a horizontal scroll bar appearing at the bottom of my site, even though there is no content extending beyond the visible area. Can anyone provide guidance on how to fix this issue? My website is built on Wordpress 3.0 and utilizes the Th ...

htmlcsswordpresswordpress-thesis-theme

Is there a way to alter the text color using JavaScript on the client side?

Is there a way to change the color of a list item in a ul based on whether it is a palindrome or not? Here is the JavaScript file I am working with: function isPalindrome(text){ return text == text.split('').reverse().join(''); } c ...

javascripthtmlformsstylesevent-listener

Images that have been resized on Android appear blurry when viewed on the second page

Customizing the Toolbar: #main_bar { background: url(../images/logo.jpg) 99% 50% no-repeat; background-size: auto 80%; } The original size of logo.jpg is 220x266px The toolbar has a fixed height of 46px Therefore, the background image appears t ...

androidcssresizebackground-image

The comparison between AJAX and JSON passing and PHP generating HTML versus returning it

Currently, my code looks like this: <li onclick = " function CBAppData( callerObj, data ) { var string = ''; for( a in data ) { debug.push( data[ ...

phpjavascripthtmlajax

Specifying Size of Icons in HTML and CSS

Displayed in the image below are 3 icons - 2 of them are the same size, while one (on the left) appears larger and uneven compared to the other two. This snippet demonstrates the HTML code related to this section: <article class="number"> ...

htmlcss

I am experiencing an issue where the repeat-x property on my background image is causing it

Currently, I'm facing an issue with a background image that has the repeat-x property. Oddly enough, it appears to be working properly on Windows OS but not on Mac. Whenever I access the website, there seems to be a significant amount of white space c ...

cssbackground

What are some techniques for concealing a rendered element retrieved using the fetch API?

Currently, I am grappling with a coding challenge that requires me to extract data from https://jsonplaceholder.typicode.com/users using the fetch API function along with bootstrap and jquery. To display the data in a div element, I utilized the array.map( ...

javascripthtmljquerycssangularjs

Fetch real-time server information using the img src attribute

Currently, I am using ajax jQuery to dynamically populate an image src with a value that is retrieved from the server. However, I would like to streamline the code and eliminate the need for the jQuery portion. This is the current setup: Javascript (code ...

jqueryhtmlasp.net-mvc-4

Tracking the progress of reading position using Jquery within an article

Here is an example of a reading progress indicator where the width increases as you scroll down the page: http://jsfiddle.net/SnJXQ/61/ We want the progress bar width to start increasing when the article content div reaches the end of the article c ...

javascriptjqueryhtmlcssscroll

PHP table not displaying data

I am brand new to this and currently enrolled in a class with an unhelpful professor. I am attempting to read data from a file into a table, but for some reason the data is not displaying. I have tried multiple approaches, but I am feeling quite lost. Any ...

phphtml

CSS3 animations with background-image for Firefox are an exciting way to enhance the

I am currently working on a keyframe animation project using CSS. The animation is running smoothly in Chrome with supported -webkit syntaxes. @-webkit-keyframes title_toggle { from { background-image:url(images/title.png); } 75%{ background-image:url(im ...

htmlcssfirefoxanimationkeyframe

Unable to successfully import an external HTML file that contains a script tag

I am currently experiencing an issue with my index.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8> <title>MyApp</title> <link rel="import" href="./common.html"> </head> <body> ...

javascripthtml

adjustable backdrops

Hi there, I'm trying to create a background image that resizes with the window while maintaining its proportions. I want to achieve this using CSS only. I've been searching for a solution but haven't found anything that works for me. I even ...

css

Leveraging the power of font awesome icons as background images within React applications

I am facing an issue with my dropdown menu. I have styled the caret using CSS background-image property, but now I would like to use a Font Awesome icon instead. I attempted to implement two different styles for the background image with no success. The d ...

cssreactjssvgbackground-imagefont-awesome

"Reposition all elements contained within a div that have a specific class

I'm completely new to Javascript and I've been trying to move all elements with a specific class inside a particular div. After doing some research, I found a solution that worked using IDs. However, when I tried to adapt it to work with classNam ...

javascripthtmlnode.jsclassnodes

How to dynamically change the color of a button in a list in Vue.js when it is clicked

I am working on a dynamic list of buttons that are populated using an array of objects: <div class="form-inline" v-for="(genre, index) in genreArray" :key="index" > ...

javascripthtmlcssvue.jsobject