I'm attempting to place text and an image over the sublime text blank document (please visit: )
Currently, my h1 is on top of the image that I want it to be laid over. Additionally, there's another image I'd like to overlay as well.
Could it be an issue with how my divs are structured? I assumed that since both the text and the sublime text image were in the same div, the text would automatically overlay the image.
Keep in mind that the sublime text image is named Codeythecoder.png
Your assistance would be greatly appreciated, thank you :)
style.css.scss file:
$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('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="badfc9d9d2dfc8dfc9cbcfdfe5fa88e294cad4dd">[email protected]</a>');
}
.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 file:
<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>