What is the best way to make sure the background image adjusts to fit the browser window as it is resized?

Currently, I am working on creating a small responsive webpage that features a background image with several buttons placed on top of it. To set the background image, I included the following CSS:

.background {
    height: 100vh;
    width: 100%;
    background: url('https://images.pexels.com/photos/1563564/pexels-photo-1563564.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat;
    background-size: cover;
}

However, I encountered an issue where resizing the browser window caused the buttons to stack vertically. As a result, users could scroll down to the bottom of the page and see a large white space.

My goal is to have the background image resize along with the browser window to prevent this issue. If you have any suggestions or ideas on how to achieve this, I would appreciate the help.

UPDATE: I attempted the suggested solution but did not see any improvement. I have provided a link to a StackBlitz page that contains my code for reference:

https://stackblitz.com/edit/angular-y1avtu?file=src%2Findex.html

Feel free to resize the window on the StackBlitz page to observe the vertical stacking of buttons and the appearance of a large white space at the bottom of the webpage, which I am trying to avoid.

htmlcssangularresponsive

Answer №1

Don't forget to make the necessary changes to your CSS :)

.custom-background{
    height: 100vh;
    width: 100%;
    background: url('https://images.pexels.com/photos/1563564/pexels-photo-1563564.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

Answer №2

While I cannot guarantee this solution, one possibility is to fix the image size to match the width and height of the page, and set the background-size to cover. This way, as the user scrolls, the background will stay in place and eliminate any white space at the bottom.

Answer №3

Make sure to delete the width: 100%; from the style To view the actual results, click on the expand snippet link

.background{
     
    height: 100vh;
    
    background: url('https://images.pexels.com/photos/1563564/pexels-photo-1563564.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  background-repeat: no-repeat;
    
background-size: cover;
}
<div class='background'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</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

Add the text into a div element with a dropdown selection

I'm having trouble with the code below. My goal is to move the selected text to my chosen-locations div. Any suggestions? Thank you! <select name='available_locations' class='select-location'> <option value=&a ...

jqueryhtml

Having trouble loading NEXT JS images when the file path is stored in a variable?

I'm working with Next.js for my coding project and I have a array of images that I need to incorporate into my application. CODE1 <Image src={require("../assets/image1.png")} /> This code snippet works perfectly fine and displays the ...

cssreactjsnext.jsfrontendjsx

Perform an action in Django when a button is clicked using HTML onclick event

How to integrate HTML form on Django to perform actions using buttons? Check out the HTML code snippet below: <form name="bookappointment" class="form" method="POST> {% csrf_token %} <br> <input type ...

pythonhtmldjangodjango-rest-frameworkdjango-forms

Superceding Meta Character Encoding Statements

Have you ever wondered what happens when two older-style character encoding declarations are used in a webpage? Will the first declaration override the second, or vice versa? Or will they both be ignored and excluded from the encoding algorithm? For Ex ...

htmlencodingcharacter-encodingmeta-tagsmeta

What is the method for creating two separate columns that can scroll independently?

I am faced with a challenge involving a modal that contains two columns. My goal is to make these columns scrollable independently of each other while ensuring the scrollbar remains hidden. Thus far, I have managed to make the row scrollable with a hidden ...

csstwitter-bootstrapbootstrap-4

Display axis labels vertically next to each column in ng2-google-chart

https://i.sstatic.net/ZCdfB.png Currently working with version 4.0.0 of ng2-google-charts, I am aiming to show hAxis text next to the column. Although I attempted using slantedText and slantedTextAngle, they do not seem to be compatible within the chart. ...

angularchartsgoogle-visualizationng2-google-chart

Verifying the functionality of a custom directive in Angular 2 (Ionic 2) through unit

In my ionic application, I developed a custom directive specifically for text masking, aimed at formatting phone numbers within input fields. The core functionality of this directive revolves around utilizing ngControl to facilitate the retrieval and assig ...

javascriptangularunit-testingionic2testbed

A guide on utilizing buttons within ion list items to execute actions independently for both the button and the list item

Currently, I have a list item with a button that is displayed based on a certain condition. My issue is that when I click the button, a popup should appear, but instead, it also navigates to the next page in the background. Can someone help me figure out h ...

javascripthtmlangularjsionic-framework

Accessing the facebox feature within a dropdown menu

Looking for assistance in creating a function to open a facebox when an option from a drop down list is selected. Here is what I have so far: <select><option value="www.google.com/" id="xxx"></option></select> In the header sectio ...

javascriptjqueryhtmlfacebox

Having trouble unchecking a checkbox in reactjs?

Hey there, I've been using a checkbox on my website and for some reason, I can't seem to uncheck it. Any ideas why? const [checkBoxEmailPersonalized, setCheckBoxEmailPersonalized] = useState(false); const onEmailPersonalized = (event) =& ...

htmlreactjs

Tips for updating the main route and its components upon re-clicking in Angular

Within my application, I have a Master-Detail setup consisting of a main container component holding two nested components - master and detail. By clicking on the link http://localhost:4200/master, the master component fetches data from the server to displ ...

angularangular-route-segment

Challenges with Angular observables

Struggling to make observables work has been quite the challenge for me lately. My code now resembles a chaotic battleground rather than the organized structure it once was. The dreaded "ERROR TypeError: Cannot read property 'map' of undefined" ...

angulartypescriptobservable

Exploring [routerLink] vs routerLink: Unraveling the Distinctions

Can you explain the distinction between [routerLink] and routerLink in Angular routing? What are the advantages of each one and which should be used? Understand the difference ...

angularangular-routingangular-routerangular14

Generate a new array using a single value extracted from an existing array

I'm new to working with arrays. Before this, I used to manually code everything in HTML. My question is, can you create an array based on the values of another array? var pmmain =["aaa", "bbb", "ccc", "ddd", "eee", "fff", "ggg", "hhh", "iii", "jjj", ...

javascriptjqueryhtmlarrays

Increase the totalAmount by adding the product each time

Can someone help me understand why the totalAmount shows as 20 when I add a product? Also, why doesn't it increase when I try to increment it? Any insights would be appreciated. Thank you. ts.file productList = [ { id: 1, name: 'Louis ...

javascriptangulartypescriptcart

Executing a script on a different HTML page without the need to reload it

I'm currently working on incorporating a notification system inspired by Facebook's design. This system will feature an icon in the header that, when clicked, reveals a drop-down containing a table of sorted notifications for the user. My goal is ...

jqueryhtmlajaxfacebookperl

Acquiring inner HTML content with PHP

Looking to optimize meta tags for search and open graph. My goal is to dynamically generate the meta description tag by combining content from two specific elements in the HTML. For instance, let's say we have this snippet of code: <div class="r ...

phphtmlinnerhtml

Automatically adjust the tooltip's position if it extends beyond the width of the browser

I am looking for a way to ensure that when the tooltip width exceeds the browser's viewable area, it will automatically reposition itself so that the content can be fully viewed. It is important that the tooltip does not overlap on the referenced div ...

jquerycss

Error: Bootstrap 4 Container Size Issue

I am having an issue with the width of my footer when using a Bootstrap 4 "Container". The Container does not cover the entire bottom of the screen as expected. Even changing it to Container-Fluid does not resolve the issue. For reference, here is a JSFid ...

cssbootstrap-4

"Angular EventEmitter fails to return specified object, resulting in undefined

As I work on a school project, I've encountered a hurdle due to my lack of experience with Angular. My left-nav component includes multiple checkbox selections, and upon a user selecting one, an API call is made to retrieve all values for a specific " ...

angulartypescript