How to make div background image responsive on mobile devices

HTML & CSS
1

Hi
I have a div with a background image set in css.
But when I resize the page there seems to be a long padding underneath the div.
you can see what I mean here:
http://leavalleyheritagealliance.org.uk/
How can I fix this?
Here is the css:


.test1{
    background: url("/dist/img/4.svg") no-repeat top center fixed;
    background-size: 100%;
    height: 100vh;
    width: 100%;
}

Thanks in advance.

2

Try this : https://css-tricks.com/perfect-full-page-background-image/

1 Like
3

Hi there abdullahseba,

try it like this, possibly…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
    background-image: url(http://leavalleyheritagealliance.org.uk/dist/img/4.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% top;
    background-attachment: fixed;
 }
</style>
</head>
<body> 
</body>
</html>

coothead

3 Likes
4

After a lot of messing around I figured that height: 100vh; was causing the issue, but with no height set the picture would not show.
So I replaced it with

 var x =  Math.round((window.innerWidth/16)*9);
document.getElementById("test1").style.height = x +"px";


window.onresize = function(event) {
  var x =  Math.round((window.innerWidth/16)*9);
document.getElementById("test1").style.height = x +"px";
};

and:


#test1{
    background: url("/dist/img/4.svg") no-repeat top center fixed;
}

Problem now is chrome ignores fixed so the image does not disappear behind the div.
Any ideas on that?

5

Well, yes I actually have two ideas. :sunglasses:

  1. Don’t use JavaScript. :unhappy:
  2. Use the method given in post #3. :winky:

coothead

3 Likes
6

That method does not work. content just sits on top

7

That is generally how it is with backgrounds.
Can you describe your desired result?

8

I have just noticed that you are using “Bootstrap”. :wonky:

if I had seen that monster just a little earlier, then I most
certainly would not have bothered with this thread at all. :unhappy:

coothead

9

Well the way it looks now on screen 16:9 is how I want it to look.
Here is another example:
https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm
I had a look at some professional ones, and they all have the at least one of these problems:

Scroll effect does not work on devices except Firefox for android.
Image is cropped when resized.

10

LOL why is that?

1 Like
11

So you want a fixed aspect ratio, not full screen?

12

No full screen.
I’m messing with the code now so not sure what it looked like I’ll keep it for 5 mins

13

Show us a make-believe screenshot of what you want the image to look like in a mobile device.

14

Then you will have to live with cropping, as screens (and browser windows) vary greatly in aspect ratio. You can’t have it both ways.

15

HTML, CSS and JavaScript Frameworks - Incompetent Nonsense

…and from about paragraph #10 for “Bootstrap” in particular. :wonky:

coothead

2 Likes
16

amm… ok :no_mouth:

17

Had to give up on it scrolling on a mobile.
So when the screen is moblie size it repalces the bacground with a image.

18

I believe there is a workaround for that, using a pseudo element with fixed position and the background applied to that.

2 Likes
19

Yes like this :slight_smile:

4 Likes
20

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.