CODEWITHSUNDEEP
css
FVTheEpic
FVTheEpic

Reputation: 1

How to change the size of a picture background

I want to have an image as my background for my site, but I can't change the size of the image. is there any way I can change the size of the picture to fit my site?

P.S. this is the code i use to display my picture

body {
    background-image: url('images/lvl1.jpg');

}

Upvotes: 0

Views: 170

Answers (5)

Aleksandr Petrov
Aleksandr Petrov

Reputation: 1288

You can use the background-size property to specify the size of your background image.

Upvotes: 0

w3debugger
w3debugger

Reputation: 2102

Using background-size: cover;

The background-size CSS property specifies the size of the background images. The size of the image can be fully constrained or only partially in order to preserve its intrinsic ratio.

Here is the link for reference

html,
body {
  position: relative;
  height: 100%;
}

body {
  background-image: url(https://www.planwallpaper.com/static/images/bicycle-1280x720.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

Upvotes: 0

János Farkas
János Farkas

Reputation: 471

use background-size property:

body{
    background: url("images/lvl1.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

Upvotes: 0

Felix A J
Felix A J

Reputation: 6470

This will help to fill with the background.

body {
  background-image: url('images/lvl1.jpg');
  -webkit-background-size: cover;
     background-size: cover;
}

Upvotes: 0

Cem Şengezer
Cem Şengezer

Reputation: 213

You can do it by:

background-size: 100% 100%;

or

background-size: contain;

Upvotes: 1

Related Questions