My landing page design is currently boxed, but I want to set a background image that spans the entire width of the page. I chose to set the background image to the body element to achieve this effect.
body {
background-image: url("bg-image.png") !important;
background-repeat: no-repeat;
background-attachment: fixed;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-origin: padding-box;
background-position: 0 0;
background-size: 100%;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
z-index: -1;
background-position: 0% 70%;
}
Currently, the image is appearing at 70% of my screen size. How can I ensure that it always appears at position 70% of my entire landing page?
Setting it up with background-position: 0px 1200px; does not work and is not responsive. How can I achieve the desired positioning without losing responsiveness?