Background image HTML background

Question

Background image HTML background

Navigation

#1 by (5 votes)
#2 by (3 votes)

2

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

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

URL of the image: link

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 imagen

asked by omaza1990 18.12.2017 в 10:23

source

2 answers

3

You can use:

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

O background-size: cover;

EDIT: This way you get what you're looking for: 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>

answered by 18.12.2017 в 10:30

query with several mysql statuses Separate and extract elements of a string with numbers and letters!

score 5 · Accepted Answer

Try to define the body in this way in the CSS

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 with the scroll of the page.

The rest of the properties are specific to each browser, not of problems or more common properties and that's why I do not explain what they do