having difficulty in resizing the background image to fit the entire screen of the browser and ensuring it adapts to different screen

How can I make the background image cover the entire browser window's screen without losing its aspect ratio? Currently, it only covers a portion of the screen. Please help!

html

<div class="container">
    <h1> GAME</h1>
    <div class="color-overlay"></div>
  </div>

css

.container {
    background-size: cover;
    background: #000 url(images/group11.jpg);
    color: #fff;
     background-repeat:no-repeat;
    background-position:center;
   display: flex;
   justify-content: center;
    align-items: center;
    position: relative;
  }
.color-overlay {
 width: 100%;
 height: 100%;
 background: blue;
 opacity: .6;
 position: absolute;

}

htmlcss

Answer №1

The issue arises when you initially define background-size:cover and then proceed to define background.

If you set background (which encompasses repeat, size, position, image, etc.) after background-size, it will overwrite cover with the default settings.

You have the option to either set background-size:cover after defining background, or specify all background declarations individually (color, repeat, image, etc.), or combine them into a single line using only background.

Refer to the example below:

.container {
  background: #000 url(http://via.placeholder.com/350x150);
  /* bg size after */
  background-size: cover;
  color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height:100vh;
  
  /* OR set all separately
  background-image: url(http://via.placeholder.com/350x150);
  background-color: #000;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  */
  /* OR set all in one line 
  background: url(http://via.placeholder.com/350x150) no-repeat scroll center center / cover #000;
  */
  
}

.color-overlay {
  width: 100%;
  height: 100%;
  background: blue;
  opacity: .6;
  position: absolute;
}
<div class="container">
  <h1> GAME</h1>
  <div class="color-overlay"></div>
</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

Using JavaScript, generate ten clickable circles on the screen. Each circle should display the number of times it has been clicked in the center when interacted with

I am currently working on my JavaScript skills and would like to implement a fun project involving 10 colorful circles. While I can easily create these circles using HTML and CSS, I require assistance with the interactive functionality using JavaScript. ...

javascripthtmlcss

What could be causing this strange striping effect in the radial gradient?

What causes the striped effect in the radial gradient code provided on this website: click here to view body { background: rgba(216,215,221,1); background: -moz-radial-gradient(center, ellipse cover, rgba(enter code here216,215,221,1) 0%, rgba(0,9 ...

htmlcssgradient

Updating Gmaps iFrame URL with AJAX

I am currently attempting to update the SRC of an iFrame by using a URL obtained via AJAX from the backend database. I want the maps to change when a button is clicked. An error message displayed inside the iFrame reads, "404. That’s an error. The reque ...

phphtmljsonajax

The issue with Selenium chromedriver is that it is failing to execute the JavaScript scripts

Normally, the page loads like this: https://i.sstatic.net/GHSb4.png However, when opened with Chrome driver via Selenium in Python, it loads like this: https://i.sstatic.net/dO3Q2.png I have been trying to figure out how to execute JavaScript scripts on ...

javascriptpythonhtmlseleniumgoogle-chrome

Interested in learning how to code games using JavaScript?

Hi everyone, I'm currently exploring the world of Javascript and have been tasked with completing a game for a class project. The game involves a truck that must catch falling kiwis while only being able to move left or right. A timer is set for two m ...

javascripthtml

What is causing my Markdown HTML tags to display as plain text instead of being converted?

Within my views.py file, there is a function that converts Markdown files into HTML and passes it to another function called entry(). In the entry() function, I have a dictionary that provides an HTML template with access to the converted content. However, ...

pythonhtmldjangomarkdown

Can you confirm if the content-type of this SOAP response is valid?

While trying to utilize a third-party WebService within Visual Studio 2008, I received a unique response from the server. This particular response contained two content-type tags. HTTP/1.0 200 OK Server: SMBDK_1/2.3.0 Date: Thu, 09 Aug 2012 18:59:14 G ...

htmlwcfsoapwsdl

Utilize PHPMailer to send pre-designed email templates

Apologies for the recurring queries. I'm still struggling to find a solution to this issue. Here's my Query: I have a form that allows users to choose between predefined and custom templates. The select option determines which template is displ ...

phphtmlemailtemplatesphpmailer

Is it possible to customize the background color of the 'rows per page' selector box in Bootstrap 4 bootstrap-table?

The text is set in white on a dark grey background by default and appears just below the formatted table. Best regards, Phil Please refer to the attached image:Section of table showing rows per page selector box ...

cssbootstrap-4bootstrap-table

Attempting to invoke the get method following the post method within a Django class-based view

After creating a classview for uploading files to azure blobstorage, displaying a table of uploaded file history, and enabling display on the page, I encountered an issue. The problem arises when a file is uploaded using the POST method but not executed by ...

pythonhtmldjangoclassview

What is the best way to position multi-line text alongside an image without it wrapping below the image?

I managed to align a single line of text with an image successfully (view fiddle). <div class="profile-details-wrapper"> <img class="profile-picture" src="http://placehold.it/50x50" /> <span class="profile-details"> username &l ...

htmlcsstwitter-bootstraptwitter-bootstrap-4bootstrap-4

Creating a stylish gradient text color with Material-UI's <Typography /> component

Is there a way to apply a gradient font color to a <Typography /> component? I've attempted the following: const CustomColor = withStyles({ root: { fontColor: "-webkit-linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)", }, })(T ...

javascriptcssreactjsmaterial-uistyling

Avoid form submission when the 'enter' key is pressed in Edge, but not in Chrome or Firefox

I'm dealing with an issue in HTML where a 'details' tag is set to open and close when the user presses enter. However, on Edge browser, pressing enter on the 'details' tag actually submits the form. I've been tasked with preve ...

javascriptjqueryhtml

Scroll to a new section of the page if the specified id or name cannot be found

Currently, I am dealing with an exceptionally lengthy textual content page. <p class="parahead">401. Heading </p> <p>other html content</p> <p class="c2">some more data</P> ... <p class="parahead">402. Another hea ...

jqueryhtmlcss

Inconsistent Operation of JQuery

Is there a solution I'm missing here? The code below only works sometimes. If you load the page with a cleared cache or in incognito mode, then click on .gifslide twice before the page finishes loading - it breaks. I know this is quite specific, but p ...

jqueryhtmlliquid

Create a webpage with a React component styled using CSS that fills the entire

My struggle is to make the react root div cover the entire browser page. https://i.sstatic.net/sQlWw.png I have experimented with different CSS snippets, including the following: html, body { margin: 0; height: 100%; } .fill-height { min-heig ...

htmlcssreactjs

iOS nested elements: surrounding edges reveal parent's background

When viewing nested elements on iDevices, the parent's background is visible, creating a border or outline that is consistent across browsers (tested on Chrome and Safari). It has a similar effect to a bleed in printing. Can someone provide assistance ...

iphonecssipad

Save a specific row from the table into a basic array

Within my source code, I am generating a table with the following content... echo "<form id=\"center\" Name=\"Form2\" Method=\"Post\" Action=\"\">"; echo "<table border=\"1\">"; for ...

phphtmlarraysformssubmit

Click event from Angular Material menu is triggered twice on mobile devices

After implementing a basic angular material side menu from the demo, I noticed that all click events are being fired twice on the entire page when viewed in mobile browsers. This issue can even be replicated in the Chrome emulator. (To reproduce, enable th ...

javascriptjqueryhtmlangularjsangular-material

When the mouse is moved to the UL LI list, the border color of the Top Hover is reverted back to default

Can you assist me with this issue? I need to modify the code below so that the border color remains blue while a user selects an item from the UL LI list. Here is an image showing the current problem: https://i.sstatic.net/DS7hO.png And here is a pictu ...

htmlcssdom