Background image is not rendering as per window size

HTML & CSS
1

I am using full background Image in my div, but while window resize it is not resizing properly from left and right, I do not want to use position:fixed because it is creating Issue for me.
kindly help how i can fix this Issue, image should resize perfectly as per window size (resize).

<div class="loginbg"></div>

**css:**
background: url("../../images/TalexAuthbg3.jpg") no-repeat center top;
    z-index: 0;
    background-size: cover;
    height:100vh;
    background-position:100%;

I really appreciate for your early reply.

Thanks.

2

image

try that i think i understand what you are looking for?

3

This looks like the problem, you first set the position to center, then override it with this.

1 Like
4

You do not say what the issue is exactly and what you expect to happen. the code you presented will do what you told it but that may not be what you wanted :slight_smile:

If you want a viewport sized image that is fixed in position then I would use this method.

body { background:transparent; }
body:after {
	content:"";
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:-1;
	display:block;
	background:url(http://www.pmob.co.uk/mobile/images/a1.jpg) no-repeat 50% 50%;
	background-size:cover;
}

Mobile devices do not play nice with background-size:cover and images with background-attachment:fixed and stretch the image to the whole document and not the viewport. The method I suggest solves this problem.

Of course you may have wanted something completely different as you do not say in detail what you require :slight_smile:

5 
<div class="row">
      <div class="container-fluid">
           <div class="col-md-3"></div>
           <div class="col-md-9">
                      
            </div>
        </div>
</div>

In “col-md-9” I need full background image, which should be responsive.

I hope you understand my issue.

Thanks

6

i copied your CSS and its working for me. In your HTML you might have a margin, padding affecting it somewhere

7

Not at all :slight_smile:

That looks like bootstrap code and is incorrectly formed anyway as you can’t have a container class as a direct child of a row. Only column classes can be direct children.

Please put up a fully working codepen so we can fix properly. I’m assuming this is bootstrap 4 but I don’t see how you expect a 9 column element to fill the screen anyway. Or did you mean you only want the image to fill the div it is placed in?

As I said above your goal is unclear and we could be guessing all day.

2 Likes
8

Like this::slight_smile:

Now explain what’s wrong and what needs doing. I corrected your errors but I still don’t know what you expect?

2 Likes
9

Thanks Paul - resolved the issue my there was some other issues in the page - Issue has bee resolved, its working fine for me… thanks a ton for your time.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.