CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Tal
Tal

Reputation: 365

Position Div inside div

I have this code that blurs an image and a text box:

CSS:

.jumbotron {
    padding: 30px 15px;
    margin-bottom: 30px;
    color: inherit;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 3px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    z-index: 2;

}

.background-image {
    padding: 30px 15px;
    margin-bottom: 30px;
    color: inherit;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    background-image: url(http://localhost:2359/images/6H.jpg);
    background-size: cover;
    display: block;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    height: 800px;
    left: 0;
    right: 0;
    z-index: 1;
}

HTML:

<div class=" hero-spacer">
    <div class="background-image"></div>
        <header class="jumbotron hero-spacer">
            <h1>Welcome</h1>
            <p>TEXT</p>   
        </header>
    </div>

This is the result that I get:

enter image description here

My question is how can I put the text under the image, on it, and not under it? I don't know what need to be done.

Upvotes: 0

Views: 130

Answers (3)

user4563161
user4563161

Reputation:

The below should sort you out.

.hero-spacer {
  position: relative;
}
.jumbotron {
  padding: 30px 15px;
  color: inherit;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  z-index: 2;
  position: absolute;
  bottom: 0px;
  right: 0px;
}
.background-image {
  padding: 30px 15px;
  margin-bottom: 30px;
  color: inherit;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(http://localhost:2359/images/6H.jpg);
  background-size: cover;
  display: block;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  height: 800px;
  left: 0;
  right: 0;
  z-index: 1;
}
<div class=" hero-spacer">
  <div class="background-image"></div>
  <header class="jumbotron">
    <h1>Welcome</h1>
    <p>TEXT</p>
  </header>
</div>

Upvotes: 0

cari
cari

Reputation: 2302

make both

position: relative;

and adjust jumbotron with something like

top: -100px;

and 

left: 100px;

attributes.

http://jsfiddle.net/m4dpzf8v/2/

Upvotes: 0

Oleksandr Savchenko
Oleksandr Savchenko

Reputation: 692

Try to use absolute position in CSS for inner contaners:

.jumbotron, .background-image {
    position: absolute;
}

And relative position for outer container:

.hero-spacer {
    position: relative;
}

Example: http://jsfiddle.net/q3a1w273/1/

Upvotes: 2

Related Questions