Home / Questions / 125496
Accepted
omaza1990
Asked: 2020-12-19 01:23:25 +0800 CST 2020-12-19 01:23:25 +0800 CST

Background HTML background image

  • 772

I have a background image for my web page called "fondo_campo1.jpg", the problem I have is when displaying the image in full size.

The image is repeated if the size is not greater than the size of the screen resolution. And if I put the property: background-repeat:no-repeat; the missing part is blank.

Image URL: https://previews.123rf.com/images/basketman23/basketman231110/basketman23111000294/11071349-house-in-green-field-landscape-with-blue-sky-File-Photo .jpg

What should I do?

body{
  background-image: url("https://andro4all.com/files/2017/07/fondos-miui-9-700x618.jpg");
}
<!DOCTYPE html>
    <html lang="es">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    		<title>Reservar</title>
    		<link rel="stylesheet" href="css/estilos_reservar.css">
    	</head>
    	
    	<body>
    		//...
    	</body>
    </html>

html

2 Answers

  1. Best Answer

    Try to define the body in the CSS in this way

    body {font-family: 'Tinos', serif;

background-image: url("https://andro4all.com/files/2017/07/fondos-miui-9-700x618.jpg");
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}

    background-attachment makes the background image not go away with the scroll of the page.

    The rest of the properties are specific to each browser, which does not cause problems or more common properties and that is why I will not explain what they do

    • 4

  2. You can use:

    background-repeat: no-repeat;
background-size: 100%;
background-position: center;

    EITHERbackground-size: cover;

    EDIT: This way you get what you want: background-size: 100% 100%;

    div {
height: 100px;
width: 400px;
background-image: url("https://previews.123rf.com/images/basketman23/basketman231110/basketman23111000294/11071349-casa-en-el-paisaje-de-campo-verde-con-cielo-azul-Foto-de-archivo.jpg");
}

.imagen{
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center center;
}
    <div class="imagen">
</div>

    • 2