0

I want to extend my div through the whole page of the web browser. When I scroll to the right side of the page. The div style cuts off.

.div3{
        background-image: url('images.jpeg');
        background-repeat: repeat-x;
        background-attachment: scroll;
    }

cuurent output

The expected output should show the web page with div style extending to the right.

expected output

Afroboy23
  • 31
  • 9
  • Your question is really vague. Can you provide more information, or maybe add a screenshot of your desired behaviour? And add more code snippets? – hesyar Apr 25 '19 at 19:16
  • 1
    It would be best to provide enough HTML and CSS to allow others to reproduce the situation. You can use [Stack Snippets](https://meta.stackoverflow.com/q/358992/215552) to do so. You should also consider searching for existing questions. A quick search on "css background not extending to entire width" brought [How do I stretch a background image to cover the entire HTML element?](https://stackoverflow.com/q/235855/215552) – Heretic Monkey Apr 25 '19 at 19:16
  • @hesyar I have added the image of expected output. – Afroboy23 Apr 25 '19 at 19:24
  • Yes but to be honest to illustration does not help for understanding your problem. – hesyar Apr 25 '19 at 19:35

1 Answers1

0

You could try to put the div behind and in a fixed position:

-The other things in a z-index greater than the div's (ex. div in z-index: 0 and other z-index: 1).

-Then put the div with these css styles:

position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;

Since you said the whole page I used vw and vh to specify the size, but if it's not the whole page you would have to change a bunch of things:

-Like put the size in % of the parent div.

-The position different (the div position, because I think that fixed works as absolute but that doesn't move with scrolls).