Background that occupies the width and height of the screen

Question

Background that occupies the width and height of the screen

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

0

Good morning

I wanted to make a vertical web page to practice, and I found this one that I am following as a reference: Link to pag. reference website .

How did you do for the initial background image, of your feet occupy exactly the width and height of the screen?

I try but it does not work out. I have done this:

.Portada {
  height: 700px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
  position: relative;
}

#Fondo-Portada {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
}

#Logo {
  height: 90px;
  width: 90px;
  margin-top: 50px;
  margin-bottom: 50px;
  z-index: 10;
}

.mierda {
  height: 200px;
  width: 100%;
  background-color: aqua;
}

#Frase-Presentacion {
  font-size: 40px;
  font-weight: bold;
  color: #FFF;
}

#Btn-Ready {
  height: auto;
  width: 300px;
  font-size: 18px;
  background-color: transparent;
  color: #FFF;
  line-height: 26px;
  border-radius: 28px;
  border-color: #b00000;
  cursor: pointer;
  transition: width 0.2s;
}

#Btn-Ready:hover {
  width: 320px;
  background-color: #b00000;
}

#Aprende-Mas {
  color: #FFF;
  font-size: 18px;
  opacity: 0.6;
  position: absolute;
  bottom: 0px;
}

.icon-keyboard_arrow_down {
  color: #FFF;
  font-size: 28px;
  opacity: 0.6;
}

<div class="Portada">
  <img id="Fondo-Portada" src="Img/Fondo-Pies.jpg" alt="">

  <img id="Logo" src="Img/logo70px.png" alt="Logo">

  <p id="Frase-Presentacion"> Hola, soy Carlos. Y diseño y construyo </p>

  <input type="button" id="Btn-Ready" value="I'm ready">

  <p id="Aprende-Mas">Aprende más de lo que hago</p>
  <span class="icon-keyboard_arrow_down" id="Aprende-Mas"></span>
</div>

Basically I have made a general container, Portada and inside I have been inserting the background image, texts, buttons ...

What is the way to insert this background and especially how it is done to give them the height and width to occupy 100% of the screen?

html5 html css3 css

asked by NEA 08.09.2017 в 19:41

source

4 answers

Help with a job for the school, I can not detect a "public class" Sort by dates GROUP BY

score 1 · Answer 1

Add the attribute height: 100vh; to the class. Cover

.Portada {
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
  position: relative;
}

#Fondo-Portada {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
}

#Logo {
  height: 90px;
  width: 90px;
  margin-top: 50px;
  margin-bottom: 50px;
  z-index: 10;
}

.mierda {
  height: 200px;
  width: 100%;
  background-color: aqua;
}

#Frase-Presentacion {
  font-size: 40px;
  font-weight: bold;
  color: #FFF;
}

#Btn-Ready {
  height: auto;
  width: 300px;
  font-size: 18px;
  background-color: transparent;
  color: #FFF;
  line-height: 26px;
  border-radius: 28px;
  border-color: #b00000;
  cursor: pointer;
  transition: width 0.2s;
}

#Btn-Ready:hover {
  width: 320px;
  background-color: #b00000;
}

#Aprende-Mas {
  color: #FFF;
  font-size: 18px;
  opacity: 0.6;
  position: absolute;
  bottom: 0px;
}

.icon-keyboard_arrow_down {
  color: #FFF;
  font-size: 28px;
  opacity: 0.6;
}

<div class="Portada">
  <img id="Fondo-Portada" src="Img/Fondo-Pies.jpg" alt="">

  <img id="Logo" src="Img/logo70px.png" alt="Logo">

  <p id="Frase-Presentacion"> Hola, soy Carlos. Y diseño y construyo </p>

  <input type="button" id="Btn-Ready" value="I'm ready">

  <p id="Aprende-Mas">Aprende más de lo que hago</p>
  <span class="icon-keyboard_arrow_down" id="Aprende-Mas"></span>
</div>

score 0 · Answer 2

You can use vh and vw which are relative measures according to the viewport. Vh refers to the hundredth part of the height of the viewport and vw to the hundredth part of the viewport width.

1vh = 1% of the height of the viewport

100vh = height of the viewport

1vw = 1% of the viewport width

100vw = width of the viewport

For the example you propose:

body {
    margin: 0;
}

.Portada {
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
  position: relative;
}

score 0 · Answer 3

I leave this example for you, greetings.

body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #777;
}

.bgimg-1, .bgimg-2, .bgimg-3 {
  position: relative;
  opacity: 0.65;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
.bgimg-1 {
  background-image: url("http://p1.pichost.me/i/66/1910819.jpg");
  height: 100%;
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {

  color: #fff;
  padding: 18px;
  font-size: 30px;
  
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
}

<body>

<div class="bgimg-1">
  <div class="caption">
    <span class="border">AQUI DEJAS ALGO</span><br>
    <span class="border">Y AQUI TAMBIEN PARA LLENAR ALGO</span>
  </div>
</div>

<p style="padding:5px 15px">Este ejemplo crea una imagen de fondo de página completa. Trate de cambiar el tamaño de la ventana del navegador para ver cómo siempre cubrirá la pantalla completa (cuando se desplaza hacia arriba), y que se escala muy bien en todos los tamaños de pantalla.</p>

</body>

score 0 · Answer 4

What you must do first is a css reset to remove the rules like fills and margins that each browser sets by default:

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
.Portada {
  height: 700px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
  position: relative;
}

#Fondo-Portada {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
}

#Logo {
  height: 90px;
  width: 90px;
  margin-top: 50px;
  margin-bottom: 50px;
  z-index: 10;
}

.mierda {
  height: 200px;
  width: 100%;
  background-color: aqua;
}

#Frase-Presentacion {
  font-size: 40px;
  font-weight: bold;
  color: #FFF;
}

#Btn-Ready {
  height: auto;
  width: 300px;
  font-size: 18px;
  background-color: transparent;
  color: #FFF;
  line-height: 26px;
  border-radius: 28px;
  border-color: #b00000;
  cursor: pointer;
  transition: width 0.2s;
}

#Btn-Ready:hover {
  width: 320px;
  background-color: #b00000;
}

#Aprende-Mas {
  color: #FFF;
  font-size: 18px;
  opacity: 0.6;
  position: absolute;
  bottom: 0px;
}

.icon-keyboard_arrow_down {
  color: #FFF;
  font-size: 28px;
  opacity: 0.6;
}

<div class="Portada">
  <img id="Fondo-Portada" src="Img/Fondo-Pies.jpg" alt="">

  <img id="Logo" src="Img/logo70px.png" alt="Logo">

  <p id="Frase-Presentacion"> Hola, soy Carlos. Y diseño y construyo </p>

  <input type="button" id="Btn-Ready" value="I'm ready">

  <p id="Aprende-Mas">Aprende más de lo que hago</p>
  <span class="icon-keyboard_arrow_down" id="Aprende-Mas"></span>
</div>

Finally you give the container the dimensions of the viewport:

height: 100vh;
width: 100%;