How to make div background image responsive on mobile devices

css3

#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/


#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


#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


#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?


#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


#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.


#19

Yes like this :slight_smile:


closed #20

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