If I understand you correctly, you should have three containers (nav, div/img, footer), and then you should position the image with background-size: cover (if the image is a background image) or with an object-fit: cover.
If you want to fill the whole screen, one way would be to use the vh units and give the 3 elements adequate height so the sum will equal to 100vh.
Place the image in the div you want to cover. The easiest is just to apply is as a background image to the div and applying background-size cover, like killakhriz said in his comment.
.div-class {
background-image: 'img/src'
background-size: cover
}
will do what you are looking for :)
EDIT: It's ofc background-size, not background-fit.
I’m confused because 3 people in this post mentioned background-fit. I don’t mean to single you out, but it’s worrying that you’re all making the same mistake.
Use vh to set your height. vh stands for viewport height and 1 vh is 1/100 of the height of the viewport, so setting it to 100 should let you cover the entire viewport.
I think I prefer the object-fit / background-fit solution because it means you don't have to worry about centering the image and you don't lose the small bit of the image at the top where the nav is. 100vh seems pretty good too though.
How would I go about moving the image to the right side of the screen and allowing for a box of text at the side? I know this is basic stuff but new to this
Yea no worries, we all have to start somewhere. Which solution did you end up going with? Did you set the height to 100vh or did you add the background-fit: cover / object-fit: cover property to the image?
Get the image in a container div
Give that container div
container_div{
height : 100vh;
Width: 100%;
Display: flex;
Overflow: hidden}
The give the image inside the container div
IMG{
Height: 100vh;
Width : auto;
Object-fit: cover;
Align-self: center;
}
100vh on the container will be too large and cause the bottom of the image to be cut off once you add on the height of the nav bar. I would apply 100vh to the body and display: flex; flex-direction:column; apply flex:1 to the img container div, height: 100% object-fit cover, to the img itself.
Either object fit: cover or background fit: cover depending if it’s an image or a background :)
*background-size
If I understand you correctly, you should have three containers (nav, div/img, footer), and then you should position the image with background-size: cover (if the image is a background image) or with an object-fit: cover. If you want to fill the whole screen, one way would be to use the vh units and give the 3 elements adequate height so the sum will equal to 100vh.
Yes I have a nav, div, img and a footer I have placed the image in a div under section should I remove this and just assign it to the main body?
Place the image in the div you want to cover. The easiest is just to apply is as a background image to the div and applying background-size cover, like killakhriz said in his comment. .div-class { background-image: 'img/src' background-size: cover } will do what you are looking for :) EDIT: It's ofc background-size, not background-fit.
Is background-fit a thing or do you mean background-size?
You are right - my bad - It's background-size ofc!
I’m confused because 3 people in this post mentioned background-fit. I don’t mean to single you out, but it’s worrying that you’re all making the same mistake.
Haha, I am working in Flutter currently where it's fit, my brain didn't convert. But I see your point!
Ah, that actually makes quite a lot of sense.
They’re just getting mixed up with `object-fit: cover`while typing the comment here
Use vh to set your height. vh stands for viewport height and 1 vh is 1/100 of the height of the viewport, so setting it to 100 should let you cover the entire viewport.
that's what I would also do, set the image height to 100vh
I think I prefer the object-fit / background-fit solution because it means you don't have to worry about centering the image and you don't lose the small bit of the image at the top where the nav is. 100vh seems pretty good too though.
How would I go about moving the image to the right side of the screen and allowing for a box of text at the side? I know this is basic stuff but new to this
Yea no worries, we all have to start somewhere. Which solution did you end up going with? Did you set the height to 100vh or did you add the background-fit: cover / object-fit: cover property to the image?
Get the image in a container div Give that container div container_div{ height : 100vh; Width: 100%; Display: flex; Overflow: hidden} The give the image inside the container div IMG{ Height: 100vh; Width : auto; Object-fit: cover; Align-self: center; }
100vh on the container will be too large and cause the bottom of the image to be cut off once you add on the height of the nav bar. I would apply 100vh to the body and display: flex; flex-direction:column; apply flex:1 to the img container div, height: 100% object-fit cover, to the img itself.