Layering images and headlines on top of other images

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>
htmlcsstwitter-bootstrap

Answer №1

adjust the positions of the h1 and pie image by setting them to absolute positioning and defining their top and left coordinates

CSS

.banner .container .row {
    position:relative; //This is necessary for child elements with absolute positioning
                       //to be relative to the parent, not the whole page.
}

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

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

Check out the fiddle for a live demo!

Answer №2

To create a background image for a div, simply use the following code:

Take a look at this demo

HTML CODE : 

<div id="main">
  <h1>Your heading</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;
}

Answer №3

Take a look at the following link for guidance. To achieve the desired result, consider implementing the technique outlined in the approved response involving positioning and padding.

How can I overlay one image on top of another using HTML?

Alternatively, you could opt for a simpler solution by utilizing an image editing tool to design the desired image with text included, then directly uploading it using <img src="URL" />

Answer №4

One alternative method is employing the z-index property for layering elements.

Below is an example of CSS code implementation:

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

Feel free to explore this demo.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Determining the offsetWidth and scrollWidth for option elements within a select field containing the multiple attribute on Internet Explorer 11

My select input element has multiple attributes and a fixed width set. Unfortunately, due to the fixed width, the overflowing content in the x-direction is not visible. To address this issue, I have created a JavaScript function that uses the title attribu ...

javascripthtmlcss

It displays empty squares instead of icons

Currently, I am working on a form using Bootstrap and HTML. I have incorporated glyphicons into the design but unfortunately they do not seem to be functioning properly. <label>International Collaboration &nbsp;<span class="glyphicon glyphico ...

htmltwitter-bootstrap-3

Television Mount for Precise Video Placement

Seeking assistance for a unique positioning challenge I am facing. I have a Video that needs to be placed on the home page with a TV-like image "frame" around it, and they should scale together. https://i.sstatic.net/2pLhi.png What I've attempted i ...

htmlcss

The process of loading a unique home page based on the screen size of the device

Looking for assistance on dynamically loading different home pages based on screen size. Any suggestions? For instance, if the screen size is less than 960px, I would like to show the default landing page as index1.html and if the screen size is greater t ...

htmlcsshttpwebresponseadaptive-design

How can validation of input fields be implemented in React Js?

Currently, I am dealing with a variable (in my actual application it is an API) named data, which contains nested items. Starting from the first level, it includes a title that is already displayed and then an array called sublevel, which comprises multip ...

javascripthtmlreactjsformsvalidation

The appearance of all input forms in MaterializeCSS when used in an electron environment appears to

After following the instructions here on how to get started with Materialize CSS, I am having issues with my input form appearing strange: The contents of my current index.html file are as follows: <!DOCTYPE html> <html> <head> & ...

javascripthtmlcsselectronmaterialize

Expanding CSS styles on hover

When my mouse pointer moves out of the red color box, it still triggers the hover function. However, I only want the hover effect to work within the red color box and hide the menu when it's outside the box. This is the source code from JSfiddle: htt ...

csshover

Creating dynamic qtip2 tooltips is an effective way to enhance user interaction on

I am facing an issue where all tooltips work perfectly fine when the page loads, but stop working after data refreshes through ajax. How can I resolve this problem? $(document).ready(function() { // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HT ...

javascriptjquerytwitter-bootstraptooltipqtip2

Find all objects in an array that have a date property greater than today's date and return them

I have an array of objects with a property called createdDate stored as a string. I need to filter out all objects where the createdDate is greater than or equal to today's date. How can this be achieved in typescript/javascript? notMyScrims: Sc ...

javascripthtmlarraysangulartypescript

This video cannot be played on this platform due to its privacy settings

I'm facing a challenge with embedding my client's videos on our website. These videos have domain-level privacy settings, and I've been using the code provided by Vimeo. <div style="padding:28% 0 0 0;position:relative;"> ...

htmlajaxvimeo

Is your JQuery Gallery experiencing issues with the next button function?

I'm working on developing a simple gallery using JQuery. The main concept is to have all image files named x.png (where x is a number), and the program will then add a number to the current one, creating x+1.png and so forth. Here's the code I ...

javascriptjqueryhtmlbuttongallery

Changing <br> to a newline ( ) using JSOUP

Is there a way to efficiently replace all occurrences of <br> with a new line character (\n) in HTML using Jsoup? I'm looking for a clean solution that will result in the Element#text() outputting plain text without any HTML, but with &bsol ...

htmljsoup

What is the best way to make a canvas element fit the entire browser window without causing scroll bars to appear?

My window size isn't working properly, despite attempting the following code: Javascript var game; function game() { this.canvas = document.getElementById('canvas'); this.canvasWidth = window.innerWidth; this.canvasHeight = wi ...

javascripthtmlfullscreen

Access the hyperlink contained within the table

Having trouble clicking a navigation link inside a table? I've tried: getElementByID getElementsByClassName getElementsByTagName but none seem to be working. When using the following code: Set tbls = HTMLDoc.getElementByID("tabToggleTable") it r ...

htmlvbscriptgetelementbyid

Implementing Jquery to Repurpose a Function Numerous Times Using a Single Dynamic Value

Important: I have provided a functional example of the page on my website, currently only functioning for the DayZ section. Check it out here Update: Below is the HTML code for the redditHeader click event <div class="redditHeader grey3"> & ...

javascriptphpjqueryhtmljson

Issue with Bootstrap dropdown menu not showing up/functioning

I've spent the entire day trying to find a solution and experimenting with various methods, but I'm still unable to get it to work. The navbar-toggle (hamburger menu) shows up when the window is resized, but clicking on the button doesn't di ...

htmltwitter-bootstrapcssmenu

What is the best way to display multiple HTML files using node.js?

click here to see the image Here is my server.js file. Using express, I have successfully rendered the list.html and css files on my server. However, I am encountering an issue when trying to navigate from list.html to other html files by entering localho ...

htmlcssnode.jsexpressmariadb

The variable fails to function within the else statement

Having encountered an issue with the $profile_pic variable in my chat code, I've noticed that when I try to display its value before the if statement or within the if branch, everything works fine. However, if I attempt to use it within the else branc ...

phphtmlmysqlvariablesif-statement

Place your cursor over the following element to take control

There is a paragraph that needs to be clipped when hovered over. An issue arises where the H1 text shifts its position. Only the phrase "HOVER ABOVE PARAGRAPH" should be concealed. * { margin: 0; box-sizing: border-box; } .wrapper { displ ...

htmlcsshover

Combine values in CSS without any spacing

Currently, I am attempting to create a LESS mixin that can take a numerical value (degrees for rotation) and generate the appropriate CSS code to rotate an element. However, I am facing difficulties trying to handle both "270deg" and the integer "3" (which ...

cssless