Strange resizing behavior using automatic background sizing

Currently, I am facing an issue while trying to set a background image on my webpage with the auto background-size property.

The problem arises when my image gets automatically resized.

Even though my image has a width of 2501px, it is being resized to a width of 640px.

Below is the resized background image:

https://i.sstatic.net/xsQdR.jpg

Interestingly, I recently came across an example where a background-size: auto was used with a 1440px width image, and it did not resize.

Check out the example I found:

https://i.sstatic.net/93Y85.jpg

Here is the CSS I am using:

* {
    margin: 0;
    padding: 0;
  }

body,html {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    background-color: #272727;
    color: #fff;
    background-image: url("https://i.ibb.co/t4JgQsP/Background-large.png");
    /* background-size: cover; */
    background-size: auto;
    background-position: top center;
    background-repeat: no-repeat;
 }

.test {
    width: 200px; /* Set a specific width for the element */
    text-align: center;
    color: aliceblue;
    font-size: 2rem;
}

.child.one {
    color:aquamarine;
}

#astro {
    padding-top: 8608px;
    padding-right: 30px;
    max-height: 67%;
    /* opacity: 40%; */
  
    filter: drop-shadow(0 0 5px cyan);
    
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-name: respiration;
    animation-iteration-count: infinite;
  }
  
  @keyframes respiration {
    from {
      filter: drop-shadow(0 0 5px cyan);
    }
    
    50% {
      filter: drop-shadow(0 0 25px cyan);
    }
  
    to {
      filter: drop-shadow(0 0 5px cyan);
    }
  }

Answer №1

* {
    margin: 0;
    padding: 0;
}

body, html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Vertically center content */
    background-color: #272727;
    color: #fff;
    background-image: url("https://i.ibb.co/t4JgQsP/Background-large.png");
    background-size: auto; /* Original size */
    background-position: center center; /* Center the image */
    background-repeat: no-repeat;
}

.test {
    width: 200px; /* Set specific width */
    text-align: center;
    color: aliceblue;
    font-size: 2rem;
}

.child.one {
    color: aquamarine;
}

#astro {
    padding-top: 860px; /* Adjust padding */
    max-height: 67%;
    filter: drop-shadow(0 0 5px cyan);
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-name: respiration;
    animation-iteration-count: infinite;
}

@keyframes respiration {
    from {
        filter: drop-shadow(0 0 5px cyan);
    }
    50% {
        filter: drop-shadow(0 0 25px cyan);
    }
    to {
        filter: drop-shadow(0 0 5px cyan);
    }
}

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

PHP and AJAX allow for seamless data retrieval without the need for page refreshing, and the data can be easily displayed in a modal window

I am currently encountering an issue with sending data to another page without refreshing. I am able to send the data as text, but for some reason, I am unable to send it as a modal. Why might this be happening? Here is an image of my current page https:/ ...

What is the significance of the A tag when parsing a URL?

So, I encountered a problem that involved parsing a URL to extract the hostname and pathname, then comparing the extracted pathname with a string. If you need help with this issue, check out this post: How do I parse a URL into hostname and path in javasc ...

Is it possible to create a form inside a tooltip?

Looking to incorporate a jQuery feature into a form where a simple yes or no question appears upon hovering over it. However, encountering issues getting jQuery to recognize the dynamically created tooltip and submit alert function not working ("$('#w ...

Implement event listeners for multiple buttons using Handlebar.js templates, but only the final one will be active

For a homework assignment, I am developing a web app that utilizes websockets to receive server messages and then displays them on an HTML page using handlebars.js. One feature I am trying to implement is the ability to delete a message with the following ...

Tips for developing screen reader-friendly AJAX areas and managing updates to the DOM?

My interactive user process operates in the following manner: Users encounter a dropdown menu featuring a selection of cities. Upon picking a city, an AJAX request retrieves all buildings within that city and inserts them into a designated div (the AJAX ...

What is causing the issue where Multiple file selection does not work when using the multiple attribute

I am having issues with uploading multiple files on my website. I have created an input field with the attribute multiple, but for some reason, I am unable to select multiple files at once. app.html <input type="file" (change)="onChange($event)" req ...

What is the best way to style the header of a table when scrolling in CSS?

Currently, I am facing an issue with applying the top CSS property to the thead element of a table while scrolling. I have attempted various methods but have been unsuccessful in achieving the desired outcome. Initially, I used the scroll event, however, ...

In Firefox, there is a peculiar issue where one of the text boxes in an HTML form does not display

In my HTML form, users can input their first name, last name, and phone number to create an account ID. The textboxes for first name, last name, and account ID work smoothly on all browsers except Firefox. Surprisingly, the phone number textbox doesn' ...

setting different iframe widths for desktop and mobile views

I am working with an iframe and facing a challenge. I want to make it full screen width on mobile devices, but only half the screen width on a normal monitor (100% and 50%, respectively). The minimum specification for the mobile device would be iPhone, alt ...

Troubleshooting the Problem of Uneven Heights in Bootstrap Columns

I am facing an issue with a dropdown inside a Bootstrap grid. When I click on the dropdown, the height of the row is not increasing as expected. Can anyone guide me on how to achieve this? HTML: <div class="container"> <div class=& ...

Upon the initial hover, the data added to the title tag following an Ajax call is not appearing

I am currently working on an ajax request that retrieves information such as username, email, and user_id. Once the ajax call is successful, I use jQuery to append this data to the title tag. The main issue I am facing is that the data is only displayed af ...

The content contained within the .each loop within the click event is only executed a single time

While working on coding a menu opening animation, I encountered an issue today. Upon clicking the menu button, the menu opens and the elements inside receive an added class (resulting in a fade-in effect). Clicking the menu button again should close the ...

"JavaScript that doesn't rely on a specific browser

Why does this code behave differently across browsers? What modifications are needed to ensure consistent behavior in all of them? In Firefox, it functions correctly, using the URL /some/path/?searchedText=sometext. However, in IE, nothing happens when cli ...

My navigation bar is giving me a bit of trouble, as there are two separate issues that seem to be interconnected

Looking for some help with my navigation bar layout. You can also check out the code on fiddle http://jsfiddle.net/SgtRx/ (should have done this earlier, sorry). I'm a beginner when it comes to coding, so please bear with me if I make any mistakes. ...

Is it possible for Penthouse to retrieve critical CSS while using javascript?

I am currently utilizing the laravel-mix-criticalcss npm package to extract the critical CSS of my website. This package leverages Penthouse under the hood, and you can configure Penthouse settings in your webpack.mix.js within the critical options. The ...

Struggling to align a vertical form horizontally in Bootstrap 4?

This code snippet shows the form I am working with: <div id="site" class="container-fluid"> <div class="row"> <div class="my-4 offset-3 col-6 justify-content-center align-items-center"> <form action="/some/path" method="po ...

jQuery is not active on responsive designs

I have implemented a script in my JavaScript code that changes the color of the navigation bar when scrolling. The navigation bar transitions to a white color as you scroll down. However, I am facing an issue with responsiveness and would like to deactivat ...

I would like to request information regarding PHP

I am attempting to retrieve information from a PHP file and insert HTML code into the <div id="1"..., but there are no errors showing and nothing is being inserted into the div. Could the issue be with the AJAX code or is it a problem within the HTML st ...

How can I use an ajax get request to retrieve a css file from a webpage and then customize the default styles in my program?

Here is my current code snippet: HTML: <h1>Test Message</h1> Default CSS: h1{ font-size: 24px; } Jquery: $(document).ready(function(req, res){ $.ajax({ url:"example.com/test.css", type : "GET", crossDomain ...

Only apply the CSS rule to all pages except for one

I'm a beginner when it comes to css. In my wordpress website editor (Onetone theme), I added the following rule to my 'custom css field': html, body {margin: 0; height: 100%; overflow: hidden} It's working well...the scrollbar is gone ...