cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Exit
search
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0
Upvote

Elements not showing up

benn25106859
Community Beginner ,
Jan 28, 2017 Jan 28, 2017

I'm using Bootstrap 4 and wanted to know whether there was a way I could make different elements appear below each other. For example, I have a navbar and then a image in my html and I want to add text, however when I do it appears right at the top of the screen and is hidden by the navbar. I would like it to appear under the image insead. Here is my html:

<!DOCTYPE html>

<html lang="en">

<head>

<title>Game Canvas</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="description" content="Open Source Images" />

<!-- Bootstrap CSS -->

<link rel="stylesheet" href="css/bootstrap.min.css">

<!--My CSS-->

<link rel="stylesheet" href="css/main.css">

</head>

<body>

<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse">

  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>

  <a class="navbar-brand" href="#"> <img src="assets/logowhite.png" width="30" height="30" class="d-inline-block align-top" alt=""> Game Canvas </a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">

    <ul class="navbar-nav mr-auto">

      <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>

      <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>

      <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li>

    </ul>

    <form class="form-inline my-2 my-lg-0">

      <input class="form-control mr-sm-2" type="text" placeholder="Search">

      <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>

    </form>

  </div>

</nav>

<div class="bg" style="background-image: url(css/bg.png); opacity: 1;"></div>

<div class="container-fluid">

  <div class="row">

    <div class="col"> 1 </div>

    <div class="col"> 2 </div>

  </div>

</div>

<!-- jQuery first, then Tether, then Bootstrap JS. -->

<script src="js/jquery-3.1.1.min.js"></script>

<script src="js/tether.min.js"></script>

<script src="js/bootstrap.min.js"></script>

</body>

</html>

507
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Nancy OShea Community Expert
Community Expert , Jan 29, 2017 Jan 29, 2017

Position absolute is pure poison in responsive layouts.  Please don't us it for this.

Responsive foreground images can be achieved with the Bootstrap img-responsive class.

Background-size:cover does 2 things.  It makes the BG image fill the screen and re-scales to viewport.  This is appropriate to use when you need to overlay content on your BG image.  Otherwise, use a foreground image.

In the following Parallax template tutorial, I have used background-size cover on 4 parallax regions.

No positio

...
Translate
replies 6 Replies 6
latest latest Jump to latest reply
Nancy OShea Community Expert
Community Expert ,
Jan 28, 2017 Jan 28, 2017

Add CSS padding-top to your body selector to provide ample space between navigation and content.

Somewhere between 50 - 70px.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
benn25106859
Community Beginner ,
Jan 28, 2017 Jan 28, 2017
In Response To Nancy OShea

But is there a way I can put it below the image as well or do I just put lots more padding

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Nancy OShea Community Expert
Community Expert ,
Jan 28, 2017 Jan 28, 2017
In Response To benn25106859

What's the reason for a background image there?  Why not insert a foreground image into your HTML?

And don't use inline CSS styles in web pages if you can possibly avoid it.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
benn25106859
Community Beginner ,
Jan 29, 2017 Jan 29, 2017
In Response To Nancy OShea

It's so that when you adjust the size of the screen, the image will adjust automatically. This is my css

.bg {

  position: absolute;

  width: 100%;

  height: 50%;

  top: 0;

  left: 0;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  opacity: 1;

}

and you can see that the image will cover the screen no matter what. So If there was way it could adjust automatically and be a foreground image I would, however I can't find a way to do that

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Nancy OShea Community Expert
Community Expert ,
Jan 29, 2017 Jan 29, 2017
In Response To benn25106859

Position absolute is pure poison in responsive layouts.  Please don't us it for this.

Responsive foreground images can be achieved with the Bootstrap img-responsive class.

Background-size:cover does 2 things.  It makes the BG image fill the screen and re-scales to viewport.  This is appropriate to use when you need to overlay content on your BG image.  Otherwise, use a foreground image.

In the following Parallax template tutorial, I have used background-size cover on 4 parallax regions.

No positioning required.

DEMO:

Bootstrap Parallax Template

TUTORIAL:

Bootstrap Parallax Template - http://alt-web.com/

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
benn25106859
Community Beginner ,
Jan 29, 2017 Jan 29, 2017
LATEST
In Response To Nancy OShea

Thank you

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Copyright © 2025 Adobe. All rights reserved.
Using the Community Experience League Terms of Use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices