Question 296086 in Html Question posted in
Some basic documentation can be found here.

Html – Gradient and image are not overlapping each other

I have an image and I’m attempting to add a gradient to it in my website and put some white text over it. I’m in modern version of chrome for my testing so it should be able to handle it. Here is my html and my css. I’ve tried this a couple of different ways but every time either the gradient shows, or the picture, but never both overlapped. Is it not possible with the colors I’ve selected?

.background {
  background: linear-gradient(.25turn, rgb(12, 14, 22), rgb(172, 7, 197)), url("./PulseB2.jpg");
  height: 500px;
  width: 1663px;
  max-width: 100%;
  max-height: 100%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background-size: cover;
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-text {
  color: #fff;
  display: inline;
  padding: 10px;
  font-size: 40px;
  text-transform: uppercase;
  vertical-align: middle;
}
<div class="background">
  <p class="image-text">I exist</p>
</div>

1

Tags:

2

Answers


  1. 0

    You need to add some transparency to your gradient (e.g. using rgba instead of rgb), so the background image won’t be completely obscured.

    background: 
  linear-gradient(.25turn, rgba(12, 14, 22, 0.5), rgba(172, 7, 197, 0.5)), 
  url("./PulseB2.jpg");

    .background {
  background: linear-gradient(.25turn, rgba(12, 14, 22, 0.5), rgba(172, 7, 197, 0.5)), url("https://picsum.photos/640/480");
  height: 500px;
  width: 1663px;
  max-width: 100%;
  max-height: 100%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background-size: cover;
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-text {
  color: #fff;
  display: inline;
  padding: 10px;
  font-size: 40px;
  text-transform: uppercase;
  vertical-align: middle;
}
    <div class="background">
  <p class="image-text">I exist</p>
</div>

    Another aproach is to add some blend mode to the background using background-blend-mode. So the gradient serves as a blender layer.

    background-blend-mode: screen;

    .background {
  background: linear-gradient(.25turn, rgb(12, 14, 22), rgb(172, 7, 197)), url("https://picsum.photos/640/480");
  background-blend-mode: screen;
  height: 500px;
  width: 1663px;
  max-width: 100%;
  max-height: 100%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background-size: cover;
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-text {
  color: #fff;
  display: inline;
  padding: 10px;
  font-size: 40px;
  text-transform: uppercase;
  vertical-align: middle;
}
    <div class="background">
  <p class="image-text">I exist</p>
</div>
    Login or Signup to reply.
  2. 0

    You might play with background-blend-mode property:

    .background {
  background: linear-gradient(.25turn, rgb(12, 14, 22), rgb(172, 7, 197)), url(https://i.stack.imgur.com/L48bc.jpg);
  background-blend-mode:overlay;
  height: 500px;
  width: 1663px;
  max-width: 100%;
  max-height: 100%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background-size: cover;
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-text {
  color: #fff;
  display: inline;
  padding: 10px;
  font-size: 40px;
  text-transform: uppercase;
  vertical-align: middle;
}
    <div class="background">
  <p class="image-text">I exist</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search