So here is my pen --> https://codepen.io/Mike-was-here123/pen/WadgVa
First, how can i position my .aboutWrapper over top my #waterBannerImage?
I tried removing margin from top but that just reduced the height of the image.
Next, how can fix the .image-overlay (text over image) that appears to have a stuck height that, no matter what i do, never changes?
Hi michaelnicol,
For your .aboutWrapper, you can just add a negative margin-top and a padding on the top and bottom of the #about section. Or you can try it using position: absolute with a negative top.
About the .image-overlay class, I think the problem is the line height of you h1, you could try to change that property and adjust any further detail.
anyway i can make it auto? so i can just place items into the div and the div auto resizes.
How can i center it then?
No, but line-height use a value relative to the font-size, so it will be at a certain point a responsive value.
You can add one more div nested with a class name like .aboutOverlay and do those changes:
.aboutWrapper {
position: relative; // set .aboutWrapper to relative
width: 70%; // maintain the older width
margin: auto; // center the block
}
.aboutOverlay {
position: absolute; // makes this class absolute relative to .aboutWrapper
width: 100%; // occupy all the available area (70% set in .aboutWrapper)
top: -50px; // negative top position which will do the overlay for you
background-color: white; // from here, you have all you design properties who were in .aboutWrapper class
border: 1px solid black;
box-shadow: 2px 2px 5px;
height: 300px;
}
You have a few issues with your CSS, i know it’s a WIP but i just wanted to point them out.
.nav-list {
wrap: wrap; // Unknown property name
flex-wrap: wrap; // I think this is what you are looking for
}
.nav-logo {
height: relative; // Invalid property value
}
.image-overlay {
heght: 100%; // should be height
background: auto; // Invalid property value
overflow: auto; // You don't want this
width: relative; // Invalid property value
}
.image-overlay > h1 {
line-height: 100px; // Most likely you want to use a value that is unitless line-height: 1.1;
}
Sorry i’m so late to respond.
I tried this:
and got this:
Thank you so much, i never really knew about Invalid property value up until you shared it. thanks.
Any idea on how i can blur the background of a div?
You can use the blur filter inside the selector for the background image.
filter: blur(3px);
That seems to bur everything, including the text even though i try adding 0 blur to it.
Give a try to the background-blend-mode property: https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode
I think it doesn’t have a blend-mode for blurriness, but you may find something interesting.
If you are blurring the div, it will blur all of the content inside of that div. If you want to blur a specific piece of content, a more specific selector should help.
Example:
<div>
<h1>Content</h1>
<img src=''#">
<p>More content</p>
</div>
div img {
filter:blur(value);
}
or a class selector on the desired element:
.class-name {
filter:blur(value);
}
Anyway, this also works pretty fine!
<section id='waterBannerImage'>
<div class="background-image"></div>
<div class="image-overlay">
<h1>INF.</h1>
<hr/>
<p>Infinite Strength</p>
</div>
</section>
#waterBannerImage {
height: 100vh;
margin: 0 auto;
text-transform: none;
position: relative
z-index: 0;
visibility: inherit;
display: flex;
flex-direction: column;
justify-content: center;
}
.background-image {
background-repeat: no-repeat;
background: url(https://assets.simpleviewcms.com/simpleview/image/upload/c_fill,h_689,q_60,w_1920/v1/clients/lakenorman/Lake_Fun_Header_52bfe5ab-8821-4255-ad2a-6d3a3d6d1dbf.jpg);
background-size: cover;
background-position: center top;
background-attachment: fixed;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
filter: blur(5px);
}
Notice how i removed the background properties from the container and added a div with a class of .background-image to put all of the background related things. Then added position relative to the #waterBannerImage so that you can use position absolute with the new .background-image div. Then gave the div a position of absolute, top 0, left 0 and gave width and height of 100%, now it covers the whole container, add the previous background properties and added the filter.
Also, i encourage you to use this-kind-of-naming-convention for HTML and CSS. For JavaScript, camelCaseForTheWin!
Oh, and good job! I like what you are doing and i love how you are doing it without libraries. You are doing great!
Yes because it’s a background image on the container you have the text inside. There are a few ways of fixing it.
Use a different container for the text, as you are not really relying on the text to be inside the image container you can just move it out. It would be different if the container was using position relative and the text was nested inside using position absolute.
You don’t have to use a CSS background image to achieve the full width layout, it can also be achieved using a normal img element. That would let you target just the img for the blur.
Wow thanks so much, i didn’t know about this method until know (putting image as a separate container) and it works great. I will be using that a lot more now.
How can i prevent my about section (.aboutWrapper) from blurring when over the div?
You don’t have to use a CSS background image
I use background image so i can use the fixed attachment affect.
Thank you guys @ManuAlvarado22 , @Kyle-S-Thompson and @lasjorg for all of your wonderful help.
I’m so glad that it helped, it has also made my life so much better!
Yes, i understand why you use a background image, sometimes it is just the way to go, and in your case it is definitely the best thing to do, no need for position images here.
In regards to the blurriness, lol this is quite funny, i was about to try something out it just got fixed. Add a position: relative to your .aboutWrapper. I can’t tell you why it works, but it does! 
Also, if you have 10-15 bucks you are not using, i highly encourage you to get this course:
I am not related in any way with the creator of the course, i mean, look at his last name! It is just that this course is extremely high quality, it really teaches amazing techniques with CSS and the instructor is really good at explaining things. Also, with what you know you are ready to take it. In regards to the price, maybe it costs more than $15 now, but in Udemy courses are pretty much always at $10 up to $15 so you could wait a bit.
Happy to help!
Thanks, and btw this was for a science project. Basically we were given the option to write a 1 page min/max paper or a webpage/ 3D project on creating a pseudo scientific idea (like infinite strength water).
Udemy is something i have heard of, but i didn’t know if it was worth the money.
Don’t worry, i don’t see you as ‘spamming or adverting.’ FCC is great for teaching basics but this is more advanced, which is great. Judging by some research they have sales constantly (no idea from experience however). So if i miss this one ill just do the next one, or this
If you really want the course just use an incognito tab or clear cookies and you will get the 10$ deal again. They store cookies that see if you’ve ‘seen’ the sale ‘expire’ and increase the price for the new sale for just you.
How did you learn coding? You seem very good at it.
You can use fixed or sticky positioning to get the same result. But it might require doing some things differently.
Jonas’s courses are pretty good, if you get the chance you should check them out.
Edit: If you use the site linked to in this thread, you can get the coupon code applied. Seems legit enough.
Thanks ill surely checkout Udemy.
As for the pen, i don’t think its worth changing, but thanks.
Do anonymous posts come up when you search? i will be turning this in for a grade (at school) and i don’t want to risk that…
Not sure what your asking here, what anonymous posts are you referring to?