CODEWITHSUNDEEP
htmlcss
user16360833
user16360833

Reputation:

Change the size of an header css

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 image1

Upvotes: 0

Views: 254

Answers (1)

CodeBug
CodeBug

Reputation: 1667

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

Upvotes: 0

Related Questions