Responsive background image

HTML & CSS
1

Hey guys,

I want to make this background image responsive , want to be full width and always 65vh height.

Don’t know what I am doing wrong.

Here is code

HTML:
<div class="wrapper">
<div class="bg"></div>
</div>

CSS:

.wrapper {

    margin: 0px 90px;

    height: 65vh;

}

.bg {

    max-width: 100%;

    height: 100%;

    background-image: url(/img/young-friends-having-fun-drinking-red-wine-on-balc-HV48NHB\ 1.png);

    background-size: cover;

}

Don’t know why my html code won’t show up,anyway I have just parent div wrapper and child div bg

2

The code does exactly what I would expect it to.
What is is not doing that you would like it to?
With 90px side margins on the container, it is never going to be full width.
Also there is probably no need for the extra .bg container.
Is this something like you intended?

3

No,that doesn’t work. I dont want to position it on center I want whole image to shrink as I shrink browser.

4

The centre positioning can be removed.

It does shrink with the browser, though adhering to the other parameters you specified, as in 65vh.
I did make the 65vh a min-height to allow for content overflow on narrow screens. Or would you prefer content to spill out of the background? Is there any content?
You will need to describe very precisely how you intend this to work.

This is another variation, but another stab in the dark as to what you want:-

1 Like
5

Try shrink it from side

6

But with the height fixed at 65vh it can’t shrink without the viewport height reducing.

7

Yea but I want on all screen sizes to be 65vh

8

That is exactly what you have.

1 Like
10

You can’t have it both ways. :slight_smile:

The example Sam gave you is the only way to fill the width of the screen and to fill the 65vh fixed height.

If you want the image to scale uniformly and maintain its aspect ratio without cropping then it could not possibly fill the area described. The width and height would need to change uniformly in order to keep the aspect ratio (much the same as that link you just deleted :)).

If the height is fixed at 65vh then you can only cover the area using background-size:cover (which covers the area by increasing width and height of the image until the area is covered and then cropping the oversized part of the image).

If you want the whole image displayed then you need to create a relationship between width and height in order for that to happen (such as using the padding hack or the new css aspect ratio property).

11

https://ibb.co/SXjhJ2z

Something like this,my English is bad so i can’t explain it well sorry

12

The image shown in the link is not too dissimilar to what I did.
In that case the aspect ratio of the image area is not fixed, so there will be cropping at different sizes.
It may be you don’t like how the cropping frames the subject. Altering the background positioning can help with that.
If you need more precise control of the image framing for art direction, it is possible to use media queries to display different versions of the image, cropped and sized differently, to different size/aspect displays.

3 Likes
13

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