How to extend the length of a page through CSS?


Tags: css,image

Problem :

I would like to extend the length of my page but i'm not entirely sure how. As of right now, I have a picture on the webpage. At the bottom of the picture, I want to place another one. However when I insert a new picture into the code, it overlaps the existing one due to the cascading style sheets.

.background-pic .number-1 {
background-image:   url('../resources/images/hoth4.jpg');
background-repeat:  no-repeat;
background-size:    109%;
height: 930px;
position:           fixed;
width: 100%;
background-color:   white;
z-index:            1;
}

.background-pic .number-2 {
background-image:   url('../resources/images/hoth2.jpg');
background-repeat:  no-repeat;
background-size:    109%;
height: 930px;
position:           fixed;
width: 100%;
background-color:   white;
z-index:            1;
}


Solution :

Remove position:fixed

and add

.background-pic [class^=number]{
     display:block;
     clear:both
}

    CSS Howto..

    How to push down second dropdown when open first ?

    How can i change jquery-div creation to some other method

    how to avoid overlapping of text

    How do I create a full-width bar on a web page?

    How to view CSS/HTML in GUI?

    how to apply css on only one class?

    How to add padding to the left and right side of grid in Bootstrap WITHOUT padding between grid boxes using col-sm-3

    How to replace only the text of this element with jQuery?

    CSS How to make image fluid extending only to one side of browser, aligned with centered content?

    How to create a dropdown with lu and li tags like this

    How to implement responsive, independently scrolling panes in Bootstrap 3?

    How to change css display none or block with button click

    how to change :nth element background size

    CSS exit box how to? [closed]

    How to get rid of white space between css horizontal list items? [duplicate]

    How can I make all images of different height and width the same via CSS?

    HTML CSS - How to render SQL nicely [closed]

    How do I change the last textual node child in JavaScript

    How to repeat multiple images over one element using CSS

    How can I get a Select elements Options to “right-width” but leave the width of the Select itself unchanged?

    how to decrease space between headings?

    CSS - How to make rectangle with pointed sides? [duplicate]

    How can i select the div from CSS?

    How could I join a smaller and a bigger div with rounded edges?

    How do I automatically resize an image for a mobile site?

    Vim: How would I recursively run “:sort” for everything between curly braces?

    How to style
    to have multiple colors?

    How to dynamically set and modify CSS in JavaScript?

    How do I achieve my bootstrap nav design?

    how to enlarge an element and show text on clicking