How to stick a background image to top of the box on resize?

Question

I want the top half of the image be visible on resizing. As you can see on the pc version it cuts off the top half.

pc

mobile

Here's css:

.about-img.n3 {
  background: url("../images/3.png");
  border-radius: 0 0 20px 20px;
}
.about-img {
  padding: 10vh 0;
  background-blend-mode: luminosity !important;
  background-color: #f0f8ff !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  color: #f0f8ff;
  font-weight: 800;
  min-height: 0 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;

score 0 · Answer 1 · answered Aug 06 '22 at 12:54

You have to change the background-position to top to allow the background to be sticked to the top. With that the upper part will be visible all the time.

.about-img.n3 {
  background: url("https://i.stack.imgur.com/A98w2.png");
  border-radius: 0 0 20px 20px;
}
.about-img {
  padding: 10vh 0;
  background-blend-mode: luminosity !important;
  background-color: #f0f8ff !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: top!important; <---- With this line the top will always be visible
  color: #f0f8ff;
  font-weight: 800;
  min-height: 0 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;

How to stick a background image to top of the box on resize?

1 Answers1