I am currently working on a table view in my Angular application I want to make a sticky header to provide better user experience. To achieve that in Chrome and Mozilla I used the following CSS code:
div.sticky-table-head {
overflow-y: auto;
overflow-x: auto;
height: 100%;
width: 100%;
}
.scroll{
margin-left: auto;
margin-right: auto;
}
.scroll th {
position: sticky;
top: 0;
background: lightblue;
}
.scroll td {
text-align: center;
padding: 5px;
background: lightgreen;
}
HTML:
<div>
<table class="scroll">
<thead>
<th>
<strong>ID</strong>
</th>
<th>
Column 1
</th>
<th>
Longer column 2
</th>
<th>
Column 3 that is longer
</th>
</thead>
<tbody>
<tr>
<td>ID</td>
<td>Data</td>
<td>DataDataDataData</td>
<td>DataDataDataDataDataDataDataData</td>
</tr>
...
</tbody>
</table>
</div>
I need to achieve the same effect on IE 11 without using any scripts or jQuery, only Angular mechanichs. Pure CSS and HTML would be the best.
Here is JSFiddle presenting current solution: https://jsfiddle.net/bn5L1fhm/
Is there any way that I can solve my problem without changing too much of my code?
IE doesn't support position: sticky and as far as I know, there is no standard way to achieve this with only CSS. You need script to achieve this in IE 11. We can only use position: fixed and listen for the scroll event of the page and use JavaScript to change the value of the position and top properties according to the current position of the viewport. The code used is like below:
var menu = document.querySelector('.menu');
var menuPosition = menu.getBoundingClientRect();
var placeholder = document.createElement('div');
placeholder.style.width = menuPosition.width + 'px';
placeholder.style.height = menuPosition.height + 'px';
var isAdded = false;
window.addEventListener('scroll', function() {
if (window.pageYOffset >= menuPosition.top && !isAdded) {
menu.classList.add('sticky');
menu.parentNode.insertBefore(placeholder, menu);
isAdded = true;
} else if (window.pageYOffset < menuPosition.top && isAdded) {
menu.classList.remove('sticky');
menu.parentNode.removeChild(placeholder);
isAdded = false;
}
});
.header {
height: 50px;
background-color: #ddcbaf;
text-align: center;
padding-top: 20px;
}
.menu {
margin: 0;
padding: 0;
width: 100%;
background-color: #BFFFF3;
text-align: center;
}
.sticky {
top: 0;
position: fixed;
}
.container {
padding: 0 20px;
color: #989898;
}
<div class="header">
Title
</div>
<div class="menu">Home</div>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet
hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet,
porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra
tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor
elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis
vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at
metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet
hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet,
porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra
tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor
elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis
vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at
metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet
hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet,
porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra
tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor
elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis
vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at
metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet
hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet,
porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra
tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor
elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis
vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at
metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet
hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet,
porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra
tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor
elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis
vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at
metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet
hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet,
porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra
tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor
elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis
vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at
metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
</div>
And the closest approach with your situation I found is the solutin in this answer, you could also refer to it.
Related
I'm trying to implement something similar to the website d-esk.net, where there is a viewport window that is kept in place while you scroll, allowing the scrolled content to go below said window. The contents of the site are kept within the borders of this window. What would be the best way to go about this?
I tried messing around with [grid-col] { border: 1px solid black; } and [grid-row] { border: 1px solid black; } but I haven't had any luck.
I'm a beginner to html and CSS so any help is appreciated, resources for research would be welcome.
Thanks so much!
The frame has a position fixed:
html, body {
width: 100%;
}
body {
text-align: center;
}
.frame {
height: 80%;
width: 70%;
border: 1px solid black;
position: fixed;
top: 10%;
left: 15%;
}
.container {
width: 70%;
margin: 0 auto;
padding: 20px;
text-align: justify;
box-sizing: border-box;
}
<div class="frame"></div>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis augue a nibh accumsan aliquam. Suspendisse gravida leo arcu, sed interdum turpis venenatis eget. In mattis, magna ut congue pretium, turpis neque faucibus sapien, consectetur dapibus turpis erat in mi. Mauris vestibulum non felis eget pretium. Donec imperdiet dapibus fringilla. Sed congue euismod ultricies. Sed malesuada, enim sed lacinia vehicula, arcu elit tempor nulla, id hendrerit magna elit vel nibh. Sed suscipit mi id enim suscipit dictum id vel turpis. Nulla sapien neque, posuere sit amet egestas sed, ornare condimentum ipsum. Nulla molestie placerat quam, porttitor vestibulum ipsum vestibulum sed. Proin in porttitor mauris. Nunc a placerat felis. Vivamus laoreet viverra purus sed finibus. Nulla facilisi. Sed varius diam erat, eget pharetra orci laoreet vitae. </p>
<p>Cras dignissim elit et lacus pellentesque semper. Quisque in odio convallis, scelerisque turpis ac, gravida justo. Pellentesque nec ex tristique, pretium neque ut, iaculis orci. Phasellus velit tortor, ullamcorper ac massa id, euismod ultricies metus. Sed a ultricies mauris. Nulla facilisi. Maecenas posuere augue lacus, ut accumsan mi placerat a. Ut vel nibh sed nunc tincidunt feugiat. Sed auctor urna metus, luctus elementum ipsum condimentum vitae. Donec pretium viverra auctor. Quisque commodo finibus molestie. Nulla vel congue nisi, vel commodo ipsum. Aliquam vel dui non eros consectetur elementum non ut elit. Curabitur auctor ipsum a mi tincidunt, in commodo erat convallis. </p>
<p>Duis vestibulum est ut libero iaculis bibendum. In est turpis, iaculis eget venenatis in, convallis vitae turpis. Curabitur in urna sollicitudin, porttitor metus a, vulputate turpis. Praesent facilisis at risus id tempus. Suspendisse efficitur maximus ex, ut aliquet sem convallis ac. Phasellus mollis, metus at rutrum ullamcorper, massa nunc suscipit enim, quis sodales libero nibh varius leo. Mauris venenatis lorem diam, vitae scelerisque magna varius nec. Donec rutrum enim at mi laoreet, et vulputate mi lobortis. Phasellus ac dui at lacus tincidunt bibendum. Donec et metus sed lacus pellentesque fermentum non id sapien. Fusce vulputate, odio eu ullamcorper convallis, quam est dictum libero, a convallis metus orci a arcu. Cras pharetra ipsum dignissim odio elementum, sed pellentesque diam condimentum. Aenean et ligula lectus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis augue a nibh accumsan aliquam. Suspendisse gravida leo arcu, sed interdum turpis venenatis eget. In mattis, magna ut congue pretium, turpis neque faucibus sapien, consectetur dapibus turpis erat in mi. Mauris vestibulum non felis eget pretium. Donec imperdiet dapibus fringilla. Sed congue euismod ultricies. Sed malesuada, enim sed lacinia vehicula, arcu elit tempor nulla, id hendrerit magna elit vel nibh. Sed suscipit mi id enim suscipit dictum id vel turpis. Nulla sapien neque, posuere sit amet egestas sed, ornare condimentum ipsum. Nulla molestie placerat quam, porttitor vestibulum ipsum vestibulum sed. Proin in porttitor mauris. Nunc a placerat felis. Vivamus laoreet viverra purus sed finibus. Nulla facilisi. Sed varius diam erat, eget pharetra orci laoreet vitae. </p>
<p>Cras dignissim elit et lacus pellentesque semper. Quisque in odio convallis, scelerisque turpis ac, gravida justo. Pellentesque nec ex tristique, pretium neque ut, iaculis orci. Phasellus velit tortor, ullamcorper ac massa id, euismod ultricies metus. Sed a ultricies mauris. Nulla facilisi. Maecenas posuere augue lacus, ut accumsan mi placerat a. Ut vel nibh sed nunc tincidunt feugiat. Sed auctor urna metus, luctus elementum ipsum condimentum vitae. Donec pretium viverra auctor. Quisque commodo finibus molestie. Nulla vel congue nisi, vel commodo ipsum. Aliquam vel dui non eros consectetur elementum non ut elit. Curabitur auctor ipsum a mi tincidunt, in commodo erat convallis. </p>
<p>Duis vestibulum est ut libero iaculis bibendum. In est turpis, iaculis eget venenatis in, convallis vitae turpis. Curabitur in urna sollicitudin, porttitor metus a, vulputate turpis. Praesent facilisis at risus id tempus. Suspendisse efficitur maximus ex, ut aliquet sem convallis ac. Phasellus mollis, metus at rutrum ullamcorper, massa nunc suscipit enim, quis sodales libero nibh varius leo. Mauris venenatis lorem diam, vitae scelerisque magna varius nec. Donec rutrum enim at mi laoreet, et vulputate mi lobortis. Phasellus ac dui at lacus tincidunt bibendum. Donec et metus sed lacus pellentesque fermentum non id sapien. Fusce vulputate, odio eu ullamcorper convallis, quam est dictum libero, a convallis metus orci a arcu. Cras pharetra ipsum dignissim odio elementum, sed pellentesque diam condimentum. Aenean et ligula lectus. </p>
</div>
I have string which 10558 characters long contains HTML Markup like:
<html>
<body>
.......
.......
.......
</body>
</html>
I am fetching that using AJAX call.
What I want is, to show that HTML markup in a element on MVC page,
I tried with 200 characters string which works fine but when it comes to 10558 characters then the window gets hanged.
What is the best way to show the large HTML markup in div?
(You said you're getting the HTML from an AJAX call - as opposed to rendering it server-side using Razor).
If you want to show the markup so that human users can "see" the HTML syntax, then set .textContent:
var htmlFromAjax = ...
var e = document.createElement("pre");
e.textContent = htmlFromAjax;
document.body.appendChild( e );
If you actually want to render the HTML as HTML inside the document, then using innerHTML is acceptable for this task - assuming you fully-trust the source of the AJAX response not to return malicious HTML that might contain scripts (and regardless, you should set a Content-Security-Policy on your document so browsers won't execute any added scripts anyway):
var htmlFromAjax = ...
var div = document.createElement("div");
e.innerHTML = htmlFromAjax;
document.body.appendChild( e );
This is 10K - nothing special
If you want to see the markup, replace all < with <
<div id="Inner">
<h1>Lorem Ipsum</h1>
<h4>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h4>
<h5>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</h5>
<hr>
<div id="Content">
<div class="boxed">
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod nulla sit amet feugiat facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis felis magna, faucibus non blandit id, luctus quis ante. Ut posuere felis neque,
ut semper turpis rhoncus et. Vivamus convallis erat sed nisl dignissim posuere. Morbi hendrerit mattis quam at scelerisque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer congue ligula nec arcu
venenatis consectetur. Suspendisse id quam finibus, semper lorem sit amet, elementum augue. Praesent facilisis volutpat nisi, at vehicula arcu imperdiet ut. Cras viverra sit amet nulla ut porta. Suspendisse tempus accumsan ligula quis gravida.
</p>
<p>
Proin non faucibus ligula. Donec aliquam dapibus tellus, eget feugiat eros laoreet vel. Ut convallis, magna a luctus sodales, massa nisl cursus justo, eget ornare dolor purus nec ligula. In hac habitasse platea dictumst. Cras non porta dui. Vivamus at
iaculis eros. Integer vestibulum risus et nisi congue, eu auctor diam consectetur. Duis hendrerit tristique quam quis vehicula.
</p>
<p>
Nulla placerat scelerisque tellus, eget tempor purus vehicula eget. Nunc dictum ipsum a laoreet fermentum. Sed id nulla ut sapien tincidunt faucibus. Sed pretium placerat lorem vitae pharetra. Curabitur libero est, euismod molestie est sit amet, dapibus
accumsan libero. Aliquam eget facilisis ante. Fusce et nibh at nisl semper egestas ut at augue. Sed quam augue, tristique et rutrum ut, consectetur sed dolor. In ultricies odio eget erat pharetra vestibulum. Donec blandit, tortor eget molestie
sollicitudin, odio quam feugiat arcu, sed ullamcorper purus felis et felis. Nullam mattis consectetur orci, egestas feugiat orci tristique eu. Nunc convallis felis id ex ornare, sed vestibulum mi tempor. Donec sodales eros sit amet nibh tempus
tristique.
</p>
<p>
Morbi non sapien nibh. Curabitur vel velit eget lectus consectetur imperdiet. Proin suscipit nulla mauris, vel mattis sem porttitor quis. Ut sit amet convallis arcu, non eleifend felis. Phasellus porta scelerisque lacus, vel consectetur nunc convallis
eget. Pellentesque pellentesque lobortis nisl et porta. Aenean fermentum et enim ac volutpat. Suspendisse aliquet, mi ut ullamcorper elementum, orci ligula vehicula lacus, lobortis lacinia lacus mi ut augue. Aliquam varius nec sapien fermentum
sollicitudin. Aliquam auctor odio et est ultricies bibendum in vel elit.
</p>
<p>
Phasellus a consequat lectus. Aenean nisi eros, fringilla id libero at, elementum rhoncus magna. Donec ullamcorper blandit nunc non dapibus. Aenean ornare commodo lorem at convallis. Nam eros eros, volutpat non scelerisque eu, blandit ac elit. Nulla facilisi.
Curabitur id dignissim elit, ultricies vulputate risus.
</p>
<p>
Nunc ac orci a elit rutrum semper. Vestibulum in commodo erat. Nam iaculis congue euismod. Phasellus laoreet nibh non mauris condimentum vulputate. Donec eget diam porta, eleifend leo vitae, pellentesque turpis. Quisque suscipit dictum nibh pellentesque
sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Integer neque felis, dictum eget neque eget, rutrum vestibulum sapien. Sed erat elit, convallis in sem et, efficitur cursus lacus. Etiam tempor leo sapien, eu placerat arcu lobortis ac. Donec dapibus ullamcorper lectus ac facilisis. Vestibulum facilisis,
odio ac mollis sollicitudin, nibh massa pharetra odio, vitae pharetra metus nibh quis urna. Nulla nunc risus, dictum id placerat quis, accumsan feugiat augue. Aliquam quis efficitur tortor. Quisque varius felis eros, id consectetur enim porta
quis.
</p>
<p>
Nam id purus vitae nulla placerat commodo. Cras faucibus vehicula lectus ac pharetra. Aenean id elit ut risus ultrices ullamcorper sit amet convallis dui. Donec facilisis, leo quis ultricies fermentum, massa urna sagittis turpis, non tempus erat diam
eget enim. Morbi mauris leo, pulvinar eu aliquam eget, lacinia sit amet mauris. Donec blandit mollis nunc nec maximus. Donec at lacinia ligula, a euismod ex. Nunc accumsan venenatis ipsum id sodales. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Pellentesque eu viverra urna. Praesent ullamcorper aliquam lacus ac vestibulum. Donec efficitur efficitur purus, id venenatis nisl laoreet eu. Ut elit urna, faucibus in elit ac, scelerisque aliquam augue. Etiam blandit magna
ut lectus porta feugiat nec pharetra arcu. Fusce massa turpis, eleifend volutpat erat sed, iaculis interdum nisl. Morbi lobortis tincidunt ex, id elementum nulla sollicitudin nec.
</p>
<p>
Praesent interdum risus ligula, sed volutpat lacus aliquam sit amet. Quisque in dapibus augue. Maecenas ultricies, ipsum sit amet congue suscipit, neque mi vehicula mi, et auctor sapien diam vitae purus. Proin vitae tincidunt odio, at placerat tellus.
Aenean fermentum libero vel nulla convallis egestas. Suspendisse porttitor orci ex, quis dapibus nibh accumsan sit amet. Curabitur imperdiet nec odio a feugiat. Suspendisse dui risus, dapibus id arcu vitae, varius hendrerit ipsum. Quisque vestibulum
imperdiet venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis laoreet sapien vel lacus molestie tempus. Phasellus eget feugiat tellus. Etiam tristique neque a aliquam commodo.
</p>
<p>
Quisque ut velit laoreet, gravida dolor eget, congue risus. Vestibulum eget tortor at nisi blandit malesuada. Suspendisse mollis nunc ipsum, non fringilla lacus accumsan eu. Nullam vehicula mauris augue, non imperdiet lacus vestibulum a. Phasellus lacinia
scelerisque nulla eu tempus. Cras varius augue turpis, sed hendrerit enim dignissim eget. Morbi elementum ante vel odio rhoncus molestie.
</p>
<p>
Suspendisse sem metus, vulputate non justo eget, consectetur egestas enim. Aliquam erat volutpat. Maecenas ac pretium lectus, non porttitor est. Duis quis suscipit arcu. Ut eget volutpat metus. Vivamus eget turpis aliquam, luctus est vitae, porttitor
arcu. Nunc quis turpis id dui hendrerit convallis. Sed dictum pharetra est, eget malesuada ex vestibulum vel. Donec sit amet lacus a odio lobortis pretium sed ac ex. Suspendisse a scelerisque nisi, in convallis nibh. Ut ullamcorper, quam et
aliquet dictum, dolor urna auctor metus, in varius odio urna in lorem. Pellentesque in felis sollicitudin, fringilla libero non, feugiat magna.
</p>
<p>
Morbi consectetur ultricies nisl, ut commodo nunc. Vestibulum ultrices efficitur justo, vulputate fermentum risus vehicula id. Fusce in quam in elit ullamcorper convallis vitae et tellus. Maecenas at sollicitudin enim, nec iaculis enim. Phasellus tempus
eros vitae mi feugiat, sit amet euismod mauris pharetra. Nam condimentum in mauris sit amet commodo. Donec lacinia, lectus eget rhoncus rutrum, augue orci gravida nibh, ut bibendum felis orci non eros. Nam hendrerit, tellus vitae tempus elementum,
nibh urna ultrices neque, vitae tempor nulla risus quis enim. Suspendisse potenti. Cras convallis quis leo ac commodo. Donec eu nisi interdum, molestie urna eget, porta arcu. Quisque varius, nunc at consectetur vehicula, velit ligula tempor
dolor, vitae vulputate odio diam id odio.
</p>
<p>
Curabitur finibus odio erat, quis semper nibh tempor ut. Vestibulum congue id nibh sed rhoncus. Nulla eleifend lacus nisi. Aliquam in magna laoreet, ornare est faucibus, egestas quam. Fusce pretium mi non metus dapibus tempor a sed orci. Ut tempor nulla
dui. Aenean commodo nunc nulla, sed accumsan libero mattis eget. Nunc finibus facilisis egestas. Praesent arcu nulla, rutrum sit amet arcu sed, sodales sodales velit. Fusce et magna justo. Aliquam tortor purus, convallis eget tempus quis, venenatis
vitae turpis. Cras volutpat fringilla leo, nec blandit erat dapibus hendrerit. Curabitur tristique dolor non bibendum hendrerit.
</p>
<p>
Integer in justo ut lectus elementum tempor eget at tellus. Nunc pretium tincidunt enim, et consectetur sapien tincidunt a. Praesent sed fermentum odio. Integer pulvinar purus tortor, finibus maximus nunc efficitur vel. Suspendisse potenti. Praesent vel
arcu ut nisi laoreet ultricies. Nunc at molestie velit, a molestie elit. Quisque efficitur sed justo id imperdiet. Etiam pulvinar gravida purus ac pellentesque. Pellentesque a diam lorem.
</p>
<p>
In hac habitasse platea dictumst. Morbi porta leo quis nibh tristique malesuada. Nullam nisl urna, viverra vulputate ultricies quis, placerat eu urna. Nunc ac sollicitudin mi. Nam gravida orci id tortor finibus, nec varius enim luctus. Etiam neque ex,
condimentum a risus sit amet, convallis feugiat dui. Quisque gravida mauris sem, sed accumsan tellus volutpat vel. Fusce pellentesque porttitor interdum. In rutrum posuere risus at semper. Donec vel dui sed ipsum euismod vulputate.
</p>
<p>
Vestibulum vehicula nisi non urna blandit, non euismod tortor sagittis. Ut tincidunt iaculis bibendum. Vestibulum vel nulla nunc. Etiam lobortis orci non facilisis pellentesque. Praesent commodo mi eu egestas cursus. Integer tincidunt hendrerit magna,
vel convallis odio rhoncus facilisis. Praesent at posuere risus. Praesent massa orci, congue vel justo porttitor, blandit ullamcorper mi. Nulla eu laoreet dolor, vitae varius elit. Vivamus sagittis nisi dolor, tincidunt convallis quam eleifend
a.
</p>
<p>
Proin ligula leo, finibus eget hendrerit iaculis, lobortis sit amet urna. Aenean eget dignissim orci. Maecenas tincidunt, quam id laoreet hendrerit, lectus eros dapibus velit, sed pretium quam nisl quis urna. Ut vitae lorem sit amet augue elementum semper
vel at lorem. Vivamus vitae molestie ante. In suscipit posuere ullamcorper. Donec viverra congue mauris, at dignissim eros facilisis nec. Curabitur tristique velit id nulla malesuada, eu gravida est fringilla. Nullam feugiat scelerisque porta.
</p>
<p>
Nullam quis ullamcorper ante. Mauris non diam leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non semper elit. Cras sed elit elementum, vehicula velit volutpat, lobortis mi. Cras tincidunt consequat scelerisque. Sed accumsan dictum
ante, vel porttitor augue luctus quis. Donec risus justo, congue quis laoreet eu, finibus eu quam. Morbi in felis elit. Sed ac nulla gravida orci aliquam.
</p>
</div>
<div id="generated">Generated 18 paragraphs, 1471 words, 10000 bytes of Lorem Ipsum</div>
</div>
</div>
<hr>
<div class="boxed" style="overflow:visible !important;"><a style="text-decoration:none" href="mailto:help#lipsum.com">help#lipsum.com</a><br><a style="text-decoration:none" target="_blank" href="/privacy.pdf">Privacy Policy</a><a href="http://citenpl.internal.epo.org/wf/web/citenpl/citenpl.html?_url=https%3A//www.lipsum.com/privacy.pdf"
class="btncitenpl citenpl" name="MIKELink" title="Cite this document: https://www.lipsum.com/privacy.pdf">CiteNPL<span class="doc">DOCS</span></a></div>
</div>
I am trying to place an image in front of text, which is inside a div. Almost ever search for this brings results on how to put text in front of an image. This is not what I want to do.
In the following example I have a gif and tried using z-index: -1; in the CSS but this is not working.
The HTML
div {
position: relative;
}
img {
position: absolute;
z-index: 1;
vertically-align: middle;
left: 50%;
}
<div>
<img width="100" height="100" src="http://bestanimations.com/Animals/Reptiles/Dinosaurs/dinosaur-animated-gif-6.gif" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis aliquam eros, sed vehicula eros rhoncus eu. Cras bibendum rhoncus nisl, non venenatis enim interdum vel. Mauris sodales risus ac ex suscipit ultricies. Duis neque purus, auctor
non magna vel, euismod posuere metus. Fusce sit amet tortor quis felis consectetur iaculis. Phasellus risus nibh, finibus lacinia porta a, sagittis quis orci. Integer feugiat sit amet diam sit amet accumsan. In at finibus eros, vitae dictum eros. Donec
dignissim tellus id dui auctor convallis. Donec in faucibus eros, at ultrices felis. Vivamus eros augue, suscipit a dignissim et, efficitur nec nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis consequat neque, et placerat
tellus mollis ac. Curabitur ut pulvinar neque, eu aliquam purus. Vestibulum imperdiet, orci eget molestie ultricies, est dui faucibus dui, et venenatis neque sem non lorem. In in massa condimentum, vulputate lacus vitae, posuere lorem. Nullam faucibus
augue a dolor vestibulum, id efficitur augue aliquam. Fusce in ipsum aliquet, scelerisque augue ac, pretium urna. Nunc rutrum lacus vitae magna congue, vel finibus ligula sodales. Aenean vitae egestas lectus. Quisque ut pretium nunc. Curabitur id lectus
est. Duis nulla elit, vestibulum vitae pulvinar sit amet, tristique ut leo. Curabitur finibus ipsum sit amet ante venenatis efficitur. Fusce molestie nibh nec nisi pretium finibus. Ut ullamcorper sapien sapien, ut dictum libero elementum et. Cras sapien
augue, placerat vitae venenatis in, tempor sed enim. Nullam interdum, ante a pretium condimentum, ante lacus sollicitudin odio, at luctus lectus elit in mauris. Aenean a hendrerit neque, et porta ipsum. Maecenas tincidunt, eros eu auctor posuere, odio
felis tincidunt leo, id pellentesque neque neque nec diam. Sed ac ante ac neque porta suscipit. Sed nec lacus ligula. Nunc maximus fermentum risus eget vehicula. Sed ac varius tortor. Fusce blandit mollis commodo. Quisque orci magna, consequat et orci
at, consequat interdum arcu. Vestibulum vel iaculis magna, ut gravida enim. Nullam sollicitudin pharetra auctor. Mauris vulputate justo lorem, non aliquet elit cursus sed. Duis ultricies euismod diam, in rhoncus nisi auctor sit amet. Morbi dignissim
fermentum sem, vel volutpat quam accumsan ut. Suspendisse potenti. Aliquam quis lectus metus.
<div>
<div>
I am a second div
</div>
Thanks,
You could just do this:
img {
position: absolute;
z-index: 1;
}
And, if you make the parent div relative:
div {
position: relative;
}
You can move your image anywhere inside that text div:
img {
position: absolute;
z-index: 1;
left: 30px;
top: 20px;
}
To trigger z-index you need to reset position to any valid value but static:
absolute:
img,
span {
vertical-align: middle;
}
img {
position:absolute;
z-index: -1;
}
<div>
<img width="100" height="100" src="http://bestanimations.com/Animals/Reptiles/Dinosaurs/dinosaur-animated-gif-6.gif" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis aliquam eros, sed vehicula eros rhoncus eu. Cras bibendum rhoncus nisl, non venenatis enim interdum vel. Mauris sodales risus ac ex suscipit ultricies. Duis neque purus, auctor
non magna vel, euismod posuere metus. Fusce sit amet tortor quis felis consectetur iaculis. Phasellus risus nibh, finibus lacinia porta a, sagittis quis orci. Integer feugiat sit amet diam sit amet accumsan. In at finibus eros, vitae dictum eros. Donec
dignissim tellus id dui auctor convallis. Donec in faucibus eros, at ultrices felis. Vivamus eros augue, suscipit a dignissim et, efficitur nec nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis consequat neque, et placerat
tellus mollis ac. Curabitur ut pulvinar neque, eu aliquam purus. Vestibulum imperdiet, orci eget molestie ultricies, est dui faucibus dui, et venenatis neque sem non lorem. In in massa condimentum, vulputate lacus vitae, posuere lorem. Nullam faucibus
augue a dolor vestibulum, id efficitur augue aliquam. Fusce in ipsum aliquet, scelerisque augue ac, pretium urna. Nunc rutrum lacus vitae magna congue, vel finibus ligula sodales. Aenean vitae egestas lectus. Quisque ut pretium nunc. Curabitur id lectus
est. Duis nulla elit, vestibulum vitae pulvinar sit amet, tristique ut leo. Curabitur finibus ipsum sit amet ante venenatis efficitur. Fusce molestie nibh nec nisi pretium finibus. Ut ullamcorper sapien sapien, ut dictum libero elementum et. Cras sapien
augue, placerat vitae venenatis in, tempor sed enim. Nullam interdum, ante a pretium condimentum, ante lacus sollicitudin odio, at luctus lectus elit in mauris. Aenean a hendrerit neque, et porta ipsum. Maecenas tincidunt, eros eu auctor posuere, odio
felis tincidunt leo, id pellentesque neque neque nec diam. Sed ac ante ac neque porta suscipit. Sed nec lacus ligula. Nunc maximus fermentum risus eget vehicula. Sed ac varius tortor. Fusce blandit mollis commodo. Quisque orci magna, consequat et orci
at, consequat interdum arcu. Vestibulum vel iaculis magna, ut gravida enim. Nullam sollicitudin pharetra auctor. Mauris vulputate justo lorem, non aliquet elit cursus sed. Duis ultricies euismod diam, in rhoncus nisi auctor sit amet. Morbi dignissim
fermentum sem, vel volutpat quam accumsan ut. Suspendisse potenti. Aliquam quis lectus metus.
<div>
relative :
img,
span {
vertical-align: middle;
}
img {
position:relative;
margin-right:-100px;/* can be usefull*/
z-index: -1;
}
<div>
<img width="100" height="100" src="http://bestanimations.com/Animals/Reptiles/Dinosaurs/dinosaur-animated-gif-6.gif" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis aliquam eros, sed vehicula eros rhoncus eu. Cras bibendum rhoncus nisl, non venenatis enim interdum vel. Mauris sodales risus ac ex suscipit ultricies. Duis neque purus, auctor
non magna vel, euismod posuere metus. Fusce sit amet tortor quis felis consectetur iaculis. Phasellus risus nibh, finibus lacinia porta a, sagittis quis orci. Integer feugiat sit amet diam sit amet accumsan. In at finibus eros, vitae dictum eros. Donec
dignissim tellus id dui auctor convallis. Donec in faucibus eros, at ultrices felis. Vivamus eros augue, suscipit a dignissim et, efficitur nec nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis consequat neque, et placerat
tellus mollis ac. Curabitur ut pulvinar neque, eu aliquam purus. Vestibulum imperdiet, orci eget molestie ultricies, est dui faucibus dui, et venenatis neque sem non lorem. In in massa condimentum, vulputate lacus vitae, posuere lorem. Nullam faucibus
augue a dolor vestibulum, id efficitur augue aliquam. Fusce in ipsum aliquet, scelerisque augue ac, pretium urna. Nunc rutrum lacus vitae magna congue, vel finibus ligula sodales. Aenean vitae egestas lectus. Quisque ut pretium nunc. Curabitur id lectus
est. Duis nulla elit, vestibulum vitae pulvinar sit amet, tristique ut leo. Curabitur finibus ipsum sit amet ante venenatis efficitur. Fusce molestie nibh nec nisi pretium finibus. Ut ullamcorper sapien sapien, ut dictum libero elementum et. Cras sapien
augue, placerat vitae venenatis in, tempor sed enim. Nullam interdum, ante a pretium condimentum, ante lacus sollicitudin odio, at luctus lectus elit in mauris. Aenean a hendrerit neque, et porta ipsum. Maecenas tincidunt, eros eu auctor posuere, odio
felis tincidunt leo, id pellentesque neque neque nec diam. Sed ac ante ac neque porta suscipit. Sed nec lacus ligula. Nunc maximus fermentum risus eget vehicula. Sed ac varius tortor. Fusce blandit mollis commodo. Quisque orci magna, consequat et orci
at, consequat interdum arcu. Vestibulum vel iaculis magna, ut gravida enim. Nullam sollicitudin pharetra auctor. Mauris vulputate justo lorem, non aliquet elit cursus sed. Duis ultricies euismod diam, in rhoncus nisi auctor sit amet. Morbi dignissim
fermentum sem, vel volutpat quam accumsan ut. Suspendisse potenti. Aliquam quis lectus metus.
<div>
fixed (not the best):
img,
span {
vertical-align: middle;
}
img {
position:fixed;
z-index: -1;
}
<div>
<img width="100" height="100" src="http://bestanimations.com/Animals/Reptiles/Dinosaurs/dinosaur-animated-gif-6.gif" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis aliquam eros, sed vehicula eros rhoncus eu. Cras bibendum rhoncus nisl, non venenatis enim interdum vel. Mauris sodales risus ac ex suscipit ultricies. Duis neque purus, auctor
non magna vel, euismod posuere metus. Fusce sit amet tortor quis felis consectetur iaculis. Phasellus risus nibh, finibus lacinia porta a, sagittis quis orci. Integer feugiat sit amet diam sit amet accumsan. In at finibus eros, vitae dictum eros. Donec
dignissim tellus id dui auctor convallis. Donec in faucibus eros, at ultrices felis. Vivamus eros augue, suscipit a dignissim et, efficitur nec nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis consequat neque, et placerat
tellus mollis ac. Curabitur ut pulvinar neque, eu aliquam purus. Vestibulum imperdiet, orci eget molestie ultricies, est dui faucibus dui, et venenatis neque sem non lorem. In in massa condimentum, vulputate lacus vitae, posuere lorem. Nullam faucibus
augue a dolor vestibulum, id efficitur augue aliquam. Fusce in ipsum aliquet, scelerisque augue ac, pretium urna. Nunc rutrum lacus vitae magna congue, vel finibus ligula sodales. Aenean vitae egestas lectus. Quisque ut pretium nunc. Curabitur id lectus
est. Duis nulla elit, vestibulum vitae pulvinar sit amet, tristique ut leo. Curabitur finibus ipsum sit amet ante venenatis efficitur. Fusce molestie nibh nec nisi pretium finibus. Ut ullamcorper sapien sapien, ut dictum libero elementum et. Cras sapien
augue, placerat vitae venenatis in, tempor sed enim. Nullam interdum, ante a pretium condimentum, ante lacus sollicitudin odio, at luctus lectus elit in mauris. Aenean a hendrerit neque, et porta ipsum. Maecenas tincidunt, eros eu auctor posuere, odio
felis tincidunt leo, id pellentesque neque neque nec diam. Sed ac ante ac neque porta suscipit. Sed nec lacus ligula. Nunc maximus fermentum risus eget vehicula. Sed ac varius tortor. Fusce blandit mollis commodo. Quisque orci magna, consequat et orci
at, consequat interdum arcu. Vestibulum vel iaculis magna, ut gravida enim. Nullam sollicitudin pharetra auctor. Mauris vulputate justo lorem, non aliquet elit cursus sed. Duis ultricies euismod diam, in rhoncus nisi auctor sit amet. Morbi dignissim
fermentum sem, vel volutpat quam accumsan ut. Suspendisse potenti. Aliquam quis lectus metus.
<div>
Try to use this:
img {
z-index: 1;
position: absolute;
}
And if you want the text in front of the image, just change the z-index to -1
If you want to locate the image in a different place, add this:
img {
z-index: 1;
position: absolute;
left: 50px;
top: 50px;
}
and change it as you wish.
sorry if this title isn't really the issue, I can't think of any other way to describe it.
If you look at the attached js fiddle, you'll see that there is a vertically centered div that grows off the top of the page, and cannot be seen or scrolled to.
https://jsfiddle.net/xdmkm2e4/
Please also see code below:
HTML:
<div class="container">
<div id="CONTENT">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
vitae molestie quam imperdiet. Integer mollis turpis nec metus tincidunt imperdiet. Aenean mollis at nisl at venenatis. Sed sodales, nibh ut aliquet fermentum, erat purus convallis orci, a feugiat purus ex sit amet dui. Pellentesque vel elementum
nisi, lobortis rutrum nibh. Donec at hendrerit metus. Nam elementum semper tortor, quis gravida ex suscipit sit amet. Sed at tellus suscipit augue varius posuere. Donec eu diam erat. Pellentesque tristique porttitor nisi sed lobortis. Proin tempor
elit sit amet est ultricies rutrum. Fusce sit amet cursus risus, sed tincidunt urna. Praesent ultrices mattis ullamcorper. Morbi quis mattis enim. Vivamus in magna ut lacus congue feugiat. Donec viverra ultrices nisi, id lacinia ante tempor eget.
Aenean in auctor tortor, vitae viverra mi. Vivamus facilisis dignissim massa id dignissim. Maecenas nec quam id libero lobortis vulputate. Nam in hendrerit arcu, vel luctus nulla. Nam eu nisl iaculis, vehicula justo id, finibus augue. Ut faucibus,
risus quis lacinia auctor, ex massa euismod nisi, nec vulputate nisi elit ut urna. Donec semper massa nec vestibulum iaculis. Aliquam odio sapien, porttitor in ultricies eget, efficitur a nisi. Nullam sagittis ex sit amet leo ullamcorper semper.
Quisque vitae pharetra nisl. Aliquam efficitur vulputate lectus nec accumsan. Aenean pulvinar sit amet ligula a iaculis. Aenean non odio ligula. Praesent arcu leo, scelerisque ut lorem et, fringilla scelerisque nulla. Ut porta felis vehicula, faucibus
ligula tincidunt, pulvinar urna. Ut nec nisi vel orci volutpat dapibus eu ut urna. In finibus sem vel mauris mattis viverra. Morbi vitae elit at lorem mollis cursus. Aenean nec enim faucibus, maximus est nec, maximus nibh. Pellentesque laoreet,
felis id rhoncus gravida, dolor lorem porttitor felis, et feugiat diam nibh at magna. Fusce mollis congue magna, et sollicitudin lectus maximus vel. Etiam ac nisi sed purus placerat faucibus vel at dui. Praesent vel orci at sem ultricies sodales
malesuada eu eros. Morbi commodo fermentum tellus eu gravida. Mauris accumsan bibendum velit, ac pharetra nisl blandit a. Aenean sed venenatis libero. Mauris id sapien quis felis volutpat mollis sed eget tortor. Quisque viverra maximus urna non
tristique. Donec venenatis elementum enim vitae viverra. Nam vitae nisi dictum, pellentesque urna nec, lobortis risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur interdum dolor ut nibh efficitur,
in iaculis sem iaculis. Quisque sit amet lacus eu metus posuere tincidunt. Aenean nec vulputate velit. Fusce cursus consectetur urna, ac aliquet sapien molestie nec. Nunc vel imperdiet purus. Etiam cursus accumsan magna at imperdiet. Sed fringilla
finibus laoreet. In elementum non est ac ultricies. Morbi enim turpis, convallis sed luctus non, dignissim id ante. Aenean sollicitudin fringilla elit, sit amet egestas diam aliquam et. Vestibulum non maximus odio. Proin consequat augue vel gravida
sagittis. Sed in gravida enim, in consequat dolor. Mauris vitae ligula ullamcorper turpis ultrices volutpat non id sem. Donec mollis est pellentesque, venenatis velit ut, mollis leo. Vestibulum sit amet dolor quis dolor facilisis vulputate. In placerat
ultrices ligula, eget maximus ex sodales id. Nunc at tristique diam. Fusce at elementum turpis, ac scelerisque purus. Donec convallis orci ac sem aliquet commodo. Aenean efficitur pharetra condimentum. Mauris eget magna at dui posuere faucibus cursus
vitae lectus. Sed pharetra neque augue, eget tempor enim porttitor porta. Integer tincidunt finibus risus, quis tempor nisi pellentesque sit amet. Maecenas mollis euismod libero, eu blandit risus commodo in. Aliquam eu velit varius lectus lobortis
fermentum vitae et augue. Integer mattis dignissim tristique. Nunc semper sapien ut ligula aliquam, nec pretium justo congue. Phasellus non felis egestas, scelerisque nibh vel, pellentesque odio. Nulla facilisi. Donec ullamcorper justo sem. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ut sapien vitae augue laoreet tincidunt nec ac lectus. Integer maximus elit a quam tristique ultrices. Sed a diam eget arcu semper euismod. Praesent efficitur quam
magna, auctor feugiat neque vulputate sed. Sed sodales iaculis hendrerit. Donec vestibulum enim a lorem accumsan, in suscipit massa tincidunt. Praesent a orci sapien. Nam convallis mi urna, at porttitor elit porta eu. Aliquam ligula mauris, tincidunt
ac maximus id, scelerisque sit amet purus. Etiam vehicula elementum porta. Nulla congue tincidunt mauris eu tempus. Donec rutrum interdum nunc, ac commodo nibh condimentum vulputate. Duis eu ante et nisl aliquam interdum eu ut sem. Mauris non porttitor
diam. Vivamus eleifend enim sit amet quam euismod pellentesque vitae ac purus. Aliquam erat volutpat. Nulla ac nibh ex. Etiam sed ullamcorper ipsum. Etiam posuere elementum orci a viverra. Suspendisse potenti. Donec metus magna, accumsan ac lacinia
quis, accumsan vulputate lorem. Aenean dictum turpis consequat iaculis faucibus. Duis nec odio non massa laoreet mattis. Nunc pharetra vitae arcu scelerisque fermentum. Aliquam non elementum libero. Mauris efficitur, nulla id sagittis viverra, orci
felis mattis magna, a vulputate orci purus ut lacus. In eleifend lacus ut ante faucibus, non rhoncus sem lobortis. Donec venenatis nunc sit amet varius laoreet. Vestibulum tristique, neque aliquet sagittis eleifend, nulla odio blandit tortor, quis
rutrum ligula ligula vel erat. Sed hendrerit dictum porta. Donec ullamcorper ligula non tortor dapibus, vulputate porttitor arcu gravida. Nam vitae nunc aliquet, mollis nisl ac, bibendum arcu. Aliquam at dapibus dui. Nulla at pharetra lorem. Fusce
efficitur in massa non lacinia. Proin vel lacus ipsum. Donec pharetra molestie libero quis imperdiet. Ut nec mauris quis turpis mattis gravida quis vitae massa. Morbi sodales urna eget ex tristique finibus. Donec eget arcu nisi. Aliquam quis eleifend
dolor. Praesent eu lobortis magna. Curabitur congue neque et mauris eleifend laoreet. Maecenas vel semper enim. Nulla ligula odio, accumsan ut laoreet sed, feugiat vitae diam. Mauris placerat ultrices tortor, vel dignissim nibh scelerisque fermentum.
In non consequat enim. Aliquam auctor mauris sit amet aliquet condimentum. Morbi nibh lorem, mattis ut metus sed, mattis sollicitudin odio. In hac habitasse platea dictumst. Sed tempus consequat felis, eu convallis lacus sagittis nec. In hac habitasse
platea dictumst. Praesent eget congue lacus, non tempor odio. Aliquam vitae augue lacinia, semper eros rutrum, elementum felis. Praesent pharetra nunc nisi, id suscipit nibh bibendum accumsan. Nam consectetur, metus eget malesuada suscipit, quam
diam ullamcorper leo, vel posuere dolor ligula non lacus. Nulla pharetra malesuada accumsan. Aenean faucibus vel justo quis tincidunt. Cras cursus sem nunc, eu tincidunt mauris facilisis vitae. Sed feugiat fermentum ipsum sed ultricies. Nullam suscipit
sapien a nisi blandit finibus. Aliquam pretium aliquam massa nec dapibus. Etiam vulputate, ipsum sed vestibulum pellentesque, turpis nulla blandit risus, sit amet vestibulum magna eros et tellus. Integer euismod congue orci sed tristique. Maecenas
eu sem eleifend, sollicitudin tortor suscipit, malesuada lacus. Nullam eleifend sollicitudin convallis. Cras volutpat vulputate pellentesque. Quisque laoreet cursus sapien, nec iaculis risus pharetra vitae. Cras non finibus ante. Suspendisse arcu
arcu, dignissim ut tellus et, venenatis hendrerit libero. Fusce et vestibulum purus, sed vulputate lectus. Suspendisse nec purus ac tellus blandit pellentesque. Ut a tincidunt ante. Vivamus congue dapibus tortor vitae dignissim. Maecenas eget tempus
ante, tincidunt fermentum ex. Duis molestie nulla vitae nisl vestibulum, a egestas purus posuere. Nunc pretium mollis eros eget pharetra. Nulla id feugiat dui. Nullam felis sapien, mattis porta massa at, pharetra dignissim augue. Cras semper urna
nec diam finibus, sed iaculis diam consequat. Sed vehicula laoreet tempus. Nunc pulvinar ipsum non velit interdum, eget sollicitudin nibh commodo. Duis massa sem, dictum sit amet elementum et, lacinia nec dui. Sed pulvinar elit sapien. Nunc sit
amet erat tincidunt, porta diam efficitur, egestas neque. Curabitur at ante ut massa condimentum cursus. Nullam pharetra, erat ac eleifend ultrices, est augue semper metus, ac rhoncus metus lorem vitae augue. Nulla sagittis, diam a mattis aliquet,
odio eros scelerisque nisl, id tincidunt nisi felis non ipsum. Morbi pulvinar a elit consequat malesuada. Vestibulum nec ligula facilisis, rhoncus mi laoreet, commodo quam. Nullam imperdiet aliquet dui in rutrum. Duis tristique massa sit amet arcu
efficitur imperdiet. Sed interdum erat id nunc euismod aliquet. Aenean in interdum urna. Aliquam dapibus magna nec dui rhoncus scelerisque. Fusce dignissim lobortis purus, eget facilisis purus. Proin tincidunt lectus vel eros volutpat feugiat. Ut
sed congue sem.
</p>
</div>
</div>
CSS:
#CONTENT {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70vw;
background-color: #C9DBDC;
opacity: .8;
border-radius: 5px;
box-shadow: 0 0 20px black;
z-index: 1;
padding: 20px;
}
My goal is to get it so that the top of the div is centered, but that content grows the div downwards rather than upwards.
Any help would be greatly appreciated!
Use {margin: 0 auto;} to center things at the top.
#CONTENT {
margin: 0 auto;
width: 70vw;
background-color: #C9DBDC;
opacity: .8;
border-radius: 5px;
box-shadow: 0 0 20px black;
padding: 2em
}
p {
text-align: justify;
text-justify: inter-word;
margin: .5em;
}
<div class="container">
<div id="CONTENT">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
</div>
</div>
Also, as #Bosc pointed out;
you can give the <div> a fixed height and make it scroll-able.
To achieve this you can use {overflow-y:scroll}
Like so
#CONTENT {
margin: 0 auto;
width: 70vw;
background-color: #C9DBDC;
opacity: .8;
border-radius: 5px;
box-shadow: 0 0 20px black;
padding: 2em;
overflow-y: scroll;
max-height: 50vh;
}
p {
text-align: justify;
text-justify: inter-word;
margin: .5em;
}
<div class="container">
<div id="CONTENT">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
</div>
</div>
You can also take it one step further and remove the scrollbar from the <div>
However, note that this is only supported by -webkit- browsers. The scrollbar will still show up for FF and IE users.
Open the snippet below with a webkit browser to see the effect:
#CONTENT {
margin: 0 auto;
width: 70vw;
background-color: #C9DBDC;
opacity: .8;
border-radius: 5px;
box-shadow: 0 0 20px black;
padding: 2em;
overflow-y: scroll;
max-height: 50vh;
}
#CONTENT::-webkit-scrollbar {
width: 0;
height: 0;
}
p {
text-align: justify;
text-justify: inter-word;
margin: .5em;
}
<div class="container">
<div id="CONTENT">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et turpis consectetur, pretium augue id, convallis urna. Nulla in vehicula magna. Donec nec velit tortor. Sed finibus convallis tellus, non porttitor est porttitor id. Aliquam erat volutpat.
Aliquam mauris nisi, venenatis a velit id, euismod interdum tortor. Vestibulum elit augue, tempor et massa id, ullamcorper euismod ante. Suspendisse nulla metus, viverra eget vestibulum non, ornare id erat. Cras fringilla lectus quis metus vehicula,
</p>
</div>
</div>
Are you trying to get it vertically-aligned center? If not, you don't need to do the transform translate. From what I've seen it's only used for images.
If you do something like this it should work:
#CONTENT {
position: absolute;
top: 10%;
width: 70vw;
margin: 0 auto;
background-color: #C9DBDC;
opacity: .8;
border-radius: 5px;
box-shadow: 0 0 20px black;
z-index: 1;
padding: 20px;
}
I can't describe nicely but, I think this is what you wanted.
#CONTENT {
position: absolute;
top: 10%;
left: 10%;
width: 70vw;
margin-bottom: 20px;
background-color: #C9DBDC;
opacity: .8;
border-radius: 5px;
box-shadow: 0 0 20px black;
z-index: 1;
padding: 10px 20px;
}
I'll give you the jsfiddle link, https://jsfiddle.net/7evkdv20/
Here is the design I'm trying to do.
So I decided to put three part.
top_bg
content
footer_bg
I have given absoulte position to bgs to fix at top and bottom. But the thing is the footer_bg image is not sitting at bottom instead coming at top even though I have given bottom 0.
CODE
MARKUP
<div id="top_bg">
<img src="https://images.unsplash.com/photo-1438368915865-a852ef86fc42?q=80&fm=jpg&s=15e4744077e36852ba57f46f4660dc7a" />
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas semper, massa quis aliquet rhoncus, diam lorem euismod ante, sed vulputate nulla magna id dui. Sed sit amet libero mi. Fusce suscipit, lorem at dignissim rutrum, urna est scelerisque nisl, nec interdum orci tortor at ante. Nam a sollicitudin massa, sit amet pretium nisl. Morbi at velit maximus, commodo ligula vel, pharetra dui. Vivamus mollis mi eget nunc accumsan scelerisque. Fusce non mauris sit amet nibh malesuada faucibus.</p>
<p>Donec feugiat, tortor eget interdum rhoncus, nunc felis dictum mauris, at convallis elit turpis quis sem. Donec enim augue, tempus ac scelerisque euismod, congue sed nisi. Vestibulum sed fermentum nisi, nec lacinia mi. Duis ut consectetur sem. Pellentesque lacinia ipsum eu sapien iaculis, ut varius libero hendrerit. Phasellus non turpis augue. Nam ut felis dapibus, viverra arcu et, tincidunt neque. In at convallis tellus. Nunc sit amet eleifend mauris. Sed diam elit, placerat a laoreet eu, facilisis gravida erat. Praesent eget ultricies nisl. Quisque vehicula cursus aliquet. Curabitur at diam volutpat, tempor ante eu, cursus dolor. Integer laoreet, est sed lacinia ultricies, quam massa cursus est, vitae pulvinar nibh lectus sed elit.</p>
<p>Aenean cursus porttitor eleifend. Morbi ultrices eleifend eros, ac posuere tellus lobortis vestibulum. Aenean eu dolor nec elit ultrices cursus at sed magna. Donec quis porta nulla, in dictum arcu. Pellentesque porttitor dui vitae euismod consectetur. Pellentesque id tellus viverra, vulputate nisi sit amet, ultricies nibh. In hac habitasse platea dictumst. Praesent pharetra ex a dictum consectetur. Fusce finibus sapien vel iaculis mollis. Nunc vel luctus enim.</p>
<p>Aliquam lacinia vestibulum tempor. Etiam pellentesque, felis nec commodo cursus, sem mi feugiat dolor, sed dignissim ipsum lectus vel risus. Cras a dui eget lacus mattis volutpat in sed tortor. Aliquam lobortis sapien sit amet pharetra varius. Donec eget aliquam nisi. Morbi quis mattis quam. Nullam porta suscipit dignissim. In hac habitasse platea dictumst. Praesent in dui id dui porta lacinia. Nam odio tortor, volutpat non auctor id, placerat nec augue. Suspendisse quis pretium ligula, quis accumsan tortor. Cras eu est vitae orci egestas rhoncus eu non dolor. Integer vehicula suscipit magna ut varius. Maecenas sagittis leo id nisl sagittis viverra.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin sed consectetur neque, a pellentesque turpis. Sed quis orci diam. Aenean vel ultricies ipsum, id accumsan mi. Sed hendrerit sollicitudin nisi bibendum hendrerit. Duis nec hendrerit ipsum. Suspendisse congue mauris ut viverra dapibus. Fusce ut blandit nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum luctus sapien et felis dictum aliquet. Pellentesque a pretium leo. Duis rhoncus bibendum fermentum. Proin ac massa euismod, pretium odio vel, vehicula risus. Aenean posuere eros non orci maximus, tristique varius felis elementum. Etiam eget maximus massa, in facilisis ipsum. Integer eleifend auctor diam scelerisque tempor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas semper, massa quis aliquet rhoncus, diam lorem euismod ante, sed vulputate nulla magna id dui. Sed sit amet libero mi. Fusce suscipit, lorem at dignissim rutrum, urna est scelerisque nisl, nec interdum orci tortor at ante. Nam a sollicitudin massa, sit amet pretium nisl. Morbi at velit maximus, commodo ligula vel, pharetra dui. Vivamus mollis mi eget nunc accumsan scelerisque. Fusce non mauris sit amet nibh malesuada faucibus.</p>
<p>Donec feugiat, tortor eget interdum rhoncus, nunc felis dictum mauris, at convallis elit turpis quis sem. Donec enim augue, tempus ac scelerisque euismod, congue sed nisi. Vestibulum sed fermentum nisi, nec lacinia mi. Duis ut consectetur sem. Pellentesque lacinia ipsum eu sapien iaculis, ut varius libero hendrerit. Phasellus non turpis augue. Nam ut felis dapibus, viverra arcu et, tincidunt neque. In at convallis tellus. Nunc sit amet eleifend mauris. Sed diam elit, placerat a laoreet eu, facilisis gravida erat. Praesent eget ultricies nisl. Quisque vehicula cursus aliquet. Curabitur at diam volutpat, tempor ante eu, cursus dolor. Integer laoreet, est sed lacinia ultricies, quam massa cursus est, vitae pulvinar nibh lectus sed elit.</p>
<p>Aenean cursus porttitor eleifend. Morbi ultrices eleifend eros, ac posuere tellus lobortis vestibulum. Aenean eu dolor nec elit ultrices cursus at sed magna. Donec quis porta nulla, in dictum arcu. Pellentesque porttitor dui vitae euismod consectetur. Pellentesque id tellus viverra, vulputate nisi sit amet, ultricies nibh. In hac habitasse platea dictumst. Praesent pharetra ex a dictum consectetur. Fusce finibus sapien vel iaculis mollis. Nunc vel luctus enim.</p>
<p>Aliquam lacinia vestibulum tempor. Etiam pellentesque, felis nec commodo cursus, sem mi feugiat dolor, sed dignissim ipsum lectus vel risus. Cras a dui eget lacus mattis volutpat in sed tortor. Aliquam lobortis sapien sit amet pharetra varius. Donec eget aliquam nisi. Morbi quis mattis quam. Nullam porta suscipit dignissim. In hac habitasse platea dictumst. Praesent in dui id dui porta lacinia. Nam odio tortor, volutpat non auctor id, placerat nec augue. Suspendisse quis pretium ligula, quis accumsan tortor. Cras eu est vitae orci egestas rhoncus eu non dolor. Integer vehicula suscipit magna ut varius. Maecenas sagittis leo id nisl sagittis viverra.</p>
</div>
<div id="footer_bg">
<img src="https://images.unsplash.com/photo-1438480478735-3234e63615bb?q=80&fm=jpg&s=8fddc1c4c240e145cf6b65a21ae92087">
</div>
STYLE
#top_bg,#footer_bg{
position:absolute;
z-index:-99999;
}
#top_bg,#footer_bg img{
width:100%;
}
#top_bg{
top:0;
}
#footer_bg{
bottom:0;
}
#content{
background-color:white;
margin:40px;
margin-top:100px;
padding:10px;
}
JSFIDDLE
Why is this happening? There is no float used here. What is the problem?
To my thinking footer_bg parent is body and I have given bottom 0 so it should fit at the bottom of the page. I don't know why it is not happening.
How to have the footer_bg image at the bottom of page?
update your css with
body {
position:relative;
}
and yes you can update z-index to -1
Here check this, As said Body should be relative.
Check here : [FIDDLE][1]
[1]: http://jsfiddle.net/vinayak5192/jtm0wr4L/4/