Tips for Preventing Background Images from Shifting While Minimizing Your Browser

I have searched for solutions, but they all seem to apply only when someone is scrolling. I am in need of a solution where the background image remains static while minimizing the browser window, causing it to be clipped.

Full Screen https://i.sstatic.net/5IlGL.png

Minimized Screen https://i.sstatic.net/TRkd1.jpg

When I minimize the window, I want the background image to not adjust with the browser size. For example, when minimized, only the letters 'va' from 'vampire' should be visible.

Ex:

Full Screen (All Continents Showing) https://i.sstatic.net/0h45u.png

Minimized Screen (Only Some Continents Showing) https://i.sstatic.net/izBuJ.jpg

.testing{
  background-image: url('http://via.placeholder.com/1280x720.png?text=vampire');
  background-repeat: no-repeat;
  background-position: 100% ;
  background-attachment: fixed;
  height: 800px;
}
<div class="container-fluid testing"></div>

Edit: Thank you for the responses so far, but none have met my specific needs (5/17/21 4:00pm PST)

cssbootstrap-4flexbox

Answer №1

Instead of setting your background image to fixed, I recommend giving it a position of 0 0 so that it stays in place when you resize the window.

.testing{
  background-image: url('http://via.placeholder.com/1280x720.png?text=vampire');
  background-repeat: no-repeat;
  background-position: 0 0;
  height: 800px;
}
<div class="container-fluid testing"></div>

Answer №2

Check out this CSS solution.

.custom-style {
       background-image: url('http://via.placeholder.com/1280x720.png?text=werewolf');
       background-repeat: no-repeat;
       background-position: 100% ;
       background-attachment: fixed;
       height: 800px;
       background-position: top calc(200px - 20vw) right;
       background-size: 100%;
 }
<div class="container-fluid custom-style"></div>

Answer №3

.experiment{
    background-image: url('http://via.placeholder.com/1280x720.png?text=vampire');
    background-repeat: no-repeat;
    background-position: 500px;
    background-attachment: fixed;
    height: 800px;
  }

Similar solutions were provided, but for those encountering this issue later on, remember to set a specific pixel value for the background-position property.

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

Steps for incorporating a Bootstrap carousel into your React application

In my React project, I utilized Bootstrap for styling. However, when attempting to implement a carousel, I encountered an error with the following code: function Home({user}){ return (<> <h1 class="greeting">Hey {user.name}! W ...

reactjsbootstrap-4carouselreact-bootstrapstyling

Is there a way to eliminate the additional space on the right side of this bootstrap 4 modal?

Take a look at this fiddle: https://jsfiddle.net/apo5u0mt/ Below is the code snippet: HTML <div class="modal" id="galleryModal"> <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl"> <div class="modal-con ...

htmlcssbootstrap-4bootstrap-modal

Detecting media queries for the Samsung Galaxy S3 and S4 devices

I have been working on implementing media queries to show text boxes with different styles for iPhone 5, iPhone 6, Samsung Galaxy SIII, and Samsung Galaxy S4. Initially, everything was working fine for iPhone 5 and iPhone 6, but when I switched from an i ...

angularjshtmlcss

Is there a way to center a particular flex item horizontally within its parent container?

Having a flex container with two items, I wish to align the first item to flex-start, and the second item to the center of the flex container. I am particularly concerned about maintaining align-items: center to ensure that all flex items are vertically ce ...

htmlcssflexbox

Display concealed information upon clicking

Is there a way to reveal hidden content only after clicking on the "View" link instead of hovering over it? I have tried implementing it so that the content appears on click, but it doesn't seem to be working as expected. How can I achieve this usin ...

javascriptjqueryhtmlcss

The property value entered is not valid

Attempting to apply the CSS properties to the element: url('example.png') center center 100% 100% no-repeat Encountering an error message: Invalid property value The format of the background property values should be: background: color position ...

cssbackground

Pause for a few moments prior to initializing Bootstrap and Angular 2

I am currently developing a space/gravity game using Angular 2, and I am looking to incorporate a splash screen before the main menu component is loaded. I believe that the easiest approach would be to utilize the pre-bootstrapped contents of the index.ht ...

htmlcssangulartypescript

Utilizing the "::first-letter" pseudo element selector in conjunction with the MuiButton class in Material UI - What is the process?

Is it possible to change the text case of Button text inside Material UI Button to sentence case with CSS? https://mui.com/components/buttons/ The text inside the button - ADD FRIEND should be transformed to sentence case as Add friend. I attempted to o ...

javascriptcssreactjsmaterial-ui

What are some creative ways to conceal text using CSS or JavaScript?

Looking for a solution: <div id="body" role="main"> <h1>Title</h1> <p>My site is mysite.com</p></div> I always have <div id="body" role="main">, <h1>, and <p> tags on each page. Is there a way to ...

javascripthtmlcsshide

"Transfer" the code within a Message Sending template

Although I am not well-versed in coding like many of you, I have been able to customize a free template to suit my needs. However, I am struggling with one aspect. When users submit their information on the contact form, I want their message and details to ...

htmlcss

"Ensure that the horizontal border line is properly aligned with the header div

I have a CSS-defined header with the following properties: .page-header { display: flex; flex-direction: row; justify-content: space-between; align-content: stretch; align-items: center; padding: 5px 5px 5px 20px margin-left: auto; margin-r ...

htmlcssreactjsalignment

Target specifically the onhover div element using JQuery and trigger the smooth sliding down effect with the SlideDown() function

Is it possible to create a unique JQuery slidedown() function that will only be applied to the div where the mouse is hovering? I have managed to make it work by giving each div a separate class, but when I name them all the same, it triggers the slide do ...

javascriptjquerycss

Utilize Bootstrap 4 to seamlessly switch between nav-pills for larger screens and navbar-nav for smaller screens

On larger screens, I prefer the appearance of the nav pills. However, once the collapse button appears, I would like the menu to stack and resemble the image provided instead of the pills. Do I require custom CSS to achieve this? <div id="menu" class=" ...

csstwitter-bootstrapbootstrap-4navnav-pills

How can I modify the container to prevent the Bootstrap dropdown from being clipped by overflow:hidden settings?

With bootstrap, I encountered a situation where dropdown menus are being clipped by my <div> with overflow: hidden. How can I address this issue without incurring high costs? One potential solution might be to change the container of all dropdowns wi ...

htmlcsstwitter-bootstrap

What is the best method for designing a slideshow with a background image on the body

I have been on a quest to find a simple background slideshow that fades images for the body of my website. Despite trying multiple Javascript options and CSS solutions, I have had no success. Someone suggested creating a DIV for the background, but I am ...

javascriptjqueryhtmlcss

Achieving the display of font-weight 100 for Google web fonts successful

I have been experiencing difficulties in achieving the ultra-thin display of the Lato font through Google web fonts. Despite appearing correctly on Google's website, the font weight does not change when implemented on my own page if it is below 400 (I ...

csswebfontsgoogle-webfonts

Rotating an input 90 degrees within a div for unique positioning

I used JavaScript to make an input range vertical, like so: var range_pitch = document.createElement("input"); range_pitch.setAttribute("type", "range"); range_pitch.style.webkitTransform = "rotate(90deg)"; range_pitch.style.mozTransform = "rotate(90deg)" ...

javascriptjquerycsshtml

The FormValidation plugin for Bootstrap is having issues with misplaced validation icons after changing the style

Do you think there may be an issue with the FormValidation package, or am I overlooking something? Upon testing a standard Bootstrap page, such as the "Stacked Form" example from this site, the form validates and displays icons correctly. https://i.sstat ...

csslayoutbootstrap-4formvalidation-pluginformvalidation.io

Having trouble aligning and resizing text and divs accurately

Hello, I'm having trouble centering my text within a div and fitting three divs inside my content area. Here is the code snippet: HTML <div id="content"> <div class="latest"> <p>Gentlemen, these are my latest works< ...

csshtmltextcenter

Personalizing the mat-checkbox

I'm trying to customize the checked icon in angular material mat-checkbox. Currently, it displays a white tick icon inside a colored background box, but I want to replace the tick with a cross when it is checked. After spending all day searching, I ha ...

cssangularangular-material