I'm having an issue with my code - my background image is not filling the entire page. Can anyone help me troubleshoot this

My website's background image is not covering the entire page. Visit my site

You can see in the image provided there is a black bar at the bottom.

If anyone could take a look at my code and help me figure out what I'm doing wrong, I would appreciate it. I've tried multiple solutions.

You can find all of the code on the GitHub repository.

The CSS properties being used are:

background-image: url(img/sc1.png);
padding-top: 40px;
background-position: center center;
background-size: cover;
background-attachment: fixed;
min-height: 100vh;
height: auto;
width: 100vw;
max-width: 100%;
htmlcss

Answer №1

If you want to modify the styling of your website, consider adjusting the .desc class by setting the margin bottom to 0 instead of margin:40px auto.

.desc {
    /* Set margin bottom to 0 */
    margin: 40px auto 0;
    padding: 20px;
    color: #ecf0f1;
    font-size: 2vw;
    background-color: rgba(19, 15, 14, 0.6);
    width: 80%;
}

Furthermore, for the .item class, you can create space between the transparent black box of .desc and the bottom of the page by adjusting the padding bottom:

.item{
    ...
    padding-bottom: 40px;
    ...
}

Answer №2

To improve the appearance of your webpage, consider setting a background image for the body element. You can learn more about this at this link, or you can add a new class to the body element called "s1" and update the CSS styles as follows:

.s1 {
    background-image: url(img/sc1.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

Next, remove the display:none; property from the .item class.

Finally, make adjustments to the .desc class by adding padding: 0px; to eliminate an extra black bar that appears. Also remember to change div class="item s1" in the HTML file to div class="item".

Answer №3

modification

.element {
   width: auto;
}

transform into

.element {
   width: 100%;
}

Answer №4

While this may not be the conventional solution, there is a simple fix for the disappearing black bar issue. By applying the background directly to the html element instead of a specific item element, you can make the black bar vanish.

html {
  height: 100%;
  min-height: 100%;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  background-image: url(img/sc1.png);
}

Answer №5

Your background is currently set to match the height of the viewport, but your content exceeds the viewport height. If you temporarily remove the description, you will see this issue. Additionally, the description has a 20px padding all around, but there is no need for 20px on the bottom. Consider using padding:15px 15px 5px; instead.

If you prefer to use only the viewport, then you must work on removing the scrollbar. However, if you want to keep the scrollbar, then you should remove the vh height setting.

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

Utilizing various CSS classes based on screen resolutions

In my UL, there is a span class called user-name. Depending on the screen resolution, I want to either remove or apply a different class. <link href="media-queries.css" rel="stylesheet"> <span class="user-name">Shane</span> When I try t ...

htmlcss

What is the process for adjusting the color of the underline in Material UI input fields

I am facing an issue with a Material UI Select component that is on a dark background. I want to change the text and line colors to white just for this particular component, while keeping the rest of the Select instances unchanged. Although I have managed ...

cssreactjsmaterial-ui

Add a variety of images

Looking for help with uploading multiple images to a folder and saving paths in the database? Here's a code snippet I've been working on: The issue I'm facing is that while the image names are being saved in the database, the actual images ...

phpmysqlsqlhtml

Angular: Ensuring Elements inside mat-stepper within mat-dialog Adjust to the Height of the Dialog

I am dealing with a mat-dialog that contains a mat-stepper. Within this stepper, there is a step that includes a form with various elements such as a list, mat-card, and table. I need these elements to always fill the height of the dialog. Specifically, I ...

cssangulartypescriptsassangular13

Anomalous spacing when using floats and text alignments

My company name is aligned to the left and my email to the right, with the email section styled as follows: <div style="color: white; float: right; padding-right: 10px; text-align:right"> <p style="font-size: 16px;">E-mail</p> &l ...

htmlcssalignmentspacebreak

Pictures piling up vertically instead of lining up horizontally

Is there a way to display these images in one row horizontally instead of on separate lines? The text under the images is causing them to wrap because of the width. How can I ensure that the title text has the same width as the image? <img src="image.p ...

html

Switch videos within the video tag as you scroll

I am trying to implement a video tag within a div element on my website. Here is the current code: <div class="phone" align="center"> <div class="phone-inner"> <video width="100%" height="100%" autoplay="" loop="" muted id="phonevideo ...

javascriptjqueryhtmlcss

Having trouble with flickering in rotating card animation in Bootstrap using CSS?

Recently, I worked on a bootstrap website where I implemented a unique feature – a card that flips to show its backside upon hover. You can check out the live website here: Live Site Here's the code snippet for the section with the flipping card: ...

htmlcssanimationbootstrap-4

How can I delete a date value from a td if it matches the current date value?

I'm facing an issue with duplicate date values in my table rows and trying to find a solution using JavaScript or JQuery. The problem cannot be fixed within the SQL query itself, so I need to explore alternative approaches. I want to remove repeated d ...

javascriptjqueryhtmlsql

Guide to adding information to an .xml document

Currently, I am working on building a website for a school project, specifically an online shop. I am focusing on the shop section, where I need to store data such as name, price, image, and description in either a text file or XML format. Right now, the w ...

javascriptphphtmlajaxxml

What could be causing the image to not display as completely rounded-full in NextJS13 when using tailwind?

I tried to make an image round using the Image Component in NextJS13, but I ran into some issues Additionally, when I styled it with Tailwind, the full style didn't seem to take effect <div className="h-64 w-96 relative"> <I ...

cssimagenext.jstailwind-cssnext.js13

The concept of see-through backgrounds

I am trying to achieve a more transparent header-menu background, so that the YouTube video underneath it becomes more visible. You can check it out here Unfortunately, the trick mentioned above did not work as expected. .masthead:not(.mixed-header) { ...

htmlcss

Removing a specific MySQL row using HTML in collaboration with Node.js

I've been working on a feature to allow users to delete specific rows from a table. Each row has a "Delete" link at the end, but when I click it, nothing happens. There are no errors displayed, and the console shows that 0 row(s) have been updated, ye ...

javascripthtmlmysqlsqlnode.js

Is there a way for me to extract and showcase the initial 10 items bearing a particular class name from a different html document on my homepage?

I am looking to extract a list of movies from an HTML file titled "movies.html". The structure of the file is as follows: <div class="movie">Content 1</div> <div class="movie">Content 2</div> <div class=" ...

javascripthtml

Achieving the perfect horizontal alignment of images

Currently working on a new project and here's the page I'm focusing on: The elements are exceeding the set height of their container and overlapping into the content area instead of pushing the existing content down. Any suggestions to fix this ...

htmlcss

Display an image in a new window

Hey, I want to display an image in a separate window when it is clicked. Here is my HTML code snippet: <div data-role="content" class="jqm-content"> <h2>Photo popup example</h2> <div data-demo-html="true"> <a href="#popup ...

javascriptjqueryhtml

Is the Navbar moving off-center and the Bootstrap sign-in demo looking funky on Flask? Need any solutions?

The positioning of the Navbar has been altered to the left, causing distortion in the login items, which is an example of Bootstrap implementation. In my login.html file, I have utilized the Bootstrap sign-in example. Strangely, only on this specific page ...

htmlcssbootstrap-5

What is the best way to achieve line breaks in text that auto-wraps in JavaScript/PHP?

My resizable div contains text/sentences. As I adjust the size of the div, the text wraps itself to perfectly fit within the available space in the container div. Now, I am faced with the task of converting this dynamic text into an image using php and th ...

javascriptphpjqueryhtmlcss

Issues with the functionality of customisable list items in a list

I am attempting to customize the appearance of specific list items within a ul element. One li element should be displayed in red font, while another li element should have a hyperlink styled with a different color and an underline rollover effect. The thi ...

htmlcss

Changing the Options for Page Size in Material Paginator

Firstly, here is my angular code: ts: @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.scss'] }) export class DashboardComponent implements OnInit, A ...

htmlcssangular