-3

I need to put a background image in the middle of a page like this below.

enter image description here

A way would be to close the div container and put it back after my image. But I don't think that's the best way, so here I come to find some help.

My HTML :

<div class="container">
    <div class="job">
        <h4>Disc Jockey</h4>
        <div class="row">
          <div class="col-lg-8 col-lg-offset-2">
            <p>
              Lorem ipsum...
            </p>
          </div>
        </div>
      </div>
</div>

And in my css :

.job{
  margin-top: 75px;
  background:url(../img/bg-about.jpg) no-repeat center top scroll;
  background-size: 100% auto;
  height: 357px;
  width: 1920px;
}

Thanks in advance.

Kévin J
  • 1
  • 1
  • Use a background image combined with an background color using rgba (for opacity) on the `
    ` part. Is that what you want?
     – Kees Sonnema Dec 15 '15 at 13:34
  • Sorry for the mistakes. First time in stack overflow. The problem of my background is that it doesnt take full size of the screen because of the bootstrap' container – Kévin J Dec 15 '15 at 13:41
  • What do you mean ? my website is local for now. – Kévin J Dec 15 '15 at 13:48
  • 1
    Ok nvm, thanks for trying – Kévin J Dec 15 '15 at 13:51
  • Maybe you can you use [jumbotron](http://getbootstrap.com/components/#jumbotron). A working example can be found [here](https://getbootstrap.com/examples/jumbotron/) – VincenzoC Dec 15 '15 at 13:55

1 Answers1

-1

Try to add class .job to <div class='container job'></div> I think it must help you

Denis Zheleznyak
  • 1
  • 1
  • My div.container is in the begining of my .html so i can't do that. I put it here to illustrate my issue. – Kévin J Dec 15 '15 at 13:51