Giving div full height an width background image

[toolman]

Hi there,

I am trying to make a div have a full width and height background image, but I can’t seem to work it out.

I am using bootstrap to display columns responsively.

it seems to work when I set the row to use display: flex, but this stops bootstrap’s responsive columns.

Can anyone tell me how I can so this?

This is my CSS:

.about-image{
	background: url("assets/img/about-image.jpg") no-repeat;
	background-position: top right;
	background-size: cover;
height: 100%
width: 100%
}

Can anyone tell me how I can do this?

Thanks

[PaulOB]

@toolman

Can anyone tell me how I can do this?

Not without relevant css and html

You have a typo here anyway:

height: 100%

The semicolon is missing however height:100% is not needed and neither is the width as the background will automatically encompass the content when background-size:cover is used (assuming the element is containing its child floats properly) .

Unless you meant that you wanted a full height div that has a background image and then the question would be what does the full-height refer to? Is it the viewport or another column?

You would not use height:100% in most cases as that would limit the element to only 100% and content would spill out. height:100% also needs an unbroken chain of parent elements that also have a height applied other than auto or they all collapse to auto.

If you wanted a full height image to cover the body then you would apply it the body.

I think you will need to clarify which version of bootstrap you are using and supply a demo of the code you have so far and then indicate what you expect to happen as there are too many variables for me to give answers to every possible permutation

The main thing is that height:100% is unlikely to be what you want. You could use min-height:100vh to get a full viewport height but I don’t think that’s what you want either. I believe you may be trying to match column heights which is why you mentioned it worked with flex.