make an image in background page html in a responsive way-CodePudding

I want to put an image in background of the page and in of course it must be in a responsive way this is the html code :

   <div > title </div>
<img src="/assets/img/image1.jpeg"  />

and the css :

img
{
background-size: cover;
background-repeat:no-repeat;

}

CodePudding user response：

Marshall's solution is better if you want the image to cover the whole viewing area.

Although it would not be in the background, using your <img/> tag it would be like this:

img {
  width: 100%;
  height: 100%;
}

<div> title </div>
<img src="https://picsum.photos/200/300" />

CodePudding user response：

You want to set the background-image propierty of the body

body {
  background-image: url("/assets/img/image1.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
}

CodePudding user response：

A background image for the page would be best placed on the body element — here's a simple example which uses the background shorthand:

body {
  background: url('../relative/path/to/img/goes/here') no-repeat #paleblue;
}

Here, we've provided the image, an instruction that the image should not repeat (it will by default), and a 'fall-back' background colour — this is useful if, for example, the image fails to load.

There's more that can be done, here. See MDN for more details. Pay special attention to background-size, as you'll likely want to use either cover or contain depending on the image, screen size, etc. The spec for both is straightforward, but you can very easily swap one for another and back again in your code and see the (often obvious) effect each has.

CodePudding user response：

you can add background property to which container you want the background img is, if its body or any other container, also add to your img width and height property otherwise it will go beyond the container, you should add 100% if you want to cover the whole container.

  background-position:center center