How to stack imgs on top of img? - html

Question

I have six of my portfolio images (of kittens). How do I stack six of them on top of the lake wallpaper? I don't want there to be any white space, just the word "Portfolio" and six kittens on top of the lake, followed by the grey background section of the website.
Portfolio - How do I make six kitten photos on top of the lake img?
About - Grey background with white font and profile pic (Already done)
Contact - Contact form (Already done)
I've read about z-index, and tried background-size: cover and contain, but it doesn't seem to work... Can anyone explain all this to me?
HTML
<header id="portfolio" class="container-fluid">
<div class="container">
<h1 class="font-italic">Portfolio</h1>
<div class="row">
<div class="col-md-4">
<img src="http://placekitten.com/350/300" alt="Porfolio1" class="img-thumbnail">
</div>
<div class="col-md-4">
<img src="http://placekitten.com/350/300" alt="Porfolio2" class="img-thumbnail>
</div>
<div class="col-md-4">
<img src="http://placekitten.com/350/300" alt="Porfolio3" class="img-thumbnail">
</div>
</div>
<div class="row portfolio-buffer">
<div class="col-md-4">
<img src="http://placekitten.com/350/300" alt="Porfolio4" class="img-thumbnail">
</div>
<div class="col-md-4">
<img src="http://placekitten.com/350/300" alt="Porfolio5" class="img-thumbnail">
</div>
<div class="col-md-4">
<img src="http://placekitten.com/350/300" alt="Porfolio6" class="img-thumbnail">
</div>
</div>
</div>
</header>
CSS
.portfolio-buffer {
margin-top: 30px;
}
section {
padding: 85px 0;
}
footer {
padding: 40px 0;
}
#portfolio > img {
margin-left: -15px; /* Compensate for the container */
width: calc(100% + 30px); /* Compensate for the container */
}
https://codepen.io/jenlky/pen/GMENBL/

Answer 1

You have numerous problems with your fiddle:
Your .wallpaper selector doesn't actually have a matching element; you have no element with a class of wallpaper.
You are using Boostrap's container-fluid, but not using a column-based layout. Your elements in this container that are not in Bootstrap rows (such as this background) need to have margin-left and margin-right of -15px to accommodate for Boostrap.
You have rows that have combined columns counts other than 12.
Most elements overflow their container.
As for the background not working with background-size, that is because background-size requires a background to operate, added via a CSS property like background: url(background.jpg). You are simply using an <img> tag.
Having said that, all you need to do is make sure that your image has a max-width of 100%, to ensure that it stays within the bounds. You'll probably also want to make it fixed to the page, which can be done with position: fixed.
I've created a new selector based on your current structure, and added the relevant properties:
#portfolio > img {
margin-left: -15px; /* Compensate for the container */
margin-right: -15px; /* Compensate for the container */
max-width: 100%;
position: fixed; /* Optional */
}
This can be seen working here.
Note that you'll probably want to add max-width: 100%; and max-height: 100%; to all images, to ensure that they don't go outside of their container.
Update
In order to have the background only cover the portfolio section, you'll want to remove position: fixed (to give it the default position relative). You'll still want to keep the negative left margin, but you'll want to make it 100% of the width of the container plus 30 pixels in order to compensate for the padding and offset. That can be done with a CSS calculation:
#portfolio > img {
margin-left: -15px; /* Compensate for the container */
width: calc(100% + 30px); /* Compensate for the container */
}
I've created a new pen showcasing this here.
And again, note that you'll probably want to set a max-width of 100% on all images, and you should set margin-left (and technically margin-right) on all elements that are directly under a Bootstrap column. For example, the cats can be fixed with:
.col-md-4 > img.img-absolute {
margin-left: -15px;
margin-right: -15px;
max-width: 100%;
}
Hope this helps! :)

Answer 2

Ok thanks to Obsidian Age for giving me the idea of using background-image instead of img src="...". So I removed img src and added this in:
header {
background-image: url("https://wallpaperscraft.com/image/forest_lake_reflection_island_mist_97668_1920x1080.jpg");
padding: 85px 0;
background-repeat: no-repeat;
}
That works and solved the problem I had. I've updated in my codepen (https://codepen.io/jenlky/pen/GMENBL/). Cheers!