0

I'm trying so size the banner image with CSS using the % so that it can scale as I resize it. But soon as i set the height of the page as a % then the whole thing disappears.

.banner{
    background-image:url(img/banner.PNG);
    background-color: rgb(0, 121, 255);
    background-repeat:no-repeat;
    height: 10%;
    width: 100%;
    background-size: 100% 100%;
}

So currently it is not not displaying anything because at the moment. How do i get it to display the image ant that it remains 10% of the screen size

Professor Abronsius
  • 33,063
  • 5
  • 32
  • 46
Dunmol
  • 41
  • 4
  • is banner a block element ? does it's parent have height set ? – Mihai T Aug 09 '21 at 09:42
  • you could use the padding top / bottom trick (but this maintains the aspect ratio of the div rather than having it 10% height of the screen): https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css – Pete Aug 09 '21 at 09:47

1 Answers1

1
.banner{
background-image:url(img/banner.PNG);
background-color: rgb(0, 121, 255);
background-repeat:no-repeat;
height: 10vh;
width: 100%;
background-size: 100% 100%;
}

give height of banner equal to 10vh, it will always take the 10% of your screen size.

Shivam
  • 370
  • 2
  • 6