background image does not look complete -

Question

background image does not look complete -

Navigation

#1 by (1 votes)

0

Hi, I have the following problem, I have the following page:

as you see the problem is that you can not see the image completely (the title of the page where pink ranch says susana comment), the image is correctly adpata to different screens but my problem is that it is not See complete someone you know why?

this is my code:

<!DOCTYPE html>
<html>
<head>
	<title>Rosa Susana</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,700i" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/estilos.css">
	<link rel="icon" type="image/png" href="Logo para web.svg" />
  <style type="text/css">
  
body{
background: url(inicio.png) no-repeat center center fixed ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}











#header {
  height: 100%;
  width: 100%;
}
  </style>
</head>
<body>

<!--
<div class="container">
    <a href="inicio.html">
<img class="img-responsive" src="inicio.jpg" >

</div>-->

<div id="header" onclick="location.href='inicio.html'"></div>



<a href="https://www.facebook.com/Rancho-Rosa-Susana-193044927891849/
" class="btn btn-primary">
    <span class="fa fa-facebook"></span> Facebook
  </a><br><br>
   <a style="background:red;border:none;" href="https://www.youtube.com/channel/UCB41yyo-wrldZQchu_tM3dA" class="btn btn-primary">
    <span class="fa fa-youtube"></span>  Youtube
  </a><br>
</a>


</body>
</html>

css imagen

asked by simon 01.07.2017 в 21:36

source

1 answer

take a pdf of an xml that is a string Use array in VC2008

score 1 · Accepted Answer

The problem usually lies in the height of the image, since although you adapt the width of your image to the window, it will try to preserve the proportion "If it is a rectangle, it will try to remain as a rectangle" What you can do is define that it does not respect that relationship and that it adapts both to the width and to the height, however you should bear in mind that the narrower the window is, the more flattened it will appear since the height is maintained, something like this:

html {
  width:100%;
  height:100%;
}
body{
  width:100%;
  background-image: url(http://www.365imagenesbonitas.com/wp-content/uploads/2016/05/fondos-halloween-mano.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

I hope you find it useful.