Twitter Bootstrap Question posted in

Twitter bootstrap – Positioning A Image Over A Div

I’m using Twitter Bootstrap and I have the following div laid out with a music note that is supposed to be stretched out ontop of the div box and I’m not sure the correct properties to apply so that it matches my design composition.

<div id="teachings" class="row important">
    <div class="col-md-9">
        <h2>My Teachings</h2>
        <p>Music is an art that encourages many different types of learning.  Through my lessons students will learn how to play flute and piano. Students will learn how to read and notate music so they can write music and be able to play or sing anything they wish.  They also learn about different cultures and people through the music that they play. They can use the time that they perform to build confidence in themselves. Some students may find that they enjoy music at a high level and wish to continue to use music in the rest of their lives, as a career or added to another career.</p>
    </div>
    <div class="col-md-3">
        <img src="assets/images/music-note.png" alt="Music Note">
    </div>  
</div>

.important {
    background-color: #9999FF;
    padding: 30px;
    margin-top: 50px;
}

#teachings img {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 1;
}

TeachingsDesign Comp

Tags:

2

Answers


  1. 0

    UPDATE:

    To position the image out of it’s containing div like the attached design. You should position it absolutely and center it vertical, then you need to specify a certain height. 

    .img-wrapper {
  position: relative;
}

.img-wrapper img {
  position: absolute;
  height: 300px;
  top: 50%;
  margin-top: -75px;
}

    DEMO

    Login or Signup to reply.
  2. 0

    You can center it without giving extra top margins in this manner:

    .img-wrapper {
   position: absolute;
   right: 0;
   top: 0;
   bottom: 0;
}

.img-wrapper img {
    position: absolute;
    height: 300px;
    top: 0;
    bottom: 0;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search