I've a series of img of the same size, now I would like that these image are overlayed, one on the other. For this I've set the position of the image to absolute, but in this way the problem is that the container have not the right size because the image are absolute positioned...
Furthermore the images must be resizable according to the browser size
Someone know a solution for insert some images overlayed?
<html>
<head></head>
<body>
<div id="container">
<img src="image1" />
<img src="image2" />
<img src="image3" />
</div>
</body>
</html>
the div container must obtain the size of the 3 img, all img have the same size, and must be overlayed each other...
The trick is to set only one of them to be relative by using something like
#container img:first-of-type {
position:relative;
}
The relative image will set the size, and the absolute ones will just lay on top (or behind) even if you re-arrange the order.
I'd go for multiple images set in background-image css property.
CSS:
#container {
background-image: url('image1'), url('image2'), url('image3');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
/*background-size: cover; - alternatively, see the explanation below */
}
HTML:
<body>
<div id="container"></div>
</body>
Using background-size: cover|contain; ensures that the images will be properly scaled by the browser to always fit the actual dimensions of the #container.
How does background-size: cover; behave?
Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
How does background-size: contain; behave?
Scale the image to the largest size such that both its width and its height can fit inside the content area
References/further reading:
Multiple Backgrounds with CSS3
background-size property
Related
I want to put an image in background of the page and in of course it must be in a responsive way
this is the html code :
<div > title </div>
<img src="/assets/img/image1.jpeg" />
and the css :
img {
background-size: cover;
background-repeat: no-repeat;
}
Marshall's solution is better if you want the image to cover the whole viewing area.
Although it would not be in the background, using your <img/> tag it would be like this:
img {
width: 100%;
height: 100%;
}
<div> title </div>
<img src="https://picsum.photos/200/300" />
You want to set the background-image propierty of the body
body {
background-image: url("/assets/img/image1.jpeg");
background-size: cover;
background-repeat: no-repeat;
}
A background image for the page would be best placed on the body element — here's a simple example which uses the background shorthand:
body {
background: url('../relative/path/to/img/goes/here') no-repeat #paleblue;
}
Here, we've provided the image, an instruction that the image should not repeat (it will by default), and a 'fall-back' background colour — this is useful if, for example, the image fails to load.
There's more that can be done, here. See MDN for more details. Pay special attention to background-size, as you'll likely want to use either cover or contain depending on the image, screen size, etc. The spec for both is straightforward, but you can very easily swap one for another and back again in your code and see the (often obvious) effect each has.
you can add background property to which container you want the background img is, if its body or any other container, also add to your img width and height property otherwise it will go beyond the container, you should add 100% if you want to cover the whole container.
background-position:center center
The full image is not displayed properly, the bottom of the image is missing, how can I display the full image on screen? (dimensions: 5904 * 4000 px)
I tried with object fit but its not working:
* {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 100vh;
background: url("adult-blur.jpg") center center no-repeat;
background-size: cover;
overflow: hidden;
object-fit: cover;
object-position: bottom top;
}
I also shared a video of this problem in facebook: here
You cannot have both:
The image show fully
Have the image cover the entire background
Remember that the image is of a fixed ratio and most screens will have a different ratio than your image not to mention differences in the actual viewable area (viewport) because of the browser toolbars and OS toolbars.
Your options are:
Have the image always be full-width using width:100%. This risks having a part of the image cut off at that bottom if it is taller than the viewport or having some white-space at the bottom if the image is shorter than the viewport.
Have the image always be full-height using height: 100%. This risks having a part of the image cut off at the right side if it wider than the viewport or some whitespace if it is not as wide as the viewport.
Use backgorund-repeat to have the image repeated vertically or horizontally to cover any whitespace.
Most other options you can find in CSS do a combination of the above options, with some additions like centering the image where there is white-space.
Most designers select the images with this in mind, choosing images that don't have any important details near the edges, and thus still look good if a small section is cut off at any end.
Check out this code:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
#body-container {
width: 100%;
height: 100vh;
background: url("j.jpg") center center no-repeat;
background-size: cover;
overflow-y: scroll;
}
</style>
</head>
<body>
<div id="body-container">
<!-- Place your document contents here -->
</div>
<body>
</html>
Here we used bootstrap-4. Put all contents of document body inside div container. In styles, background-size is used to make our image 100% in width n height. If it image stretches absurdly, you can also try background-size: cover.
Finally, overflow-y property is used to make our div scrolls vertically
What I am trying to achieve is having multiple images stacked vertically on a website, so that an image will fill the entire screen.
What I hope for
1920x1080
1000x1080
The magenta is the active screen region. However, I just can't seem to only scale the height of the image. Only the width is scaling. The solutions I have found, break the aspect ratio and crushes the quality of the images used. I would rather scale the image a bit, than break the aspect ratio, therefore the weird scaling in 1000x1080
HTML
<div id="home">
<div>
<h1 id="welcomeHeaderOverlay">HermansenDesigns</h1>
<hr>
<h3 id="welcomeSubHeaderOverlay">Where code happens</h3>
</div>
<img class="img-scale" src="https://picsum.photos/1920/1080/?random" alt="placeholder+image" >
</div>
I have a few of these stacked
CSS
.img-scale {
background-size: cover !important;
height:100%;
}
Result
The image scales with the proper aspect ratio, however, it makes it full-sized 1920x1080, instead of 100% of the active screen region. And makes it so there is a horizontal scrolling.
The outcome is something like this
1905x1080
500x1080
I have tried various methods, from bootstrap with img-fluid and containers to various tutorials on full-sized background images. I have achieved a solution that works for a 1920x1080* browser, however, it scales horribly.
Sorry for the newbie question.
Is it even possible in pure css, or do i need some js or jquery?
Maybe you are looking for something like this:
body {
margin:0;
}
div {
height:100vh;
background-size:cover;
background-position:center center;
}
<div style="background-image:url('https://picsum.photos/1920/1080/?random')"></div>
<div style="background-image:url('https://picsum.photos/1920/1081/?random')"></div>
<div style="background-image:url('https://picsum.photos/1920/1082/?random')"></div>
this is only achieved through css, so instead of having and tag you can just have a div tag without the src attribute.
and then in the CSS
HTML
<div class="scale-img"></div>
CSS
.scale-img {
/* Set height to some high amount so you can see your image doing as you want*/
height: 5000px;
background-image: url("path/to/your/image1920x1080");
/* background-size: 1920px 1080px; */
/*
EDIT: A better approach would be to use contain for responsiveness
*/
background-size: contain;
background-repeat: repeat;
}
I have used a div-Container to insert a logo in it like this:
<div id="logo"></div>
The css looks like this:
#logo {
width: 333px;
height: 200px;
background-image: url("../img/logo1.png");
background-image: url("../img/logo0.svg");
}
However, when I try to rezise #logo (for example for devices with smaller screens), it does not resize the image being the background and the image is cut at the edges.
My question is: How to scale the .svg-image while the div-container is scaling?
Use background-size: contain;
Doc: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
contain
A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color. The image is automatically centered unless over-ridden by another property such as background-position.
html {
min-height:100%;
background:url(http://kompozer.sourceforge.net/images/logo/kpz08-chinon.svg) no-repeat;
background-size:contain;
}
this is a weird one because there are a lot of aspects out of my control. I'm working with a custom image carousel where the image is a background image and the containing div has a set width and height (these can't be changed) but things like background-position and background-size I can manipulate.
The problem comes from images of varying aspect ratios. If I just try manipulating the width and height, the image gets cropped. Trying something like:
background-size: 100%
will work with images that are wider, while:
background-size: auto 100%
works better for taller images.
background-size: cover
crops both sizes and in a perfect world I'd like to find a CSS only solution. Does anyone have any ideas on how to make images of both aspect ratios completely fit into the same sized div?
You're looking for the contain value:
contain
This keyword specifies that the background image should be
scaled to be as large as possible while ensuring both its dimensions
are less than or equal to the corresponding dimensions of the
background positioning area.
body > div {
height: 500px;
width: 500px;
}
.tall {
background: #F00 url(http://www.placehold.it/500X1000) center no-repeat;
background-size: contain;
}
.wide {
background: #F90 url(http://www.placehold.it/1000X500) center no-repeat;
background-size: contain;
}
<h2>I contain a tall image!</h2>
<div class="tall"></div>
<h2>I contain a wide image!</h2>
<div class="wide"></div>