Change the size of an header css

Question

I want to change the size to my background image to 500, 100% in css, but I am unable. I already tried the background-size tag, but it didn’t work

.header {
  overflow: hidden;
  color: white;
  text-align: center;
  background-image: url("https://cdn.discordapp.com/attachments/830964942320435211/875439626972692550/image2.png");
}

  <div class="header">
    <h1>Rubydium</h1>
    <h4>
      IP: rubydiumfaction.mcpe.eu
      <br>
      Port: 19595
    </h4>
  </div>

. This is my code:

In comments, DJ burb found an answer. It is ok, but when I add background-size: 100%;, the image is like this.

I want to the background image be responsive

Will this work? https://stackoverflow.com/questions/49970640/how-to-fill-background-image — DJ Burb, Aug 13 '21 at 04:31

score 0 · Answer 1 · answered Aug 13 '21 at 04:51

0

you can use background-size:100% 100%

.header {
  overflow: hidden;
  color: white;
  text-align: center;
  background-image: url("https://cdn.discordapp.com/attachments/830964942320435211/875439626972692550/image2.png");
  background-size: 100% 100%;
 }

  <div class="header">
    <h1>Rubydium</h1>
    <h4>
      IP: rubydiumfaction.mcpe.eu
      <br>
      Port: 19595
    </h4>
  </div>

you can read more about background property here

answered Aug 13 '21 at 04:51

CodeBug

1,649
1
8
23

It worked, but if I go on my iPad (example) il will see this https://imgur.com/a/nXguW8b but me, i want to have the original image size, but bigger (original image: https://cdn.discordapp.com/attachments/830964942320435211/875439626972692550/image2.png) – Aug 13 '21 at 13:18
you can add height to the `.header{}` please check this fiddle https://jsfiddle.net/designerPrasanna/0b6sL4km/ – CodeBug Aug 13 '21 at 13:22

Change the size of an header css

1 Answers1