0

I'm working to have a gradient layer over a cover image. I don't understand why its happening in this way.

Have a look on the below code.

Source: Wallpaper

For instance:

header {
  position: relative;
  height: 300px;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-image: url('http://wallpaperlatest.com/wp-content/uploads/latest-wallpapers-in-full-hd-definition.jpg');
  background-size: cover;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

h1 {
  margin: 0;
  padding: 100px 0;
  font: 44px "Arial";
  text-align: center;
}

header h1 {
  color: white;
}
<header>
  <h1>Header Content | Source: http://wallpaperlatest.com</h1>
</header>

<section>
  <h1>Section Content | Source: http://wallpaperlatest.com/</h1>
</section>
Ivan
  • 34,531
  • 8
  • 55
  • 100
Hemanth Kumar S
  • 1
  • 1
  • 1
    I don't see a gradient anywhere in your code. What are you referring to when you say "I dont understand why its happening in this way"? – Jon Uleis Aug 03 '17 at 15:59
  • You need to elaborate on what you're expecting and what is going wrong. Are you sure gradient is the right word you're looking for? – Don Aug 03 '17 at 16:02
  • Oh, just give a moment to edit my code. I hade a problem with inserting code it showed me lot many mistakes ex: to enter CTRL+K . I just edited some lines, i must have backspaced there. I'm sorry. – Hemanth Kumar S Aug 03 '17 at 16:03

1 Answers1

0

Try this:

header {
  position: relative;
  height: 300px;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-image: linear-gradient(to bottom right, rgba(0, 47, 75, .8), rgba(220, 66, 37, .8)), url('http://wallpaperlatest.com/wp-content/uploads/latest-wallpapers-in-full-hd-definition.jpg');
  background-size: cover;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

h1 {
  margin: 0;
  padding: 100px 0;
  font: 44px "Arial";
  text-align: center;
}

header h1 {
  color: white;
}
<header>
  <h1>Header Content | Source: http://wallpaperlatest.com</h1>
</header>

<section>
  <h1>Section Content | Source: http://wallpaperlatest.com/</h1>
</section>
Chandra Kumar
  • 4,127
  • 1
  • 17
  • 25