El origen de fondo es una propiedad definida en CSS que ayuda a ajustar la imagen de fondo de la página web. Esta propiedad se utiliza para establecer el origen de la imagen en el fondo. De forma predeterminada, esta propiedad establece el origen de la imagen de fondo en la esquina superior izquierda de la pantalla/página web.
Sintaxis:
background-origin: padding-box|border-box|content-box|initial| inherit;
Valor de la propiedad:
initial: toma el valor inicial/predeterminado de establecer el origen del fondo en el borde del relleno en la esquina superior izquierda.
- Sintaxis:
background-origin: initial;
- Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>background-origin property</title>
<style>
.gfg {
padding: 40px;
width: 400px;
background-image:
url('https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png');
background-repeat: no-repeat;
background-origin: initial;
border: 1px double;
text-align: justify;
}
</style>
</head>
<body>
<div class="gfg">
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
</body>
</html>
- Producción:
padding-box: esta propiedad se utiliza para establecer el origen de la imagen de fondo en el borde de relleno en la esquina superior izquierda.
- Sintaxis:
background-origin: padding-box;
- Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>background-origin property</title>
<style>
.gfg {
padding: 40px;
width: 400px;
background-image:
url('https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png');
background-repeat: no-repeat;
background-origin: padding-box;
border: 1px double;
text-align: justify;
}
</style>
</head>
<body>
<div class="gfg">
<p>
Prepare for the Recruitment drive of
product based companies like Microsoft,
Amazon, Adobe etc with a free online
placement preparation course. The course
focuses on various MCQ's & Coding question
likely to be asked in the interviews &
make your upcoming placement season
efficient and successful.
</p>
</div>
</body>
</html>
- Producción:
border-box: esta propiedad se utiliza para establecer la imagen en el borde del cuerpo de la página web, es decir, la esquina superior izquierda absoluta.
- Sintaxis:
background-origin: border-box;
- Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>background-origin property</title>
<style>
.gfg {
padding: 40px;
width: 400px;
background-image:
url('https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png');
background-repeat: no-repeat;
background-origin: border-box;
border: 1px double;
text-align: justify;
}
</style>
</head>
<body>
<div class="gfg">
<p>
Prepare for the Recruitment drive of
product based companies like Microsoft,
Amazon, Adobe etc with a free online
placement preparation course. The course
focuses on various MCQ's & Coding question
likely to be asked in the interviews & make
your upcoming placement season efficient
and successful.
</p>
</div>
</body>
</html>
- Producción:
content-box: esta propiedad se usa para establecer el origen del fondo de acuerdo con el contenido de la división/cuerpo donde se usa la propiedad.
- Sintaxis:
background-origin: content-box;
- Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>background-origin property</title>
<style>
.gfg {
padding: 40px;
width: 400px;
background-image:
url('https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png');
background-repeat: no-repeat;
background-origin: content-box;
border: 1px double;
text-align: justify;
}
</style>
</head>
<body>
<div class="gfg">
<p>
Prepare for the Recruitment drive of
product based companies like Microsoft,
Amazon, Adobe etc with a free online
placement preparation course. The course
focuses on various MCQ's & Coding question
likely to be asked in the interviews & make
your upcoming placement season efficient
and successful.
</p>
</div>
</body>
</html>
- Producción:
heredar: se usa para heredar la propiedad del código ya usado (propiedad principal), de lo contrario, funciona como cuadro de relleno de forma predeterminada.
- Sintaxis:
background-origin: inherit;
- Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>background-origin property</title>
<style>
.gfg {
padding: 40px;
width: 400px;
background-image:
url('https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png');
background-repeat: no-repeat;
background-origin: inherit;
border: 1px double;
text-align: justify;
}
</style>
</head>
<body>
<div class="gfg">
<p>
Prepare for the Recruitment drive of
product based companies like Microsoft,
Amazon, Adobe etc with a free online
placement preparation course. The course
focuses on various MCQ's & Coding question
likely to be asked in the interviews & make
your upcoming placement season efficient and
successful.
</p>
</div>
</body>
</html>
- Producción:
Navegadores compatibles: Los navegadores compatibles con CSS | propiedad de origen de fondo se enumeran a continuación:
- Google cromo 1
- Borde 12
- explorador de Internet 9
- firefox 4
- Ópera 10.5
- Safari 3
Publicación traducida automáticamente
Artículo escrito por RahulRanjan4 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA