2
I’m having doubts about how it makes the background responsive.
This is the Background.
This is how it’s getting at 1024px Wide.
I am putting in the Background-Size 100% Width, I wish that when the Background decreases its own height the container could also be the same height so as not to keep this white space as it is in the image.
Grateful staff.
1
tries 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;
}
0
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 doesn’t work first, try adapting to your project by following the references below:
I hope it helps. =)
0
If the goal is to display this image in different Vices, use media queries. Here below an example to be used a large image pro desktop and other custom made for phones. In addition to displaying a more legible image the image has a lower weight for 3G Ternets.
<!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>
Browser other questions tagged html css background responsive-layout
You are not signed in. Login or sign up in order to post.
tries to put a padding-bottom: 100% in the div that is that bg and does not set height.
– Gustavo Sales
Hello Gustavo, thank you for your attention. .
– Michael Alves