The background image fails to fully cover the screen when the fixed position is applied, yet it does not cover the entire vertical space when the fixed position is not

I'm struggling to make this image the full background of my page, but I can't seem to get it right. My goal is to have the image cover the entire page without any cropping vertical or horizontally.

Keep in mind that the CSS file is properly linked to the document.

HTML:
<body>
  <main>
    <h2 id="cityName">

    </h2>
    <div id="weatherIcon">
      <img id="weatherIconImg"/>
    </div>
  </main>
</body>

CSS:
body {
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
background-repeat: no-repeat;
-webkit-background-size: cover fixed;
-moz-background-size: cover fixed;
-o-background-size: cover fixed;
background-size: cover fixed;
}
htmlcss

Answer №1

Give this a shot and see if it suits your needs: 

body {
min-height: 100vh;
min-width: 100vw;
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
background-size: 100% 100%;
background-attachment: fixed;
}
<main>
    <h2 id="cityName">

    </h2>
    <div id="weatherIcon">
      <img id="weatherIconImg"/>
    </div>
  </main>

You might want to experiment with background-size: Cover;, as this could result in the image being cropped from the right or bottom, whereas using background-size: 100% 100%; will cause the image to stretch. It all comes down to the size of the image itself.

Answer №2

Avoid using the CSS attribute "background-repeat: no-repeat;" if you want a full-screen image.

There are two ways to resolve this issue: 1. Use the fullsize image and repeat it for larger screens. 2. Stretch the image to fit the full width.

Refer to the code snippet below:

body {
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}
<h2 id="cityName"></h2>
<div id="weatherIcon">
  <img id="weatherIconImg"/>
</div>

Another method is shown below:

body {
min-height: 100vh;
min-width: 100vw;
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
background-size: 100% 100%;
}
<h2 id="cityName"></h2>
<div id="weatherIcon">
  <img id="weatherIconImg"/>
</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

Tips for creating a unique scroll page arrow button with adjustable thickness?

Seeking guidance on how to adjust the thickness of the arrow used as a scroll button on my website. I am aiming for a similar look to the arrow on this particular website: example of arrow https://i.sstatic.net/wO5br.png To view my code, please visit: Cod ...

javascripthtmlcss

Change the Jquery function to 'each' method

I have developed a function to incorporate up and down button controls for an input field. However, I am facing an issue with making this function work when there are multiple instances of the same element on a single page. $(document).ready(function() { ...

javascriptjqueryhtml

The calendar is displaying incorrectly on Chrome

Utilizing the FullCalendar jQuery plugin, my website showcases a monthly event calendar. While Firefox and IE show events occurring on the same day with very little space between them, Chrome displays a large unwanted space, as seen in the screenshot below ...

javascriptjquerycssfullcalendar

Get the download link for myFileName.myFileType from the UIWebView

I need my UIwebview to initiate a download of a file when its link is clicked. Currently, it just displays the content of the file, which is in JSON format. Despite registering the mimetype and trying to add download="target.myfiletype" to the anchor t ...

htmliosobjective-cuiwebviewmime-types

Too many classes in LESS with identical styles?

Can you help me convert this style into LESS? nav a:hover, nav a:focus, footer a:hover, footer a:focus, .fullscreen-container a:hover, .fullscreen-container a:focus { text-decoration: none; } Here's my solution: .text-decoration-none () { t ...

cssless

Achieve a full vertical span of the Bootstrap 5 grid row to encompass all of its content

How can I ensure that a Bootstrap 5 grid row expands to fit its entire content vertically? Adding a label element causes the content of the first row to overlap with the second row in the example provided below. <!doctype html> <html lang="en ...

csstwitter-bootstrapbootstrap-5

Issues with CSS transitions/animations not functioning properly across different browsers

Take a look at this FIDDLE Link. I'm facing an issue where the animation works smoothly in Firefox, but it's not functioning as expected in Chrome. Kindly open the fiddle in both browsers (Chrome and Firefox), hover over the image, and notice t ...

htmlcss

The Div element refuses to budge from its current position on the page's layout

$("#pg2_main_display_div ").css({ top: -$("#pg2_main_display_div").offset().top }); The value generated by -$("#pg2_main_display_div").offset().top is currently -1033. Unfortunately, this code does not seem to be functioning properly as the content ...

javascriptjqueryhtml

Stop a looping animation keyframe in CSS and make it animate back to the beginning

I am facing an issue with a looping animation that rotates a square. Whenever I remove the class responsible for the animation, the square immediately returns to its initial position. My objective is to animate the square back to the starting position upo ...

csscss-animationskeyframe

Tips for formatting text preceding a specific symbol

When text is generated from a for loop, such as "Hello: how are you?" and "Hi: I am fine", the goal is to make the text preceding the colon bold. For instance, in the examples provided, "Hello" and "Hi" should appear ...

htmlcssangularjs

Checking for Files without Compiling: A guide to using Webpack 2

I have a scenario where I am importing several .css files from npm modules in my main.js file, which serves as the entry point for my webpack configuration. Here is an example of how it's set up: "use strict"; const ExtractTextPlugin = require("extra ...

javascriptcssnode.jstwitter-bootstrapwebpack

Broaden the default className attribute of the component

Greetings! I'm currently using Bootstrap with React and I am trying to figure out how to extend my component by passing className props deeper. Within my atom component, I have two separate files. The first one contains the component declaration. B ...

javascriptcssreactjsreact-bootstrapbootstrap-5

Guide to obtaining the dynamically generated id of an HTML element using Angular

<div *ngFor="let link of links; let i = index;"> <p>{{link.full}}</p> <button [id]='i' (click)="copyToClipboard(copy)">Copy</button> </div> Is there a way to access the [id]="i" in my TypeScript code? ...

htmlangulartypescript

Effortlessly transferring elements from box 1 to box 2 using jquery sortable - a step-by-step guide

Here is the structure of my code: HTML : <div class="content"> box 1 (Customer) <ol class='example limited_drop_targets default vertical'> <li>Valentino Rossi<ol></ol></li> <li>David ...

javascriptjqueryhtmlcss

Is there a way to open a particular Bootstrap tab within a modal using a URL?

I am seeking a way to automatically open a specific tab within a modal using its URL. To achieve this, I have included the following JavaScript code at the end of my website. By entering website.com/#modal-6 in the browser, it will open with modal-6 activa ...

javascripthtmltwitter-bootstrapbootstrap-5

SVG Clip Path Issue

https://i.sstatic.net/p8f1L.png The SVG I have positioned is within a container covering the bottom 40% of the page. This setup is intentional as the lower portion of the image is not needed. However, this positioning causes the SVG to be cut off near the ...

htmlcsssvgbootstrap-4position

Sophisticated CSS design featuring a heart-shaped cutout from the background

I am trying to design a shape using only CSS (no images) that is the opposite of a heart shape. It's a bit hard to explain, so here is a visual representation: The blue represents the background, but the shape I am aiming for is not a heart, it is ac ...

cssshapescss-shapes

The justify-content-between property is failing to align two divs in a row

I have two divs that I want to align, with one on the left and the other on the right (similar to this). I've experimented with self-align-start and self-align-end in each column, but haven't achieved the desired outcome. I also added the class r ...

htmlcsstwitter-bootstrapbootstrap-5

What is the best way to horizontally align two elements that are individually contained within <span> tags?

Is there a way to center a group of CSS buttons on a webpage? Currently, the buttons are aligning to the left even though I have set display: inline-block;. I have found that I can center them by adding an additional parent div and giving it an id with dis ...

phpcsscenterdisplaytag

issue with centering using margin auto

Below is the HTML and CSS snippet for reference: * { margin: 0; padding: 0; } html, body { height: 100%; width: 100%; } header { height: 100px; background-color: #35424a; ...

htmlcss