Live version can be found at this link
The background image extends beyond the footer.
body {
background-image: url(../img/planet.jpg);
background-repeat: no-repeat;
background-size: cover;
}
Footer:
.footer {
padding-top: 5rem;
padding-bottom: 5rem;
background-color: #2c3e50;
color: #fff;
}
The footer is set to stay at the bottom of the page. It is not fixed, so content will flow under it if needed.
I am uncertain as to why the body background is overflowing, but if you wish for the planet background to end along with the footer, you can enclose the HTML within another element and apply the background settings to that element.
<body>
<div class="main-wrapper">
<nav class="navbar navbar-default navbar-fixed-top">...</nav>
<!-- Image Section -->
<section class="page-section portfolio" id="portfolio">...</section>
<!-- Copyright Section -->
<section class="copyright py-4 text-center text-white">...</section>
</div> <!-- close main-wrapper -->
</body>
Subsequently, you can customize the main-wrapper element instead of the body
.main-wrapper {
background-image: url(../img/planet.jpg);
background-repeat: no-repeat;
background-size: cover;
}
Is there a way to remove the scroll bar but still be able to access overflown data using arrows? Any assistance would be greatly appreciated. Thank you in advance. ...
I'm working on a form that includes date and time type inputs. The fields are set up for mm/dd/yyyy date format and 12-hour AM/PM notation for time. However, I prefer to use dd/mm/yyyy date format and 24-hour notation for time. Is there a way to make ...
I am attempting to change the value of a property in my pseudo element CSS class using a JavaScript file. Unfortunately, I keep encountering the error mentioned in the title. Is there any other method that can be used to achieve this? CSS Code: .list { ...
Trying to make my page responsive, but when I inspect and look into mobile view, the elements do not align next to each other like they do on desktop. https://i.sstatic.net/8WhxD.png I want the shopping cart icon and button to be positioned next to each o ...
I am currently working on creating the fourth sidebar (from the left) using the templates provided in Bootstrap 5 examples. Everything seems to be falling into place except for one issue - I can't seem to get the arrow to rotate when aria-expanded=tr ...
I'm exploring options to utilize Node.js or another server-side language to handle a specific type of request. For instance, receiving a request like this: The goal is to extract the value from the URL parameter and use it to dynamically update a var ...
Purpose: My main goal is to implement a tooltip feature where hovering over text triggers the display of a tooltip. To achieve this, I am seeking inspiration from an example on w3schools which can be found at this link. Current Implementation: render() { ...
My current form layout is not very user-friendly, as it appears to be too long for one row. I have fields for amount, note, date, and an option list. I would like to arrange the form so that amount and note are displayed in one row, followed by date and o ...
Does anyone else experience the issue of their Angular 2 templates showing up as gray text in Visual Studio Code? I'm unable to use autocomplete or see my CSS properly. Is this a settings problem or is there a plugin that can solve this? BTW, I am us ...
Having trouble implementing the open and close button for side navigation along with a search bar above the side navigation, similar to the example shown here. I am utilizing bootstrap 4 as my framework. Feel free to check out the source code on https:// ...
Looking for a somewhat unusual solution here - I want to use an image as a background with all edges of the picture visible at all times. Typically, I would use the "cover" setting for this, but that doesn't achieve what I need (image included). After ...
Is it possible to display text in a div with a border and margin around an image using float: right? I have managed to get the text to wrap correctly around the image, but the border is positioned behind the image. UPDATE Here is a snapshot of how I wa ...
Is there a way to display a tooltip in Twitter Bootstrap that includes HTML tags for formatting? Currently, I am using the following code: <a class="my-tooltip" rel="tooltip" href="#" data-original-title="CPR + O<sub>2</sub>.">First-Aid ...
I'm currently attempting to break down my CSS code stored in variables, but I consistently encounter issues when dealing with media queries or similar elements. While I don't require every single rule to be outlined, I am looking for a solution ...
Having a bit of trouble here - whenever I try to externalize my input, the position of my glyphicon seems to be off. Can't quite figure out why. <div class="form-group" ng-class="{ 'has-error has-feedback& ...
What are some recommended strategies for optimizing webpage loading speed? What key factors should be taken into consideration? ...
I need to display terms and conditions on my website without using a text field or taking up the entire page. Instead, I want to show the text in a specific area with only a vertical scroll bar for users to navigate through the content. Here is the curren ...
I have integrated VueJS into a single page using the CDN, which prevents me from utilizing bootstrap-vue. The functionality to display and hide a modal based on the value of the showModal data is currently working. However, the gray overlay surrounding th ...
Looking to utilize the database ID below as a selector 5b4bb7d2685cfb094b1d46c3 Here is the snippet: document.querySelector('#5b4bb7d2685cfb094b1d46c3') <button id="5b4bb7d2685cfb094b1d46c3"> However, when trying the selector, an erro ...
Having trouble setting a background image in CSS within my React app. When styling and setting the image from a React component, it works just fine. Can anyone provide assistance? This code snippet will work: const style={ width:'300px', ...