What steps should be taken to ensure that text starts after an image concludes, rather than displaying on top

I am facing an issue with my website layout. I have set an image as the background and a navigation bar that displays over the image. However, when I add a p tag, it also displays over the image instead of below it. I have used position absolute to keep the navigation bar at the top of the page, but the p tag is not behaving as expected.

I have tried removing the position style, but it ends up moving the navigation bar as well.

Example

HTML

    <!DOCTYPE html>
<html>
<head>
  <title>Sabah Khan</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="background">
    <img src="images/bg.jpeg">
  </div>

<nav class="navbar navbar-default">
  <div class ="container-fluid">
    <ul class="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#skills">Skills</a></li>
      <li><a href="#expereince">Experience</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
</nav>

<div id="skills" style="overflow:hidden;">
<p>some information</p>
</div>
</body>
</html>

CSS

html{
  height: 100%;
  }

  #background img{

  position: absolute;
  width: 100%;
  opacity: 0.6;
}

.nav{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav li{
  padding: 30px 15px;
  margin-top: 20px;
}
.nav a{
  color: rgb(66,69,86);
}

.navbar-default{
  background:transparent;
  background-image:none;
  border-color:transparent;
  box-shadow:none;
}

Answer №1

Utilize the background-image property along with position: relative;

https://jsfiddle.net/tg1vgq2o/18/

HTML

<html>
<head>
  <title>Sabah Khan</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
  <nav class="navbar navbar-default">
    <div class ="container-fluid">
      <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#expereince">Experience</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </nav>
</div>


<div id="skills" style="overflow:hidden;">
  <p>some information</p>
</div>
</body>
</html>

CSS

html{
  height: 100%;
}

.header {
  background: url('https://image.freepik.com/free-vector/abstract-design-background_1048-6726.jpg') no-repeat center center;
  background-size: 100% 100%;
  border: none;
  overflow: hidden;
  outline:none;
  background-color: Transparent;
}

.nav{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.nav li{
  padding: 30px 15px;
  margin-top: 20px;
}
.nav a{
  color: rgb(66,69,86);
}

.navbar-default{
  background:transparent;
  background-image:none;
  border-color:transparent;
  box-shadow:none;
}

Answer №2

There are several ways to achieve this, but the easiest method would be to add the image using an <img> tag and ensure it is responsive by using the img-fluid class, as shown below.

In addition, this solution showcases a regular non-responsive navigation. If this was not your intention, I have separated the non-responsive navigation from the navbar nav for this example. Alternatively, the second solution utilizes a navbar nav instead of the non-responsive nav.

body {
  padding-top: 40px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <ul class="nav justify-content-center fixed-top">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#skills">Skills</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#experience">Experience</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#portfolio">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact</a>         </li>
    </ul>

<img class="img-fluid hero" src="https://unsplash.it/1600/900?image=100">

<main>
  <p>Content goes here.</p>
</main>

On the other hand, you can also continue to utilize background-image. The key is to set the bottom padding to a percentage that corresponds to the image's aspect ratio. For example, using an image with a 16:9 ratio, set the bottom padding to 56.25%.

The second solution illustrates a responsive navbar nav, featuring a hamburger menu button on smaller screens. In this instance, the button does not function because the Bootstrap JS is not included in the example.

.hero {
  padding-bottom: 56.25%;
  background-image: url('https://unsplash.it/1600/900?image=100');
  background-size: cover;
  background-repeat: no-repeat;
}

body {
  padding-top: 56px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<nav class="navbar navbar-default navbar-expand-md navbar-light fixed-top">

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Skills</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Experience</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<div class="hero"></div>

<main>
  <p>Content goes here.</p>
</main>

Feel free to switch between the two navigation types based on your preference.

Additionally, I have added padding-top to the body to prevent the fixed navigation from overlapping with content. Without this adjustment, part of the image would be hidden behind the navigation bar.

Answer №3

After removing the img tag and setting it to the background, I finally achieved the desired result!

html,
body {
  height: 100%;
}

#background {
  /* The image used */
  background-image: url("https://unsplash.it/1600/900/?image=100");
  /* Set a specific height */
  height: 100%;
  /* Position and center the image to scale nicely on all screens */
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav li {
  padding: 30px 15px;
  margin-top: 20px;
}

.nav a {
  color: rgb(66, 69, 86);
}

.navbar-default {
  background: transparent;
  background-image: none;
  border-color: transparent;
  box-shadow: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div id="background">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#expereince">Experience</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </nav>
</div>


<div id="skills" style="overflow:hidden;">
  <p>some information</p>
</div>

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

JavaFX, a versatile container capable of smoothly transitioning between two panes

Looking for a JavaFX container in my Desktop Application that can display a listview with flexible dimensions and transition to gridpane on row selection. The gridpane will show details of the selected row, and clicking the back button will revert to the ...

Unusual sequence of JQuery Ajax calls

Within my website, there is a project div that is displayed using EJS. The data for the projects in EJS are rendered using a forEach loop, resulting in multiple similar divs appearing on the page. Each project div is assigned an id for identification pur ...

What does "SPAN CLASS="SKYPE_C2C_FREE_TEXT_SPAN" refer to?

While browsing a website, I noticed the use of this HTML class surrounding customer address information entered in a form. I am curious about the purpose of these tags - perhaps they trigger a specific behavior on Skype? Unfortunately, I couldn't find ...

What steps are necessary to facilitate payments through Stripe instead of directly on my Wordpress website?

On my Wordpress website, I have created a page where users can select a subscription offer. Currently, the layout looks like this: https://i.sstatic.net/qltbU.png My goal is to redirect users to a Stripe payment page when they click on any of the subscrib ...

The network tab is failing to display the CSS styles being applied to the selectors

Being new to markup languages, I encountered an issue when trying to apply my first CSS file to my index.html. Here is how I included the link tag in the HTML file for the CSS file: index.html code Upon checking the network tab in developer tools, I notic ...

Is there a way to eliminate the outline on a FormControl component in React-bootstrap when the input field is selected?

Currently, I'm working on creating a search bar with dropdown suggestions using React-bootstrap. My goal is to have the search bar span across the page from one side to another with margins on the left and right. To achieve this, I am enclosing the in ...

I am having difficulty accessing specific data in JSON using Searchkit's RefinementListFilter

Utilizing searchkit for a website, I am encountering issues accessing previously converted data in json format. The structure of my json directory is as follows: (...) hits: 0: _index: content _type: content _source: ...

Automatically modify browser configurations to disable document caching

Is it possible to prevent browsers from caching pages using JavaScript? I've noticed that even though PHP has a redirection implemented once the user logs in, when they press the browser's history button, it goes back to the login form. This is b ...

Importing pixi-sound in the right way for PIXI JS

I have a question regarding the proper way to import pixi-sound into my project. I am facing an issue with the following code snippet: import * as PIXI from "pixi.js"; import PIXI_SOUND from "pixi-sound"; const EFFECT_SOUNDS = [...list of music] for (le ...

Is there a Facebook application embedded in the user's wall?

Is it feasible to create a website similar to YouTube, where users can share it on Facebook and run the app (in this case, the video player) directly on their wall without having to visit the YouTube page? If it is possible, is this functionality limited ...

The Bootstrap Carousel cannot be manually manipulated to switch images

I've run into an issue while trying to integrate a Bootstrap carousel gallery on my webpage. Although the photos automatically change after a few seconds, I am unable to manually switch them using the control buttons. Even after including Jquery, Po ...

Using Reactjs: How do you insert HTML code into the primaryText of a list item?

Is it possible to include a span element inside a ListItem like so: <ListItem primaryText={"<span class='inner'>Some important info</span>" + item.title} /> When I view the rendered content, the output is not an HTML span ...

Verify that all elements sharing a common class are concealed

I'm facing a simple issue where I have a list with identical class names. When one of them is clicked, it animates out of the container and then redirects you. The list also includes a hide button. My goal is to receive a browser alert when all items ...

How to ensure scrollbar adjusts to increasing height when using scroll:auto?

My <div> element has the style property scroll:auto. Whenever text is added to the <div> and the content height exceeds the default height, I find myself having to scroll down in order to see the latest lines of text that have been added. What ...

Choosing an element in JQuery based on the value of its style property

I have three divs with the same class but different styles. I need to select only the third one using JQuery. <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-div ...

Is there a way to display multiple Bootstrap 5 modals simultaneously without automatically closing the previous ones?

My current project utilizes bootstrap 5.2, which is a departure from the previous version, bootstrap 3. In bootstrap 3, it was possible to open multiple modals on top of each other, creating an overlapping effect. However, in bootstrap 5 and 5.2, the behav ...

Responsive navigation menu featuring dynamic dropdown menus using HTML and CSS

Looking to design a responsive HTML and CSS navigation menu with multiple dropdown menus? You're in the right place. I've scoured countless YouTube videos, but haven't quite found the perfect template for a two-part navigation menu that tic ...

I'm currently working on a course assignment and I've encountered an issue where nothing happens when I try to execute node

Having trouble with the readline for input execution. Any helpful hints or tips? I've been using it in the same file for all exercises, checked stackoverflow too but realized I'm on Windows. This is my code const { rejects } = require('asse ...

Guide to positioning multiple <img> elements within a single <div> container

I'm having trouble aligning these 6 images inside a div using CSS. They are currently aligned vertically, but I want them to be side-by-side. div#menu-lixos img{ margin-left: auto; margin-right: auto; ...

Guide on triggering a bootstrap popup modal using a TypeScript file

I am currently working on an Angular project where I need to launch a popup modal when my function is called. I came across an example on w3schools, but it only contains the HTML logic to open the popup. What I want to achieve is to open the popup from th ...