3

Estoy desarrollando una página web estática en la que quiero meter una fotografía en un section. el background ahora mismo tiene un color, pero por mas que intento meter la imagen no aparece.

<section class="bg-primary" id="nosotros">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 text-center">
                <h2 class="section-heading">Equipamiento profesional para la hostelería.</h2>
                <hr class="light">
                <p class="text-faded">Suministros Tres Árboles somos una empresa con más de veinte años de experiencia dedicada a la distribución de equipamiento profesional para la hostelería. Formamos parte de la red de operadores de Hoterali<font color="red">@</font> Group.</p>
                <a href="#contacto" class="page-scroll btn btn-default btn-xl sr-button">Contacta</a>
            </div>
        </div>
    </div>
</section>

El codigo del apartado sería este:

.bg-primary {
  background-color: #3A6324;
} 

En el css, el apartado que le da color es: .bg-primary { background-color: #3A6324; } No se si es aqui donde hay que meter el background-size

este es el aspecto de la página: introducir la descripción de la imagen aquí

.bg-primary {
  background-color: #3A6324;
} 
<section class="bg-primary" id="nosotros">
	<div class="container">
		<div class="row">
			<div class="col-lg-8 col-lg-offset-2 text-center">
				<h2 class="section-heading">Equipamiento profesional para la hostelería.</h2>
				<hr class="light">
				<p class="text-faded">Suministros Tres Árboles somos una empresa con más de veinte años de experiencia dedicada a la distribución de equipamiento profesional para la hostelería. Formamos parte de la red de operadores de Hoterali<font color="red">@</font> Group.</p>
				<a href="#contacto" class="page-scroll btn btn-default btn-xl sr-button">Contacta</a>
			</div>
		</div>
	</div>
</section>

2
  • Revisa background-image en css
    – Lithorell
    Commented el 27 jul. 2017 a las 9:59
  • ¿Cómo estás metiendo la imagen? En en código que has puesto no hay ninguna imagen
    – user7176
    Commented el 27 jul. 2017 a las 10:37

3 respuestas 3

10

Usa background-image para poner imagenes de fondo.

Fuente: https://www.w3schools.com/cssref/pr_background-image.asp

.bg-primary {
  background-image: url("http://2.bp.blogspot.com/-xmjmQzG1SE8/VC2L9UZNYbI/AAAAAAAAikU/QGO0KFnjANk/s1600/Abstract%2BTriangles%2BWallpapers%2B2.jpg");
 }
<section class="bg-primary" id="nosotros">
	<div class="container">
		<div class="row">
			<div class="col-lg-8 col-lg-offset-2 text-center">
				<h2 class="section-heading">Equipamiento profesional para la hostelería.</h2>
				<hr class="light">
				<p class="text-faded">Suministros Tres Árboles somos una empresa con más de veinte años de experiencia dedicada a la distribución de equipamiento profesional para la hostelería. Formamos parte de la red de operadores de Hoterali<font color="red">@</font> Group.</p>
				<a href="#contacto" class="page-scroll btn btn-default btn-xl sr-button">Contacta</a>
			</div>
		</div>
	</div>
</section>

1
  • 1
    Con poner background-image... funciono,
    – CMorillo
    Commented el 27 jul. 2017 a las 10:44
2

Los parametros mas utiles serian:

  • background-image: Donde se proporciona la imagen, como data:url o como url directamente.
  • background-size:: Donde se indica si se debe expandir, contraer o estirar la imagen si no cabe exactamente (osea que no tiene mismo ancho y alto) en el <div> o elemento donde va la imagen.
  • background-position:: Donde se indica como posicionar la imagen dentro del elemento en si (en relacion al elemento).

La combinacion, background-size: cover; background-position: center; es la forma garantizada para que: La imagen no se repita y no queden partes descubiertas del <div> (partes sin background). Lo hace porque estira y luego recorta un poco la imagen para correjir cualquier diferencia de tamaño. Tiene como contra que, si la diferencia entre la relacion de aspecto entre la imagen y el div es muy grande, la parte recortada de la imagen puede hacer que la imagen se pierda un poco...

.bg-primary {
  background-image: url(http://2.bp.blogspot.com/-xmjmQzG1SE8/VC2L9UZNYbI/AAAAAAAAikU/QGO0KFnjANk/s1600/Abstract%2BTriangles%2BWallpapers%2B2.jpg);
  background-size: cover;
  background-position: center;
}
<section class="bg-primary" id="nosotros">
	<div class="container">
		<div class="row">
			<div class="col-lg-8 col-lg-offset-2 text-center">
				<h2 class="section-heading">Equipamiento profesional para la hostelería.</h2>
				<hr class="light">
				<p class="text-faded">Suministros Tres Árboles somos una empresa con más de veinte años de experiencia dedicada a la distribución de equipamiento profesional para la hostelería. Formamos parte de la red de operadores de Hoterali<font color="red">@</font> Group.</p>
				<a href="#contacto" class="page-scroll btn btn-default btn-xl sr-button">Contacta</a>
			</div>
		</div>
	</div>
</section>

Hay otros valores para estas propiedades y algunas otras propiedades que sirven para cubrir otros escenarios diferentes.

1

Y si quieres que la imagen se ajuste al div, solo tienes que poner background-size:cover;

.bg-primary {
  background-image: url("http://2.bp.blogspot.com/-xmjmQzG1SE8/VC2L9UZNYbI/AAAAAAAAikU/QGO0KFnjANk/s1600/Abstract%2BTriangles%2BWallpapers%2B2.jpg"); background-size: cover;
 }
<section class="bg-primary" id="nosotros">
	<div class="container">
		<div class="row">
			<div class="col-lg-8 col-lg-offset-2 text-center">
				<h2 class="section-heading">Equipamiento profesional para la hostelería.</h2>
				<hr class="light">
				<p class="text-faded">Suministros Tres Árboles somos una empresa con más de veinte años de experiencia dedicada a la distribución de equipamiento profesional para la hostelería. Formamos parte de la red de operadores de Hoterali<font color="red">@</font> Group.</p>
				<a href="#contacto" class="page-scroll btn btn-default btn-xl sr-button">Contacta</a>
			</div>
		</div>
	</div>
</section>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.