I have 2 images (both 3000px x 3000px) and I have one as background and one in front of it (frontal one will rotate).
Problem now is that I always start at top/left corner (0px x 0px)...I want to start at 1500px from left and 1500px from top (=center of the image), so without overflow:hidden, you can see the x/y scrollbars centered (vertical/horizontal).
Is there some way to achieve this effect?
html,
body {
position: relative;
background: url(stripes.jpg) no-repeat;
background-position: center;
margin: 0;
padding: 0;
width: 3000px;
height: 3000px;
overflow: hidden;
}
.stars{
position: absolute;
width: 3000px;
height: 3000px;
border: 2px solid red;
z-index: 99;
background: url(squares.jpg) no-repeat center;
}
these (bad) images will give you some understanding of the wanted effect
Try this:
#container {
position: absolute;
width: 100vw;
height: 100vh;
overflow: hidden;
}
#image {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
Related
I'm planning to position some DIVs on top of a background image but it doesn't seem to work well. The positions of the DIVs changes when the screen size change. Media Query is not the solution. Any help?
HTML
<div class="div-bg" style="background-image:url('https://image.ibb.co/f1qio5/insights_indiamap.jpg')">
<div class="cities Delhi"></div>
<div class="cities Bangalore"></div>
</div>
CSS:
.div-bg {
height: 85vh;
min-height: 500px;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
}
.cities {
border: 1px solid red;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: red;
}
.cities.Delhi {
position: absolute;
top: 150px;
left: 175px;
}
.cities.Bangalore {
position: absolute;
top: 250px;
left: 275px;
}
JSFIDDLE DEMO
if you set a fixed width to container
.div-bg{ width:700px;}
will fix your issue
The position of the red dots is not changing, the position of the background image inside of div-bg is what is changing. Inspect that div while resizing and you will see. One way to keep this from happening would be to give the div a fixed width and height. Check out update fiddle.
width: 500px;
.div-bg{
width:555px;
}
add this CSS to your code.
For the image dimensions, use vmin units, the will adapt gracefully to the viewport dimension.
And set the position of the cities in percentage
.div-bg {
height: 100vmin;
width: 100vmin;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
}
.cities {
border: 1px solid red;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: red;
}
.cities.Delhi {
position: absolute;
top: 27%;
left: 30%;
}
.cities.Bangalore {
position: absolute;
top: 85%;
left: 33%;
}
<div class="div-bg" style="background-image:url('https://image.ibb.co/f1qio5/insights_indiamap.jpg')">
<div class="cities Delhi"></div>
<div class="cities Bangalore"></div>
</div>
I have a container of a given size, and I have an image inside it. I want the image to expand to either 100% height or 100% width, depending on whichever comes last, and I want it to keep its aspect ratio, so anything sticking on over the container is cropped off. If it's cropped on the sides, I'd also like it to be centered.
So to be clear, if it's a very wide picture, it would have height: 100%, and if it's a very tall picture, it would have width: 100%.
For example, here's the container and the image, with is neither sized correctly, nor centered:
https://jsfiddle.net/y5px1ch9/1/
<div class="wrapper">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/S%C3%A4ugende_H%C3%BCndin.JPG/800px-S%C3%A4ugende_H%C3%BCndin.JPG" class="picture">
</div>
.wrapper {
position: relative;
left: 40%;
width: 100px;
height: 200px;
border: 1px black solid;
overflow: hidden;
text-align: center;
}
.picture {
position: relative;
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
margin: auto;
left: 0;
right: 0;
background-position: center;
}
Anyone know if this is possible to do with CSS?
Since you have a fixed size wrapper, and as object-fit does not have that good browser support, I suggest you use background/background-size on the wrapper
Now, by setting its position, you control where it should get cropped. In below sample I used left top, which means it crops at right/bottom, and in your case, you might want center center, which will crop equally top/bottom or left/right, based on which of the two overflows.
Updated based on a comment
One can also set the image source in the markup, just how one do with the img, here done by setting background-image: url() inline.
.wrapper {
position: relative;
left: 40%;
width: 100px;
height: 200px;
border: 1px black solid;
overflow: hidden;
text-align: center;
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
}
<div class="wrapper" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/S%C3%A4ugende_H%C3%BCndin.JPG/800px-S%C3%A4ugende_H%C3%BCndin.JPG)">
</div>
And here is the version using object-fit
.wrapper {
position: relative;
left: 40%;
width: 100px;
height: 200px;
border: 1px black solid;
overflow: hidden;
text-align: center;
}
.picture {
position: relative;
height: 100%;
width: 100%;
object-fit: cover;
object-position: left top;
}
<div class="wrapper">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/S%C3%A4ugende_H%C3%BCndin.JPG/800px-S%C3%A4ugende_H%C3%BCndin.JPG" class="picture">
</div>
It is possible but you have to know the aspect ratio beforehand, knowing this you can reserve space for the image
div {
width: 100%;
overflow:hidden;
position:relative;
}
div::after {
padding-top: 56.25%; /* percentage of containing block _width_ */
display: block;
content: '';
}
div img {
display: block;
width:100%;
height:auto;
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
<div>
<img src="https://placehold.it/200x300"/>
</div>
The main trick is the padding-top: 56.25%;... the aspect ratio
If you define the image as a background-image, then you can use background-size: contain - this does what you want:
.wrapper {
position: relative;
left: 40%;
width: 100px;
height: 200px;
border: 1px black solid;
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/S%C3%A4ugende_H%C3%BCndin.JPG/800px-S%C3%A4ugende_H%C3%BCndin.JPG) no-repeat center center;
background-size: contain;
}
<div class="wrapper">
</div>
try this
vertical
.picture {
position: relative;
height: 100%;
width: auto;
margin: auto;
left: 0;
right: 0;
background-position: center;
}
horizontal
.picture {
position: relative;
width: 100%;
height: auto;
margin: auto;
left: 0;
right: 0;
background-position: center;
}
jsfiddle horizontal case
jsfiddle vertical case
please add height property auto and image width in percentage %, in this property you can manage aspect ratio,
width:50%,
height:auto,
This is my problem, I have two <div> exactly the same, one above the other, when I write something I the one that's behind the other one. The "forward" <div> moves down. (not easy to explain sorry)
Here example:
<div class="box1">TEXT THAT DEFORM box11 <div class="box11"></div></div>
And the CSS:
.box1
{
width: 90%;
height: 16vh;
background-color: #fff;
margin: auto;
border: 1px solid #ddd;
}
.box11
{
width: 100%;
height: 100%;
background-color: #eee;
opacity: 1;
background-image: url(../medias/box1.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 70% 50%;
}
Thanks
IMAGES
This is what I want:
And this is what happen when I write on the first DIV:
This is how you need to do, you set the parent (box1) to position: relative and the child (box11) to position: absolute. This way it doesn't get affected by the text written in the parent as it is taken out of the flow and as such float on top of its content.
To keep the position: absolute child related to its parent, the parent also needs to have positioning other than static, in this case I used relative.
.box1
{
position: relative;
width: 90%;
height: 16vh;
background-color: #fff;
margin: auto;
border: 1px solid #ddd;
}
.box11
{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #eee;
opacity: 1;
background-image: url(../medias/box1.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 70% 50%;
}
<div class="box1">TEXT THAT DEFORM box11 <div class="box11"></div></div>
I have an img in a div set as a background with the following css:
#div1{
background: url(../img/img1.jpg);
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
position: fixed;
z-index:-100;
}
This div dispalys the img perfectly in the center of the screen.
My second div with text has the following css:
#div2 {
min-height: 200px;
background: black;
opacity: 0.9;
width: 100%;
z-index: -1;
position: relative;
top: 494px;
}
The divs display fine on my PC. However when I open the site on my mobile, the div with the text does not display. After zooming out you can see that the div is underneath the div with the img. Why is this so since the z-indexes are given and what can I do to change this?
Just increase the z-index value to positive.
#div2 {
min-height: 200px;
background: black;
opacity: 0.9;
width: 100%;
z-index: 999;
position: relative;
top: 494px;
}
I am trying to create a div that is covers the browser window diagonally. See example here:
This is my CSS:
.shape {
height: 100%;
width: 150%;
transform: rotate(25deg);
}
This is my actual result:
I've tried a bunch of different things using transformOrigin and setting top and left of the div, but nothing seems to work to have this div centered diagonally across the browser.
You need to add these: transform-origin: center;
Also when width is more than 100% you need to move content its centered before rotate. Like Position: absolute; left: -25%;
body {
padding: 0px;
margin: 0px;
}
.frame {
width: 100vw;
height: 100vh;
background: #EFEFEF;
}
.rotated {
position: absolute;
left: -25%;
width: 150%;
height: 100%;
border: 2px solid blue;
transform: rotate(25deg);
transform-origin: center;
}
<div class='frame'>
<div class='rotated'></div>
</div>