Put a background photo in a section. html css

Navigation
3

I am developing a static website where I want to put a photograph in a section. the background right now has a color, but no matter how hard I try to put the image it does not appear. 

<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>

The code of the section would be this: 

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

In the css, the section that gives color is: .bg-primary {   background-color: # 3A6324; } I do not know if this is where you have to put the background-size

This is the look of the page: 

.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>
    
asked by CMorillo 27.07.2017 в 11:51
source

3 answers

9

Use background-image to put background images.

Source: link 

.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>
    
answered by 27.07.2017 / 12:00
source
2

The most useful parameters would be:

  • background-image : Where the image is provided, such as data:url or as url directly.
  • background-size: : Where it is indicated if the image should be expanded, contracted or stretched if it does not fit exactly (so it does not have the same width and height) in the <div> or element where the image goes.
  • background-position: : Where is indicated how to position the image within the element itself (in relation to the element).

The combination, background-size: cover; background-position: center; is the guaranteed way so that: The image does not repeat and there are no discovered parts of <div> (parts without background). It does this because it stretches and then slightly cuts the image to correct any size difference. It has as against that, if the difference between the aspect ratio between the image and the div is very large, the cropped part of the image can cause the image to be lost a little ... 

.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>

There are other values for these properties and some other properties that serve to cover other different scenarios .

    
answered by 27.07.2017 в 12:30
1

And if you want the image to fit the div, you just have to put 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>
    
answered by 10.08.2017 в 09:46
How to generate dynamic Divs on asp.net Why recursion is not efficient?