CODEWITHSUNDEEP
htmlcss
Roman Korol
Roman Korol

Reputation: 21

CSS image dynamic resizing

I want my background image to dynamically resize when window is resized. It doesn't matter if proportions of image are changed. So the way I try to do this is to set

width: 100vw;
height: 100vh;

for img in body.

It does what I want, but image is a tag, so other tags are placed below it on layout, and I can't find a way to make image ignored by all other tags.

Also I can't find a way to do it for

body {
    background-image: url("bckg.jpg");
    //hoooooow?
}

Any suggestions?

Upvotes: 1

Views: 634

Answers (2)

dafilipaj
dafilipaj

Reputation: 1074

If you don't want image to crop but to always take 100% of height and width try following:

body {
    background: url('example.png') no-repeat fixed;
    background-size: 100% 100%;
}

Fiddle here

Upvotes: 2

Daniel
Daniel

Reputation: 2295

If you want your background image to scale according to the window size, why not use the following:

body {
    background-image: url("bckg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

So the important line is this: background-size: cover; this ensures that the background image "covers" the visible portion of the page

Upvotes: 1

Related Questions