I have the following HTML for the outer div to centre and contain the back ground image. This works fine. I want to create a inner div relative to the image size to place the div in a black square in the image. the image size is 1783x1481 and the corners for the inner div should be TopLeft: 397,318 TopRight: 1140,318 BottomLeft: 397,903 BottomRight: 1140,903
I'm not sure how to approach this, do I use percentages? do I use view-height scaling?
#outer {
position: relative;
background-image: url(https://jrwr.io/terminal.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
height: 100vh;
margin-left: auto;
margin-right: auto;
display: block;
}
<div id="outer">
<div id="inner">Example Text here</div>
<div>
You can see a example of this issue at my website jrwr.io and/or from this video on imgur
If you want to scale the image with viewport without distorting it you can use aspect-ratio property:
* {
margin: 0;
padding: 0;
}
html,
body {
background-color: rgb(78, 3, 78);
overflow: hidden;
}
#outer {
position: relative;
background-color: rgb(78, 3, 78);
background-image: url(https://i.stack.imgur.com/QhkFU.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin: auto;
width: calc(min(100vw, 120vmin - 10px));
/* aspect ratio calculates the height */
aspect-ratio: 1.2/1;
}
#inner {
position: absolute;
top: 21%;
left: 22%;
width: 42%;
height: 40%;
background-color: black;
font: 2vmin monospace;
color: limegreen;
}
<div id="outer">
<div id="inner">
<br>
<p> Testing Terminal</p> > <span>ping www.google.com -t </span></div>
</div>
Here, width is set to calc(min(100vw, 120vmin - 10px)).
If viewport height(vh) > viewport width(vw), then vmin = vw, and 100vwwill be used and image height will be calculated automatically as per the aspect ratio (1783/1481=1.2).
If vh < vw then, vmin = vh. And width will be set to 120% of vh. -10px is used to avoid scroll bars. You can use overflow:hidden on body.
Is this what you are getting at? I built it with half the size so it would fit better in snippet but actual values are in there, just commented out.
.outer {
position: absolute;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
top: 0;
background-image: url("https://i.stack.imgur.com/cTRdU.jpg");
opacity: 1;
margin: 0 auto;
}
.inner {
background: black;
top: 20%;
left: 20%;
right: 20%;
bottom: 20%;
position: absolute;
border: 1px solid white;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
If you want to centre align the DIV then you can go for display: flex?
.outer {
display: flex;
align-items: center; // vertical center
justify-content: center; // horizontal center
}
https://stackblitz.com/edit/web-platform-vxi2dd
Related
I'm trying to fit a small image into a larger div.
html, body {
height: 100%;
width: 100%;
}
/*About Us Page*/
.bgimage {
width: 100%;
height: 100%;
position: relative;
}
img {
max-width:100%;
max-height:100%;
}
#aboutus {
width: 250px;
height: 250px;
background-color: rgb(82, 63, 51);
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
border-style: groove;
border-color: rgb(75, 58, 36);
border-width: 20px;
margin: auto;
}
<html>
<head>
<meta charset="UTF-8">
<title>The Hewitt's Den: About Us</title>
<style>
#aboutus {
text-align: center;
}
</style>
</head>
<body>
<div class="bgimage">
<div class="navi">
<img class="AboutUsPic" src="https://img.freepik.com/free-vector/gray-white-gradient-abstract-background_53876-60238.jpg?size=338&ext=jpg">
</div>
<div id="aboutus">
<h1>About Us:</h1>
</div>
</div>
</body>
</html>
The image is too small to fit into the div, I could manually change the size of the image, but I want it to automatically fit, to accommodate other screen sizes. If it's possible, maybe it could maintain it's width-height size, to avoid looking stretched or compressed.
For img elements use object-fit: cover and in your case like this:
img {
width: 100%;
/* max-width: 100%; */
max-height: 100%;
object-fit: cover;
}
object-fit only works if you make the img element capture the full dimensions first - full width of its parent div in this case.
Working codesandbox
CSS background-image
background-size: cover
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
You should use property width: 100% for image element like this:
img {
width: 100%
}
I know there are questions similar to this one, but none of them worked for me.
I have a div class with a background image:
#index-box{
border-radius: 20px;
background: url('/static/images/bg.png') no-repeat;
background-size: cover;
}
Is there any way to make the #index-box div class so high, that the whole background image fits in?
If you know the aspect ratio of the image you can put all in a container with percentage padding and relative position. then another box full width and height with absolute position for the content. For the below image the original size of the image is 1280X720, so the ratio height/width 0.5625:
#background {
position: relative;
padding-bottom: 56.25%;
background-image: url('https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg');
background-size: cover;
}
#content{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
<div id="background">
<div id="content">some content<div>
</div>
Also, with similar way you always can use the image as an img element. so you even not need to know the aspect-ratio. like that:
#container {
position: relative;
}
#bg {
width: 100%;
display: block;
}
#content{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
<div id="container">
<img id="bg" src="https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg"/>
<div id="content">some content</div>
</div>
try to apply this code:
#index-box{
border-radius: 20px;
background: url('/static/images/bg.png') no-repeat;
background-size: cover;
object-fit:cover;
}
or
body{
margin:0;
width:100%;
}
#index-box{
height:100%;
border-radius: 20px;
background: url('/static/images/bg.png') no-repeat;
background-size: cover;
background-position:center;
}
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,
I am trying to have my background image with a transparent overlay that's split into top and bottom.
Lastnight, in SO Chat, I tried to supply the guys with a JSFiddle, but after posting the code, JSFiddle wasn't able to reproduce the layout correctly. So here's what the desired effect should look like:
(note that this is hand drawn and so you can't see a background image):
You can see that the page should be split horizontally. The blue part should be 50% high and the white part should be 50% high. With a logo in the centre. However, when I add the background image, the white section is pushed down, like this:
(note you still can't see a background image, because it's hand drawn):
Adding a background image to the html element, body element or any child container causes the white div to either be cut off at its top or pushed down, leaving a gap between the bottom edge of the blue section and the top edge of the white section.
How can I get my background image to stop affecting the flow of the document? I didn't think that CSS background images affected layout?
Here is my code:
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Home | Hmmm</title>
<link rel="stylesheet" href="~/Shared/Assets/Stylesheets/Core.css" />
<link rel="stylesheet" href="~/Shared/Assets/Stylesheets/Home.css" />
</head>
<body>
<header>
<img id="key" src="~/Shared/Assets/Images/Icons/Kdfg.png" alt="Sign In | Create an Account" />
<img id="logo" src="~/Shared/Assets/Images/Logos/JdfgWLSS.png" alt="Hmmm" />
</header>
<div id="main">
<footer>
<p style="margin-top: 100px; text-align: center; color: white;">© Hmmm 2015</p>
</footer>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
outline: none;
outline: 0;
border: none;
border: 0;
font-family: 'Segoe UI Light', Tahoma, Geneva, Verdana, sans-serif;
}
html, body
{
width: 100%;
height: 100%;
overflow: hidden;
}
body
{
width: 100%;
height: 100%;
overflow: hidden;
background-image: url('../Images/Backgrounds/JWSSB.jpg');
background-repeat: no-repeat;
background-size: cover;
}
header
{
width: 100%;
height: 50%;
background-color: #2695D7;
opacity: 0.8;
}
#main
{
width: 100%;
height: 50%;
background-color: white;
opacity: 0.8;
}
#key
{
float: right;
}
#logo
{
text-align: center;
margin: 0 auto;
position: absolute;
right: calc(100% / 2 - 176px / 2);
bottom: calc(100% / 2 - 100px / 2);
}
#sections
{
width: 100%;
height: auto;
}
.section
{
width: calc(100% / 3);
height: auto;
float: left;
text-align: center;
font-size: 10pt;
}
I have discovered a workaround. I don't understand it, but it's alright for now:
Add a border to the top of the white section:
#main
{
height: 50%;
background-color: white;
opacity: 0.8;
border-top: 0.1px solid white;
z-index: -100;
}
Then, make the logo appear on top again by changing its z-index:
#logo
{
text-align: center;
margin: 0 auto;
position: absolute;
right: calc(100% / 2 - 176px / 2);
bottom: calc(100% / 2 - 100px / 2);
z-index: 1000;
}
I am not sure if this way will be okay for you, but still. Link to jsfiddle
html:
<div class='top'></div>
<img src='http://silvercreekart.weebly.com/uploads/3/7/3/0/37300503/9869404.png' class='logo'/>
<div class='bottom'></div>
css:
html, body {
height: 100%;
width: 100%;
}
.top {
background: cyan;
height: 50%;
}
.bottom {
background: grey;
height: 50%;
}
.logo {
position: absolute;
left: 50%;
top: 50%;
margin: -128px 0 0 -128px;
}
I like my way much more then using calc. It is better way if you know sizes of your logo (to put it in the middle with negative margin)
Change your CSS to:
body {
height: 100vh
overflow: hidden;
background-image: url(...image...);
background-repeat: no-repeat;
background-size: cover;
}
#main
{
width: 100%;
height: 50%;
background-color: white;
opacity: 0.8;
display: inline-block;
}
I have a page with two lines background.
One line is yellow and has a height: 65%, another line is gray and has a height:35%
And I have an absolutely positioned div in center with fixed width and height.
The gray lines is right under my div. The problem is, when I change the size of my page, or zoom out(to simulate big size screen) my div appears above gray background. If I set height of each background line to 50%, everything is good, but I need 65% and 35%.
Here's jsfiddle link: http://jsfiddle.net/J2LTR/
Try to zoom out on a page and the black square will go above the gray background.
Any ideas how to fix this?
Here's my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html, body {
padding: 0;
margin: 0;
height: 100%;
min-height: 100%
}
.yellow {
width: 100%;
height: 65%;
background: #e5bd00;
background-repeat: repeat;
}
.gray {
width: 100%;
height: 35%;
background: #d2d2d2;
background-repeat: repeat;
}
.wrap {
min-width: 300px;
width: 100%;
height: 100%;
min-height: 600px;
margin: 0 auto;
position: relative;
}
.center_box {
background: #000;
position: absolute;
top: 50%;
left: 50%;
margin-top: -120px;
margin-left: -200px;
width: 400px;
height: 235px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="yellow"></div>
<div class="gray"></div>
<div class="center_box">some content</div>
</div>
</body>
</html>
your value for top and margin-top are not correct, cause it is based on center and your boarder is down 65%.
try this instead:
.center_box {
background: #000;
position: absolute;
top: 65%;/* the tune you need to start with */
left: 50%;
margin-top: -235px;
margin-left: -200px;
width: 400px;
height: 235px;
}
http://jsfiddle.net/J2LTR/1/
You could even use a linear-gradient on body if you want to include only young browsers : http://codepen.io/anon/pen/EImiz