Putting images and h1's over other images

Question

I am trying to lay text and an image over the sublime text blank document (please check out the link: http://ancient-badlands-4040.herokuapp.com/)

As you can see, my h1 is over/on top of the image i want it to lay over. I also have an image I would like over that as well.

Am I doing something wrong with my divs? I assumed that since the sublime text image is in the same div that the text would overlay the image?

One note that may get confusing is that my sublimetext image is called Codeythecoder.png

Any help would be appreciated, thanks :)

style.css.scss doucment:

$navbarLinkColor: #90fce8;
$navbarBackground: #ff3600;
$navbarBackgroundHighlight: #ff3600;
$navbarText: Archivo Black, sans-serif;
@import url(http://fonts.googleapis.com/css?family=Archivo+Black);


@import 'bootstrap';

body {
    padding-top: 150px;
    background: url('escheresque_@2X.png');
}

.banner {
    background: url('CDRedBG.png');
    height: 550px;
    margin: 0 auto;
    color: #fff;
}

.row {
    margin-left: -30px;
}

@import 'bootstrap-responsive';



.navbar-inner {
    @include box-shadow(none !important);
    border: 0;
    width: 100%%;
    margin: auto;
}

header {
  width: 100%;
  text-align: center;
  background: transparent;
  display:block;
  overflow: hidden;

}
ul {
  list-style: none;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  li{
    display: inline-block;
  }
}

.logo{
  font-size: 30px;
  vertical-align: middle;
  margin: 0 40px;
}

.second {
  .nav-left{
    float: left;
  }
  ul{
    padding: 30px 0;
  }
  .nav-right{
    float: right;
  }
  .logo{
    padding: 200px 0;
    display: inline-block;
  }
}

.featurette-image.pull-right {
margin-left: 40px;
}

.featurette {
padding-top: 120px;
overflow: hidden;
}

.marketing h2 {
font-weight: normal;
}

.muted {
color: #999999;
}

.featurette-divider {
margin: 80px 0;
}

.container {
width: 1170px;
}

.lead {
margin-bottom: 20px;
font-size: 21px;
font-weight: 200;
line-height: 30px;
}

html.erb document:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner ">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <header class="top"

      <div class="nav-collapse collapse">
        <ul class="nav pull-right">
          <li><a>CODEY</a></li>
          <li> <a>CODEY</a></li>
        </ul>
        <span class="logo"><%= image_tag 'ctclogojagged3.png', alt: 'logo' %></span>

        <ul class="nav pull-left">
          <li><%= link_to "HOME", root_path %></li>
          <li><%= link_to "ABOUT", about_path %></li>
          <li><a>CODEY</a></li>
          </ul>




        </div><!--/.nav-collapse -->
      </div>
    </div>

  </div>
   <div class='banner'>
      <div class="container">
          <div class="row">
            <h1> I would like text and a pie graph to show over this sublime text backdrop </h1>

            <%= image_tag 'Codeythecoder.png' %>
          </div>
      </div>
    </div>


</header>

Is it okay simply to show you how to place text and images over a larger background image? You don't have any demo code for a jsfiddle... — Marc Audet, Jul 01 '13 at 18:15
@Codey, only post the code relevant to the problem, we dont need the whole html document — Patrick Evans, Jul 01 '13 at 18:22

score 3 · Accepted Answer · edited Jul 01 '13 at 20:23

3

position the h1 and the pie image absolute and set their respective top,left positions

CSS

.banner .container .row {
    position:relative; //Needed so that child elements using position
                       //will have have their coordinates relative to the parent 
                       //and not the page.
}

.banner .container .row h1 {
    position:absolute;
    top:30px;
    left:30px;
}

#pieChartID {
    position:absolute;
    top:140px;
    left:130px;
}

And of course a fiddle

edited Jul 01 '13 at 20:23

Hemerson Varela

24,034
16
68
69

answered Jul 01 '13 at 18:20

Patrick Evans

41,991
6
74
87

Thank you very much. It worked, now im researching what some of the elements mean. Thanks for opening my eyes up to this, I appreciate it! – HelloWorld Jul 01 '13 at 20:43

score 1 · Answer 2 · edited Jul 01 '13 at 20:22

1

You can put your image as a background-image of a div:

Check this fiddle

HTML CODE :

<div id="main">
  <h1>Your title</h1>    
</div>

CSS CODE :

html,body{
  height:100%;  
}

#main{
  background-image:url('http://ancient-badlands-4040.herokuapp.com/assets/Codeythecoder-72c5e9659bf2c12819ece72fa6a79606.png');
  height:100%;
}

h1{
  color:white;
}

edited Jul 01 '13 at 20:22

Hemerson Varela

24,034
16
68
69

answered Jul 01 '13 at 18:18

Arnaud Denoyelle

29,980
16
92
148

score 0 · Answer 3 · edited May 23 '17 at 11:50

0

Look at the link below. You would need to do something like what is described in the accepted answer using positioning and padding.

How do I position one image on top of another in HTML?

Perhaps an easier solution would be to use an image editor to create the picture you would like with text and all and then just uploading that using <img src="URL" />

edited May 23 '17 at 11:50

Community

1
1

answered Jul 01 '13 at 18:22

HopAlongPolly

1,347
1
20
48

Thanks Derek. I did consider doing this but am trying to learn how to do positioning myself. This is more of a practice exercise learning experience. I should have posted that in my description above. Thanks for the suggestion Derek. – HelloWorld Jul 01 '13 at 20:44

score 0 · Answer 4 · answered Jul 01 '13 at 19:08

0

you can also use z-index property.

Css code:

.main img {
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
}

check this fiddle

answered Jul 01 '13 at 19:08

miha

1
1

Putting images and h1's over other images

4 Answers4