Background CSS/HTML

Asked

Viewed 113 times

0

Isn’t there any way to stretch the brackground to occupy the entire web? The photo I’m using has the following resolution :1024 640. When I put it as background it gets a white bar on the right. Is there any solution to this problem? Thank you

Code: 

td, div{

  color : #FFFFFF;
  }
body  {
  background-image: url ("background.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-size: 100%; 
  width: 100%;
  height: 100%;
  background-position: center;
}

}	
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
		
	<audio id="sound_button">
      <source src="button.mp3" type="audio/mp3">
    </audio>
    <audio id="sound_music">
      <source src="music.mp3" type="audio/mp3">
    </audio>

	
    </head>
<body>
		<center>
		
		<input type="button" value="rewind" onclick="rewind()">
		<input type="button" id="music_state" value="play" onclick="change_music()">
	  


<table width="10">
    <tr>
        <td >Linhas: </td><td><input type="text" id="txt_linhas" size="4" value="5"></td>
    </tr>
    <tr>
        <td >Colunas:</td>
        <td><input type="text" id="txt_colunas" size="4" value="5"></td>
    </tr> 
    <tr>
        <td colspan="2"><input type="button" value="Desenha tabuleiro" onclick="pede_desenha_tabuleiro()"></td>
    </tr>
</table>
<div id="tabuleiro" >Aqui vai aparecer o tabuleiro.</div>
<span id="info_jogador" style="visibility: hidden">Jogador: <span id="jogador">1</span></span>

html css

  • Maybe you’re looking for background-size: cover;. But without the codes of what you’re doing it’s hard to give a more precise answer.

  • I have these codes. The image I have takes up half the screen, and I wanted it to take over. Do you know if that’s possible? I put this code and nothing has changed. Thank you for your help.

  • @Gonçalosousa your answer is here https://answall.com/a/299083/97477 see the CSS carefully, especially the background-size and also note that the element the background is in has to be 100% wide and height of the screen

  • @hugocsl Thanks for the help, but unfortunately that was not the problem. The image is still not adjusted to the screen, and does not even center. I can’t understand why

  • Edit your question, put your HTML and CSS code, so we can vote to reopen it, Without your code there is no way to answer you, since the other answer did not solve the problem

  • I already edited the question put all the code, except the script, because I didn’t think it was necessary. I think it will be easier now. Thanks

Show 1 more comment

3 answers

4

I believe you have to take this background-size:100%, because you’ve already defined how background-size:cover.

  • Thanks for the help but still the program is not doing what I want. I will try to ask my teacher for help tomorrow, thanks.

2

Dude your background just doesn’t apply properly because you wrote the property background-image wrong. in your code is like this: url ("background.png") Notice that you left a space between and the parentheses url (), there should be no such space, it has to be url() all together. Another detail is that you did not put a size also for the HTML. The body inherits the height of the father, in this case the father of the body is the html, then you also need to set a time for it in this case.

html {
  width: 100%;
  height: 100%;
}
td, div{
  color : #FFFFFF;
}
body  {
  background-image: url("https://placecage.com/100/100");
  background-repeat: no-repeat;
  background-size: cover;
  /* background-size: 100%;  não precisa disso */
  width: 100%;
  height: 100%;
  background-position: center;
  margin: 0;
}
<input type="button" value="rewind" onclick="rewind()">
<input type="button" id="music_state" value="play" onclick="change_music()">

<table width="10">
    <tr>
        <td >Linhas: </td><td><input type="text" id="txt_linhas" size="4" value="5"></td>
    </tr>
    <tr>
        <td >Colunas:</td>
        <td><input type="text" id="txt_colunas" size="4" value="5"></td>
    </tr> 
    <tr>
        <td colspan="2"><input type="button" value="Desenha tabuleiro" onclick="pede_desenha_tabuleiro()"></td>
    </tr>
</table>
<div id="tabuleiro" >Aqui vai aparecer o tabuleiro.</div>
<span id="info_jogador" style="visibility: hidden">Jogador: <span id="jogador">1</span></span>

  • Thanks for the help but still the program is not doing what I want. I will try to ask my teacher for help tomorrow, thanks.

  • @Gonçalosousa without problems, if you give me more details also can help clarify the situation... See that here works perfectly, so there’s no reason not to be working there too

  • Thank you very much I already discovered the mistake. It’s already straight as I want. Thank you

0

You can use the background-Attachment: Fixed; in some cases you can occupy all screen but the image is fixed.

  • I’ve already solved that problem, thanks for your help

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.