Background Reponsivo

Question

Background Reponsivo

Navigation

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

2

I'm not sure how to make the background to stay responsive.

This is the Background.

Thisishowit'sgettingwith1024pxWidth.

I'm placing in the Background-Size 100% of Width, I would like that when the Background decreases its own height the container could also be with the same height so as not to have that white space as it is in the image.

Thank you folks.

html css layout-responsivo background

asked by anonymous 12.08.2014 / 14:31

3 answers

Create CSV file from PHP Write ListView in SQL Database using Entity Framework and C #

score 1 · Answer 1

try to do so:

.background{
  background: url(images/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

link

score 0 · Answer 2

Hello,

You could try:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

No width, height or margin.

If it does not work first, try adapting to your project by following the references below:

link
link

Hope it helps. =)

score 0 · Answer 3

If the goal is to display this image on different devices, use media queries. Here below is an example to be used for a large pro desktop and a custom sized image for the phones. In addition to displaying a more readable image the image has a lower weight for 3G internets.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        #image { 
            background-image: url(largeimage.jpg); no-repeat center center fixed; 
            background-size: cover;


        }
        @media only screen and (max-width: 320px) {
            #image { 
                background-image: url(smallimage.jpg); 
            }
        }
        </style>
    </head>
    <body>
        <div id="image"></div>
    </body>
</html>