picture goes off screen on a smaller resolution?

July 17, 2022

very very new to coding but I’m mostly familiar with C and i ran into a problem while trying to set up my website, I have a computer and a laptop. my site looks just fine on my computer but when i swap to my laptop i notice my border/header goes off screen. as you can see in the code I’ve tried just about anything wrapping, taking away padding…! I want it to fit the screen and not go off screen for all resolutions (exluding on phones)

Sorry again if this isnt structured very well I’m very new to all of this but I’m having alot of fun!

Code:
CSS

   #maincontainer2
                {
                 position:relative;
                 box-sizing: border-box;
                 background-repeat:no-repeat;
                 height: 100%;
                 width: 100%;
                 left:0;top:0;
                 max-width: 100%
                 max-height: 100%;
                 float:middle
                }
       body 
                {
                height: 100%;
                width: 100%;
                display: table;
                margin: auto;
                box-sizing: border-box
                margin: 0;
                }
HTML
<div id="maincontainer2" class="container-fluid">
</div>

<img src="https://media.discordapp.net/attachments/794994238038605904/998116976310353930/the_bg.png" 
object-fit: contain; position: absolute; float:absolute; box-sizing: border-box; 
width:100%; height:100%; height: auto; max-width: 100%; left:0; right:0; >

>Solution :

You have so many wrong stuff:

there is no float: middle/absolute
you are missing style attribute in img, but also you can use in CSS instead
you are missing ; in some places
you are duplicating properties such as height

Here is a minimalist version of your code

body {
  margin: 0;
}

.image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

<div id="maincontainer2" class="container-fluid">
  <img class="image" src="https://media.discordapp.net/attachments/794994238038605904/998116976310353930/the_bg.png">
</div>