-1

I'm new to coding and figured best way to learn is to get a gig, which I did. I've got some basic (like very basic) HTML & CSS knowledge, but bootstraps layout seemed to fit for what I'm trying to accomplish. Please keep in mind this is my very first project ever(!) when it comes to coding.

So here's the design I'm trying to replicate:
montere.it

I'm interested just in the main page, the actual tiles below the main image to be exact. I can't seem to find the best solution to position 2 tiles with background image, side by side(no gaps), with some h1 text and a small <p> above the background image in the tile, positioned centrally. There will be two more tiles below the initial two.

I SPENT A WEEK looking for similar solutions, but I'm exhausted and confused over all information digested. Can some one just point me in the right direction as to which features to use?

It seems even if I get to position both images, there are always gaps (right or left), there's no way to position the text exactly above the image centrally so it stays in one place when the display is resized and I don't want to cry about the rest.

I have a feeling it's a dumb question to ask, since none of the info I've found provide an exact solution to this question, so probably must be really easy to do and I just can't seem to grasp it.

I do apologize for taking up your time, but I just have no one else to ask.

Cheers!

Adam
  • 4,445
  • 1
  • 31
  • 49
OLEDdie
  • 1
  • 1

2 Answers2

0

Please check this out:

<div class="row">
    <div class="col-sm-6 col-xs 12 col-img" style="background-color: red">
        <h1>Image 1</h1>
    </div>
    <div class="col-sm-6 col-xs 12 col-img" style="background-color: orange">
        <h1>Image 2</h1>
    </div>
    <div class="col-sm-6 col-xs 12 col-img" style="background-color: green">
        <h1>Image 3</h1>
    </div>
    <div class="col-sm-6 col-xs 12 col-img" style="background-color: yellow">
        <h1>Image 4</h1>
    </div>
</div>

And add this to your CSS file:

.col-img h1 {
    margin-bottom: 0;
    margin-top: 0;
    text-align: center;
}
gjfonte
  • 488
  • 2
  • 4
  • 15
  • Ok, it created those tiles exactly as I wanted them! For this, thank you so much! I do not understand though where do I place my image so it appears behind the text? I entered it below the h1 tag and the image appears above the color box and below is the color box with words "Image". I removed the style and entered the image link, didn't look right either. – OLEDdie May 23 '17 at 13:09
  • There are many ways to do that, but usually, I create a wrapper inside the main element to allocate the text, images, etc.. – gjfonte May 23 '17 at 14:14
  • Don't forget to flag as accepted answer if you happy with my help :) – gjfonte May 23 '17 at 14:15
  • I will check and test it out in a little bit... thanks for help so far :)) I'll try to "flag as accepted" shortly as well, what ever that means ... I haven't used stackoverflow for help previously, it's all new to me. – OLEDdie May 23 '17 at 16:25
  • The last link you sent did the trick. I can't thank you enough and now I know how badly I need to brush up on my CSS. Cheers and thank you so much for your help!!! Out of curiosity, the link I sent you previously and those cool effects on the tiles when you hover over, can that be accomplished via CSS or some thing else here is at play? – OLEDdie May 23 '17 at 18:22
0

In case any one else runs into this problem, here's the fully working solution. I'm just not sure if it will disappear under gjfonte's link, so I want to be safe here:

Here's what was provided by @gjfonte:

<div class="row">
  <div class="col-sm-6 col-xs 12 col-img">
    <div class="bg-img img-1">
      <div class="content">
        <h1>Image 1</h1>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xs 12 col-img">
    <div class="bg-img img-2">
      <div class="content">
        <h1>Image 1</h1>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xs 12 col-img">
    <div class="bg-img img-3">
      <div class="content">
        <h1>Image 1</h1>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xs 12 col-img">
    <div class="bg-img img-4">
      <div class="content">
        <h1>Image 1</h1>
      </div>
    </div>
  </div>
</div>


.content {
  padding-top: 90px;
  color: #fff
}

.content h1 {
  margin-bottom: 0;
  margin-top: 0;
  text-align: center;
}

.col-img .bg-img {
  text-align: center;
  margin: 0 -15px;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 250px;
}

.bg-img.img-1 {
  background-image: url("http://www.montere.it/assets/img/bg-qualitycycle-wrapper.jpg");
}

.bg-img.img-2 {
  background-image: url("http://www.montere.it/assets/img/bg-qualitymap-wrapper.jpg");
}

.bg-img.img-3 {
  background-image: url("http://www.montere.it/assets/img/bg-recipes-wrapper.jpg");
}

.bg-img.img-4 {
  background-image: url("http://www.montere.it/assets/img/bg-journal-wrapper.jpg");
}
OLEDdie
  • 1
  • 1