Guide to placing an element behind text using Bootstrap 3

On my webpage, I have a straightforward Bootstrap Jumbotron displayed prominently:

<div class="jumbotron">
    <div class="container">
        <h1>Welcome to My Wonderful Site</h1>
        <p>There's some information here</p>
        <p><a href="somePage'" class="btn btn-primary btn-lg" role="button">Click Me!</a></p>
    </div>
</div>

I want to enhance this Jumbotron by embedding a background element, like a map (perhaps Google Maps). How can I position the map inside the Jumbotron but ensure it remains behind all other content?

It seems like using relative positions may be the solution, but CSS isn't really my area of expertise.

htmlcsstwitter-bootstrap-3

Answer №1

Click on this JsFiddle hyperlink - http://jsfiddle.net/ravk26/ApSC3/

This is the code for HTML and CSS:

HTML:

<div class="jumbotron">
<div class="container">
    <div class="map"><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d26081603.294420436!2d-95.677068!3d37.06250000000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1395991829737" width="100%" height="100%" frameborder="0" style="border:0"></iframe></div>
    <h1>My fancy map site</h1>
    <p>Some stuff here</p>
    <p><a href="somePage'" class="btn btn-primary btn-lg" role="button">I'm a button</a></p>

</div>

CSS:

.jumbotron { border: 1px solid #d4d4d4; background: transparent; padding: 10px; position: relative; }

.map { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; }

I trust this will be useful to you.

Answer №2

To create an intriguing visual effect, consider using an "overlay" element positioned outside the map-canvas and then relative positing it over the jumbotron...

#map-canvas {
  height:       450px;
  z-index:      -1;
}

#overlay {
  background:   #fff;
  opacity:      .8;
  position:     relative;
  top:          -300px;
  padding:      10px;
  z-index:      2;
  margin:       0 auto;
  width:        600px;
  border-radius:5px;
}

Check out this live demo: http://www.bootply.com/125543

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

Ways to heighten the `RadComboBox` `DropDownHeight` featuring `Templates`

One of the challenges I'm facing involves a RadComboBox setup like this: <telerik:RadComboBox ID="RadComboBoxNames" runat="server" Width="470px" DropDownAutoWidth="Enabled" MaxHeight="363px" Skin="MySkin" EmptyMessage="Select" High ...

cssasp.netvb.nettelerikradcombobox

The current state of my DOM doesn't match the updated value in my model. The update is triggered by a function that is called when a button is clicked

app.controller('thumbnailController', function ($scope) { debugger $scope.customers = [ { name: 'Ave Jones', city: 'Phoenix' }, { name: 'Amie Riley', city: 'Phoenix&ap ...

javascriptjqueryhtmlangularjs

Show advancement bar during the process of creating an Excel spreadsheet in php

I'm currently working on an HTML form that generates an Excel file using PHPExcel when submitted. Everything is functioning correctly, but I've noticed that the process takes a long time for large excel files. I would like to implement a progress ...

phphtmlajaxphpexcel

Form for contacting with file attachment option

I'm having trouble integrating file upload functionality into my existing code. I've been scouring the internet for solutions but haven't found anything that fits seamlessly with my current setup. It's frustrating to encounter error aft ...

phphtmltwitter-bootstrap-3

Windows and MacOS each use unique methods for displaying linear gradients

Check out this code snippet featuring a background gradient background: rgba(0,0,0,0) linear-gradient(rgb(245, 245, 245),rgba(0,0,0,0)) repeat scroll 0 0; This code renders correctly on Windows (chrome, ie, firefox) https://i.stack.imgur.com/XU2gW ...

htmlcsswindowsmacos

What is the process for extracting the differences between two or three files and merging them together in Node.js?

Recently, I've been experimenting with webpack and successfully managed to output and transform es5 build to include nomodule in the tags directly from HtmlWebpackPlugin using hooks. Similarly, for the es6 build, I added type="module". Howe ...

javascripthtmlnode.jswebpack

Is there a way to use Selenium to perform testing on a web UI that generates XML content instead of HTML?

Utilizing Selenium for testing my Perl cgi script has been successful overall, but I've encountered a unique issue in one particular test case. In this scenario, the cgi script returns XML content to the web browser instead of the expected HTML conten ...

htmlxmlperlunit-testingselenium

Applying a CSS class (or style) dynamically depending on the variable with the help of a directive

I'm facing a situation where I need to apply ng-style (or ng-class) multiple times depending on a variable. However, this repetitive task of writing ng-class for the same functionality for each widget is quite cumbersome for me. Is there a way to si ...

javascriptcssangularjsangularjs-directive

Are there any methods for integrating a database file directly into an HTML file? If not, are there alternative approaches I could explore to achieve a similar result?

I have a school project where I need to create a website showcasing my work. I've created a database in Microsoft Access and I'm wondering if there's a way to integrate it into my website using html. The database is simple, just a table, a f ...

html

Combining Node and React: Using CSS Class Names with Hyphens

Currently, my project utilizes react-starter-kit and includes several react components, each with its own styling file (scss). Every component imports the styling file at the top like this: import s from './Header.scss'; When it comes to using ...

cssnode.jsreactjssassbabeljs

Position the Radio Buttons on Top of the Image

I need assistance with positioning radio buttons on top of an image at a specific location. Both the image and radio buttons are currently in a Div container, but I am unsure about the next steps. Below is where I would like to place the radio buttons (red ...

htmlcss

When attempting to add an image to a table, I struggle to do so without disrupting the alignment of the surrounding cells

I'm having an issue with adding an image to my table. Whenever I place the img tag between the <td> tags, the content in the neighboring cell behaves as if there are <br> tags above it. I attempted to use display:inline-block, but it had ...

htmlcss

What steps should I take to successfully integrate my Dojo DataGrid into a Dojo ContentPane that is nested within a Dojo TabContainer?

It seems that the issue arises from having different settings for parseOnLoad in the separate widgets. I have experimented with both true and false values but without success. To troubleshoot, I created three web pages - two containing TabContainer and Dat ...

htmldojodojox.grid.datagrid

Is there a specific CSS selector that targets elements with "multiline" content?

My website has a menu that displays with the following CSS: a { background:red; } <a href="#">Home</a> <a href="#">Downloads</a> <a href="#">Contact</a> <a href="#">FAQ</a> <a href="#">Disclaimer&l ...

htmlcss

Failed Ajax request is caused by an incorrect URL

In my current project using Ajax, I encountered a peculiar issue. The main page, Main.html, is accessible locally at 'http://localhost/Main.html', and it is styled with Bootstrap. Upon loading the page, jQuery verifies the existence of a particu ...

phpjqueryhtmlajaxurl

Display the title of an image beneath the image using CSS

Since upgrading my CMS, I've encountered an issue where the captions of images are not showing below the image for thousands of articles. For example: <img src="123.jpg" alt="Texttext" class="caption" style="disp ...

csstitlecaption

Execute a jQuery function every time the class of the parent container div changes

I am seeking to trigger the function below whenever its containing div parent <div class="section">...</div> transitions to an "active" state, for example: <div class="section active">...</div> $(".skills-grid__col").each(function ...

javascriptjqueryhtmlcss

Menu with dropdown navigation

Looking to create a dynamic and responsive navbar menu with items and subitems on my website. Bootstrap has proven to be challenging when adding submenus. Are there any tools, frameworks, codes or plugins that could assist me in achieving this? It's ...

angularjshtmltwitter-bootstrap

Customizing the appearance of an input button in Internet Explorer 8

I've been trying to style my file input section using a method similar to the one outlined in this article: . However, I'm encountering issues specifically with compatibility in IE8; all I can see is the corner of an oversized button. Here' ...

cssinternet-explorer-8opacity

Tips for extracting particular information from a website and displaying it within my application

While I have searched for a solution to my problem, I couldn't find an answer that fits my specific needs. I am attempting to extract specific information (highlighted in red) from this website: . I understand that JSON parsing can retrieve this data, ...

androidhtmljsonparsingweb-scraping