How do I style my image with css without styling the text in it?

I want to blur my image but the text gets blurry too because it is in the same div as the image. The reason I put the div text (“title”) inside the div image (“header”) is because it’s the only way I have found to write above the image.

Thank you very much to everyone reading this! :smiley:



My codepen:

This is one way to do it:

  <div class="header">
    <div class="bkgdimage"></div>
    <div class="content">A Full Universe To Explore</div>

In your CSS, add height to .bkgdimage

  background-image: url(""); 
  background-size: 1920px 400px;
  filter: blur(3px);
  height: 400px;

and in your .content, add position: relative, magin-top, and z-index

.content {
  font-variant: small-caps;
  font-variant: initial;
  position: relative;
  margin-top: -400px;
  z-index: 100;

and voila! You get this:

1 Like

WAAOOW thank you very much my friend!! :smiley:

Could you explain why adding height to .bkgdimage is necessary for the image to appear? Why isn’t enough with background-size: 1920px 400px?

Thank you again mate!

You have an empty div

<div class="bkgdimage"></div>

And the image is just a background-image.

If you don’t have any text or other image content inside the div, then the div is just a “collapsed” item. You won’t be able to see the background-image then… thus, the need for a height, to set the height of the div box.

Now, you can use a lot of breaks to “expand” your div, so the background-image will show up… like so:

<div class="bkgdimage"><br><br><br><br><br><br></div>

but a height parameter is easier and gives you more control over how many exact pixels.

1 Like