How to make the image 100% on the screen? [closed]

Navigation
-1

I have a website in development.

Then I want it to stay on the whole screen, it's supposed to be a responsive site, I'm using the bootstrap ... It only gets full screen if I zoom 150%: Example: link

If I leave it normal it looks like this: Example: link My screen is Full HD.

The image is 1400 x 767 in size.

The link to my code is this: link

It's not all very formatted,

But here is the full file link: link

My file in html and css.

So what do I do to keep him on the whole screen?

I hope you will help me, thank you.

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

    
asked by anonymous 31.05.2017 / 04:48

6 answers

1

Oh yes, I understand, you are 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 that it is part of. I saw there in the code that section is 100% width , so this should solve your problem

    
31.05.2017 / 11:45
2

Try using 

background-size: cover;

for the element in question!

    
31.05.2017 / 05:45
0

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

It did not work. I can not solve this problem. Does it have to do with the size of the image? My screen is 1920 ... I'm breaking my head!

    
31.05.2017 / 05:12
0

It's not about the size of the image, it should not fill the screen even if it lost quality. Here's an example:

link

The bootstrap may be influencing, try using: 

img{
  display:block !important;
  width:100% !important;
}
    
31.05.2017 / 05:25
0

For an image to be full-screen you must use CSS properties. Try to use: 

img {
  display :block;
  width : 100%;
}
    
31.05.2017 / 05:03
0

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% width and height of the section, ie it will be the same size as the section. This is enough to make the section take up the screen.

    
31.05.2017 / 11:53
Get specific item from a fetchAll in PHP How to use group by in LAMBDA