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/
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! :)
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!
Okay, this seems to be an issue with so many potential solutions but none that will work for what I want to do. I always want to display perfect circles, even if the underlying image is not a perfect circle. But, I don't want to specify an image dimension by px because I want it to be responsive. It seems that no matter which solution I try, the circles always either become warped into ovals or the picture dimensions completely take over and make it gigantic.
HTML:
<div class='item-image'>
<img class='img-circle img-responsive img-center' src='#' />
</div>
Goal:
Regardless of the image size (rectangles), I want the part of the image beneath the red circle to show through.
The best way to do this is per overlay. And make the circle with CSS!
<div class="wrapper">
<img src="#" class="img-responsive">
<div class="circle"></div>
</div>
.wrapper has position: relative and .circle has position: absolute and border-radius: 100%.
The wrapper has to be positioned with inline-block. Center the wrapper with text-align: center.
Center an absolute positioned element as follows:
.el {
position: absolute;
top: 50%;
margin-top: -(height / 2)%;
left: 50%;
margin-left: -(width / 2)%;
}
If you want the image inside the circle, make the circle bigger.
Example
HTML:
<div class="circle">
</div>
and use css for image in background:
.circle{
border: 2px solid red;
width: 200px;
height: 200px;
border-radius:100%;
background-image: url('')
}
check the fiddle
How do I get these pictures side by side with css I cant get it to work.
I tried everything but nothing is working for me and I cant find a tutorial for what I need on the web pls help me. and it has to be responsive.
HTML:
<div class="seizoenen">
<div class="container">
<img src="image/zomer.jpg" height="100%" width="25%" />
</div>
<div class="container">
<img src="image/herfst.jpg" height="100%" width="25%" />
</div>
<div class="container">
<img src="image/winter.jpg" height="100%" width="25%" />
</div>
<div class="container">
<img src="image/lente.jpg" height="100%" width="25%" />
</div>
</div>
Here is a JSFiddle.
https://jsfiddle.net/bs3fz70v/2/
if you want it to be responsive...
Change img tags to max-width and set this in CSS. This will scale image down once it hits smaller screens.
Focus on your parent and child element structure. Your .container width should be set to 25%, not your img tag.
You mentioned text overlay in your comment. Set .container (parent element) to position: relative; Set any tag (child element) within that .container to position: absolute;. Now you can set top or left any value within 100% and contain it within that .container. And since the img tag is max-width:100%;, it will take on full width of that container, which is 25%.
Also set height to auto so images aren't stretched.
CSS
.seizoenen{
width:100%;
}
p {
position: absolute;
top: 50%;
left: 50%;
}
.container{
display: inline-block;
width: 24%;
position: relative;
}
img{
max-width: 100%;
}
Hope this gets you started experimenting with more positioning
Hoi bart, its quite easy to do. Your container needs to be display: inline-block; this will place the images next to eachother. And to fill the space of the images make them width: 100%;
Right fiddle now
One thing wasn't really clear to me you want the images to scale to a smaller size aswell?
I have a thumbnail image and another smaller image which overlaps the thumbnail image. But the padding changes for the smaller overlapping image as I zoom in and out and the problem exist only with the CHROME browser. Its working fine with IE and firefox. I tried using percentage to set the padding values for the smaller image but the problem still exist.
Here are the images.
This is the HTML
<div class="car-item">
<div class=" car-image">
<img src="/~/media/images/thumb.ashx" alt="Image 1" />
</div>
<div class="car video">
VIDEO
</div>
<div>
position for car video is absolute
position for car item is relative
and for car-image is static
You will have issues at times when using percentages. This is a good example of when to use absolute positioning.
I have no idea what your code looks like so here is a basic example of how to accomplish what you have pictured above with absolute positioning. I used a span tag instead of an additional image tag but it should work all the same.
You might have to modify your HTML and CSS a little furthor to get it to work in your environment.
http://jsfiddle.net/6C8gT/
Here is an updated jsFiddle (http://jsfiddle.net/6C8gT/1/) that uses your markup and another one with reduced markup (http://jsfiddle.net/6C8gT/2/). You don't really need those DIVs unless you have plans for them in the future.
I just did what I have posted below but modified the CSS to match your HTML. You'll have to check out the jsFiddles.
HTML
<div class="container">
<img class="thumb" src="http://lorempixel.com/300/200/" />
<span>Video</span>
</div>
CSS
.container {
position: relative;
}
.container img {
display: block;
}
.container span {
color: white;
background-color: black;
padding: 5px 10px;
position: absolute;
left: 0;
bottom: 0;
}
I'm a beginner at rails programming, attempting to show many images on a page. Some images are to lay on top of others. To make it simple, say I want a blue square, with a red square in the upper right corner of the blue square (but not tight in the corner). I am trying to avoid compositing (with ImageMagick and similar) due to performance issues.
I just want to position overlapping images relative to one another.
As a more difficult example, imagine an odometer placed inside a larger image. For six digits, I would need to composite a million different images, or do it all on the fly, where all that is needed is to place the six images on top of the other one.
Ok, after some time, here's what I landed on:
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
top: 0;
left: 0;
border: 1px red solid;
}
.image2 {
position: absolute;
top: 30px;
left: 30px;
border: 1px green solid;
}
<div class="parent">
<img class="image1" src="https://via.placeholder.com/50" />
<img class="image2" src="https://via.placeholder.com/100" />
</div>
As the simplest solution. That is:
Create a relative div that is placed in the flow of the page; place the base image first as relative so that the div knows how big it should be; place the overlays as absolutes relative to the upper left of the first image. The trick is to get the relatives and absolutes correct.
This is a barebones look at what I've done to float one image over another.
img {
position: absolute;
top: 25px;
left: 25px;
}
.imgA1 {
z-index: 1;
}
.imgB1 {
z-index: 3;
}
<img class="imgA1" src="https://via.placeholder.com/200/333333">
<img class="imgB1" src="https://via.placeholder.com/100">
Source
Here's code that may give you ideas:
<style>
.containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; right: 0; }
</style>
<div class="containerdiv">
<img border="0" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt=""">
<img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="">
<div>
JSFiddle
I suspect that Espo's solution may be inconvenient because it requires you to position both images absolutely. You may want the first one to position itself in the flow.
Usually, there is a natural way to do that is CSS. You put position: relative on the container element, and then absolutely position children inside it. Unfortunately, you cannot put one image inside another. That's why I needed container div. Notice that I made it a float to make it autofit to its contents. Making it display: inline-block should theoretically work as well, but browser support is poor there.
EDIT: I deleted size attributes from the images to illustrate my point better. If you want the container image to have its default sizes and you don't know the size beforehand, you cannot use the background trick. If you do, it is a better way to go.
One issue I noticed that could cause errors is that in rrichter's answer, the code below:
<img src="b.jpg" style="position: absolute; top: 30; left: 70;"/>
should include the px units within the style eg.
<img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/>
Other than that, the answer worked fine. Thanks.
You can absolutely position pseudo elements relative to their parent element.
This gives you two extra layers to play with for every element - so positioning one image on top of another becomes easy - with minimal and semantic markup (no empty divs etc).
markup:
<div class="overlap"></div>
css:
.overlap
{
width: 100px;
height: 100px;
position: relative;
background-color: blue;
}
.overlap:after
{
content: '';
position: absolute;
width: 20px;
height: 20px;
top: 5px;
left: 5px;
background-color: red;
}
Here's a LIVE DEMO
It may be a little late but for this you can do:
HTML
<!-- html -->
<div class="images-wrapper">
<img src="images/1" alt="image 1" />
<img src="images/2" alt="image 2" />
<img src="images/3" alt="image 3" />
<img src="images/4" alt="image 4" />
</div>
SASS
// In _extra.scss
$maxImagesNumber: 5;
.images-wrapper {
img {
position: absolute;
padding: 5px;
border: solid black 1px;
}
#for $i from $maxImagesNumber through 1 {
:nth-child(#{ $i }) {
z-index: #{ $maxImagesNumber - ($i - 1) };
left: #{ ($i - 1) * 30 }px;
}
}
}
Inline style only for clarity here. Use a real CSS stylesheet.
<!-- First, your background image is a DIV with a background
image style applied, not a IMG tag. -->
<div style="background-image:url(YourBackgroundImage);">
<!-- Second, create a placeholder div to assist in positioning
the other images. This is relative to the background div. -->
<div style="position: relative; left: 0; top: 0;">
<!-- Now you can place your IMG tags, and position them relative
to the container we just made -->
<img src="YourForegroundImage" style="position: relative; top: 0; left: 0;"/>
</div>
</div>
The easy way to do it is to use background-image then just put an <img> in that element.
The other way to do is using css layers. There is a ton a resources available to help you with this, just search for css layers.
You could use CSS-Grid, which is a very convenient solution if you want to stack, overlap content. First you need to define your grid. Inside that grid, you "tell" your img-tags where to be places within that grid. If you define them to be at the same start of the grid, they will be overlapped. In the following example two images are overlapped, one is below them.
<div style="display: grid; grid-template-columns: [first-col] 100%; grid-template-rows: [first-row] 300px">
<img src="https://fakeimg.pl/300/" style="grid-column-start: first-col; grid-row-start: first-row">
<img src="https://fakeimg.pl/300/" style="grid-column-start: first-col; grid-row-start: first-row">
<img src="https://fakeimg.pl/300/">
</div>
You can find a very good explanation of CSS-Grid here.
Set background-size cover. Then wrap your div with another div now set max-width on parent div.
<div style="max-width:100px">
<div style="background-image:url('/image.png'); background-size: cover; height:100px; width:100px; "></div>
</div>
Here is a solution that worked for me. Assuming all the images to be stacked are inside a div container, all you need to do is to set the display property of the div to flex. Don't set any position for the first image but for every other image, set the position property to absolute. Finally, use z-index to control the layers. You can set the first image's z-index to 1, the second image's z-index to 2, and so on (In my own case, I set the z-index of every other image apart from the first image to 2). If you want to center the images, you can set the justify-content property of the div to center to align the images horizontally to the center and adjust the top property to align the images vertically to the center. The values you use for the justify-content and top properties depend on the size of your images and whether the sizes are responsive on different devices or not.
Here's my example:
img {
border: 2px solid red;
}
.img1n2 {
display: flex;
justify-content:center;
}
.img1 {
z-index: 1;
}
.img2 {
position: absolute;
z-index: 2;
top: 52.5%;
}
<div class="img1n2">
<img class="img1" src="https://fakeimg.pl/400/">
<img class="img2" src="https://fakeimg.pl/300/" width="100">
<img class="img2" src="https://fakeimg.pl/200/" width="50">
<img class="img2" src="https://fakeimg.pl/50/" width="30">
</div>
You can actually stack a thousand or a million images with this method. You can play around with the CSS to suit your specific needs. Happy coding!
#buti-oxa: Not to be pedantic, but your code is invalid. The HTML width and height attributes do not allow for units; you're likely thinking of the CSS width: and height: properties. You should also provide a content-type (text/css; see Espo's code) with the <style> tag.
<style type="text/css">
.containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; right: 0; }
</style>
<div class="containerdiv">
<img border="0" src="http://www.gravatar.com/avatar/" alt="" width="100" height="100">
<img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="" width="40" height="40">
<div>
Leaving px; in the width and height attributes might cause a rendering engine to balk.
Create a relative div that is placed in the flow of the page; place the base image first as relative so that the div knows how big it should be; place the overlays as absolutes relative to the upper left of the first image. The trick is to get the relatives and absolutes correct.