I am looking to create a landing page for my project similar to the design on this website. I am using Bootstrap 4 and HTML, but struggling to hide the background image behind the navigation bar. Can anyone help with this issue?
I am looking to create a landing page for my project similar to the design on this website. I am using Bootstrap 4 and HTML, but struggling to hide the background image behind the navigation bar. Can anyone help with this issue?
I have created a similar design on my Codepen profile. The only modification needed is moving the logo to a navigation bar and adjusting its position to align with the top, as per your provided example.
Please refer to the code snippet below:
<div class="header_img">
<div class="row logo-container-div align-items-center justify-content-center">
<div class="logo-wrapper col-auto" >
<h1>LOGO HERE</h1>
<p>Some additional text</p>
</div>
</div>
</div>
CSS Styles:
.header_img {
height: 800px;
width: 100%;
background-image: linear-gradient(150deg, rgba(68, 0, 139, 0.7), rgba(47, 0, 120, 0.6) 10%, rgba(27, 57, 129, 0.5) 30%, rgba(41, 123, 192, 0.5) 50%, rgba(114, 240, 255, 0.6) 86%, rgba(84, 183, 249, 0.7)), url("http://www.strawberryproofing.co.uk/images/nature_large1.png");
background-position: 0%, 0%, 50%, 50%;
background-attachment: scroll, fixed;
background-size: auto, cover;
}
.logo-container-div {
min-height: 70vh;
}
.logo-wrapper {
font-family: 'Raleway', sans-serif;
padding: 25px 30px;
border: 2px solid white;
color:#fff;
text-align:center;
position: fixed;
}
.logo-wrapper h1 {
font-size: 36px;
}
.logo-wrapper p {
font-size: 18px;
}
View the updated design on Codepen: https://codepen.io/billyfarroll/pen/qYWYYV
Incorporate the flex, justify, and align properties along with adjustments to background-position and background-size.
From my interpretation of your inquiry, it seems that you are looking to conceal your image behind the navigation bar upon scrolling the page. To achieve this, you will need to make the navigation bar fixed by adding the CSS property "position: fixed" to your navigation bar class.
Edit: Currently, I am utilizing the jquery validate plugin and have hidden all error messages initially. Upon checking a specific input field, my objective is to unhide the error message if it is invalid without causing error messages to appear in other f ...
Hello there, I've been following along with this tutorial on CSS Positioning to enhance my understanding: . Everything was going smoothly until I reached step 7 and ran into a roadblock. In that step, the text "id = div-1" is supposed to be positioned ...
As a beginner in Angular and JavaScript, I may be making some obvious mistakes so please bear with me. I have written this code that allows the selection of 2 text files and then combines them into a single array. $scope.textArray = []; $scope.textUpload ...
I am working on a React project with TypeScript and using a Material UI library. I am trying to set a background image for a button, but when I use src or imageURL, it gives me a TypeScript error. The CSS style also does not show the picture. Here is my ...
I've been working on writing HTML and JavaScript code that enables user input to change based on which button the user clicks. The idea is that the user enters find/replace values, and when they hit the replace button, the text they initially entered ...
Check out my website at kenastonchiropractic.com When viewing the site in Chrome, the "Home" link remains the same color as the other links and they all turn white when hovered over. However, in Firefox, the "Home" link stays blue even after being clicked ...
I have been tasked with uploading a file. The file comes with a remove button, which can be pressed to delete it. Below is the code I used: The code snippet is as follows: <div id="main"> <p id="addfile1">Add File</p> <div id ...
Index.html <script> let bar = 1; </script> This html page is being loaded multiple times on the page using AJAX: article.html <script> if (bar === 1) { // perform a task } // Error: bar is not defined </script> Bar is a simple ...
I have a collection of 4 pictures that I want to rotate through in my web application. Each picture should have the "active" class applied to it, similar to when you hover over an image. .active, .pic:hover{ position: absolute; border: 1px solid ...
I'm having an issue with dynamically generating an accordion using bootstrap and ASP.NET Core. The problem is that only the first two out of four categories are expanding/collapsing, even though each card-header and card-body is available in the DOM. ...
Currently, my approach involves using the following code to fetch my html file. app.get("/", function (request, response) { response.sendFile(__dirname + "/public_html/index.html"); }) The html file contains a form with method="post" and a submit button. ...
I'm in the process of developing a CKEditor plugin and one feature I'd like to include is the ability to delete specific HTML elements from the editor's content. For example, removing an <img id="remove-me" />. I understand that I can ...
Hey there, I'm facing some issues with utilizing the asynchronous ngFor feature. I have a basic example where an array of objects is fetched from a server during onInit, and once it arrives, I want to iterate over it. Here's how it's impleme ...
We are currently working on an internal web application and need to find a way to upload a very large file (100mb). Can an HTML file upload handle this size or do we need to consider other options like Java applets, Silverlight, or Flash? Is it even feasi ...
Here is the code snippet for displaying images: <div class="row"> <div class="col-12"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-12"> <div class=&qu ...
As I develop a web application that takes user input through HTML inputs and forwards it to my tomcat server for processing, my current workflow is as follows: Client JS -> collect HTML input -> perform regex validation -> if successful -> se ...
Here is a sample code using a while loop: while($fetch = $stm->fetchAll()) { echo '<tr class=""'>; echo '<td>' . $fetch['name'] . '</td>'; echo '</tr>'; } I want to ...
As I work on constructing a web page for my hobby, I am utilizing Bootstrap 5.3.3 and JS DataTables 2.0.5. Within the page, there is a table displaying data about various players. I have implemented a feature where clicking on certain cells triggers a popo ...
Looking for a way to create an HTML division using the div element that is only visible when the print function is used (Ctrl+P) and not visible in the regular page view. Unfortunately, I attempted the following method without success. Any advice or solut ...
Check out this code snippet on jsfiddle: https://jsfiddle.net/55cc077/pvu5cmta/ To address the limitation of css height: 100% only working if the element's parent has an explicitly defined height, this jQuery script adjusts the cell height. Is there ...