CODEWITHSUNDEEP
htmlcssbootstrap-4
Tipoki13
Tipoki13

Reputation: 11

Blending jumbotron into background image

so I'm trying to get my jumbotron blend in with a background image. I want just the text to be visible, and not the white background of the jumbortron itself. I tried using background:none; and background-color: transparent; but to no avail. Can anyone help?

body, html {
  height: 100%;
  background-color: #fff;
}

.bg {
  background-image: url("../images/home-office.jpg");

  height: 100%;    

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.jumbotron {
    background: none;
}
<!--********TOP JUMBOTRON********-->

    <header class="jumbotron bg" id="landing-view">
            <div class="container top">
                <h1 class='name'>Conor Humphreys</h1>
                <p class='title'>Full-Stack Software Developer</p>
            </div>
    </header>

Upvotes: 0

Views: 124

Answers (2)

Rob Moll
Rob Moll

Reputation: 3463

Hopefully, this is an appropriate way to address this:

I changed the code as suggested by @damnitrahul (see the snippet) and it works as he indicated it would. Since the image is unreachable from this snippet, I added a red background color instead.

body, html {
  height: 100%;
  background-color: #fff;
}

.jumbotron {
    background: none;
}

.bg {
  background-image: url("../images/home-office.jpg");

  height: 100%;    

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: red;
}
<!--********TOP JUMBOTRON********-->

    <header class="jumbotron bg" id="landing-view">
            <div class="container top">
                <h1 class='name'>Conor Humphreys</h1>
                <p class='title'>Full-Stack Software Developer</p>
            </div>
    </header>

To test this, edit this snippet and in your css move .bg above .jumbotron like you had it and you will see the red background disappear.

I believe you did not see the result when you followed @damn's advice because your image path or filename is incorrect.

Please apply any upvotes to @damnitrahul's answer.

Upvotes: 0

damnitrahul
damnitrahul

Reputation: 150

You are overwriting background of your div when you set .jumbotron {background: none} You Should move the .jumbotron {background: none} above the .bg selector in CSS.

Upvotes: 1

Related Questions