How do I make the image 100% on the screen?

Question

I have a website in development.

Then I want it to be on the whole screen, it’s to be a responsive site, I’m using the bootstrap... It only gets full screen if I zoom 150%: Example: https://prnt.sc/fe1fig

If I leave it normal it looks like this: Example: https://prnt.sc/fe1fn6 My screen is Full HD.

The image is 1400 x 767 in size.

The link to my code is this: https://codepen.io/sandsoncosta/pen/XRLvvW

He’s not all formatted up,

but here is the full file link: https://drive.google.com/file/d/0B28SaVWuwZ5kSlZURWlWRlljdjg/view?usp=sharing

My html and css file.

Then like I do to leave it all on the screen?

I hope you help me, thank you.

PS.: I’m studying site responsiveness, starting from the beginning, to run on desktop and mobile...

Answer 1

Try to use

background-size: cover; 

for the element in question!

Answer 2

Oh yes I understand, you’re using background.

Try this

#banner {
	width: 100%;
	height: 728px;
	position: relative;
	background-image: url(../img/banner.jpg) no-repeat;
  background-size 100% 100%;
}

So the background image will occupy 100% of the element it is part of. I saw there in the code that Section is with width 100% so this should solve your problem

Answer 3

In order for an image to be full-screen you must use the CSS properties. Try to use:

img {
  display :block;
  width : 100%;
}

Answer 4

img{
  display :block;
  width : 100%;
}

It didn’t work. I can’t solve this problem. Does it have to do with the size of the image? My screen is 1920... I’m cracking my head!

Answer 5

It’s not about the size of the image, it should fill the screen even if it lost quality. See this example :

https://codepen.io/EdySilva/pen/PmMqgV

Bootstrap may be influencing, try to use :

img{
  display:block !important;
  width:100% !important;
}

Answer 6

Do the following.

#banner {
	width: 100%;
	height: 728px;
	position: relative;
	background-image: url(../img/banner.jpg) no-repeat;
  background-size :100% 100%;
}

This will leave the image occupying 100% of width and height of the Section, ie will have the same size of the Section. Simply make Ction take over the screen.