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:

HTML

CSS

My codepen:
https://codepen.io/N3Essential/pen/JJoLdG?editors=1100

This is one way to do it:

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

In your CSS, add height to .bkgdimage

.bkgdimage{
  background-image: url("https://www.3chillies.co.uk/-/media/images/corporate/background-images/ral-space.ashx?h=400&la=en&w=1920&hash=3E37F47D732C75B0A5E2366FAA2767D5A63E1BEE"); 
  background-size: 1920px 400px;
  filter: blur(3px);
  height: 400px;
   }

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

.content {
  text-align:center;
  padding-top:170px;
  padding-bottom:170px;
  font-family:Arvo;
  font-variant: small-caps;
  font-variant: initial;
  font-size:35px;
  color:white;
  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