0

I'm new to using angular but do have practice with HTML, JS & CSS. I'm trying to get a background image to fill the width of the page, I then want to be able to scroll to be able to see the rest of the image. (The image is higher than wider).

I've set the background image under the HTML tag in the global stylesheet style.css and it appears and fills the width exactly how it should, but I cannot work out how to be able to scroll the see the rest of the image.

This is what is in the style.css:

html { 
    background-image: url("app/Images/Background.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: absolute;
    margin: 0;
}

I tried adding overflow: scroll but this just added a scroll bar to the side of the page but did not let me scroll.

What do I need to add to be able to get the age to scroll to see the whole background image?

Tushar
  • 1,948
  • 1
  • 13
  • 32
JackU
  • 1,406
  • 3
  • 15
  • 43
  • 2
    The problem is that background-image has no effect on the size of the element (html in this case), so it will just show the portion of image that happens to be visible (because of the content inside html). You either have to set a `height` on `html`, or move the image into a `` tag, so the layout can know how big the image is and act accordingly. – elveti Apr 30 '19 at 12:26

3 Answers3

0

you can use a custom height ... but you must use img tag

height : 1000px;

eslam Akrm
  • 9
  • 7
0

Ok so after I while I got something to work but it is ugly!

Have an id on the html element and I added javascript.

function getWidthAndHeight(){
    var screenWidth = document.getElementById("html").offsetWidth;
    var procent = screenWidth/this.width;
    document.getElementById("html").style.height = (procent * this.height) + "px";
}

function getpic(){
    var myImage = new Image(); 
    myImage.name = "app/Images/Background.png";
    myImage.onload = getWidthAndHeight;
    myImage.src = "app/Images/Background.png";
}

window.addEventListener("resize", getpic);
getpic();

And the css I used was

html{
    width:100%;
    background-image: url("app/Images/Background.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
    margin: 0;

}

Is this what you are looking for?

laserjagaren
  • 3
  • 6
0

As @elveti said, background-image has no effect on the size of the element, you might just want to create a image as a div and then you can set any width and height size you want. Have a look at this link it has the solution if you want to do it this way:

100% width background image with an 'auto' height

TheUnKnown
  • 681
  • 5
  • 29