Best way to have a “table layout” with an image background

[rouxjean]

Howdy, sorry if this is not clear, but I’m looking for the best way to replicate a specific simple layout (see private website link). Nothing fancy, pretty much a static page.

It is essentially a body with a background image that takes all the screen with 5 distinct sections on top of it, from top to bottom :
1-“squares row”, width 100%, with different blue shades and a logo in the middle (white square).
2-another section which is just centered text above the background
3-another section, 100% width, with a single cell with a background color & text
4-another section containing icons element
5-and finally the last one which is another cell with a background color but this time not 100% width.

Thanks, back in the day I would have simply do this with a table but with layers & this template, I’m a little confused. Thanks

---

Template Version: 8.1

[Support]

Hello, the responsive layouts are created using Bootstrap. Here are a few tips for that layout.

– To set the background to the page you can add this css:

(css/custom.css)

html { 
  background: url(img/bg.jpg) no-repeat center center fixed; 
  background-size: cover;
}

– To set 100% container and row:

<div class="container-fluid">
	<div class="row">
		<div class="col">
			Content
		</div>
	</div>
</div>

– To set a default container that has max-width ,row and 3 columns:

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

– To set the text on center:

<div class="container">
  <div class="row">
    <div class="col text-center">
      Column
    </div>
  </div>
</div>

– To set the text on center:

<div class="container custom-bg">
  <div class="row">
    <div class="col text-center">
      Column
    </div>
  </div>
</div>

CSS:

(css/custom.css)

.custom-bg { 
  background: url(img/bg.jpg) no-repeat center center; 
}

More information and a lot of examples that can be used on Porto:

– https://getbootstrap.com/docs/5.1/layout/containers/
– https://getbootstrap.com/docs/5.1/layout/columns/

Please note that our Support Center is here to help all the buyers with questions related to the template, but not customization to the buyers needs.

---

[rouxjean]

Very helpful thank you. One last question, how can I have transparent backgrounds for these containers ?

---

[Support]

Hello, please note that the containers does not have any default background color/image. Containers, Row and Columns are just elements to build the layout blocks.

Kind Regards.

Jonas

---

[Author]

Posts