I don't have much knowledge about html and css and I couldn't find the answer on the internet so I am here.
Problem:
I am trying to make an image fill top part of the screen but one thing stops me from it and it's the default margin of the <body>. I've managed it by using margin: -10px; But now the image can't fill the screen by 20px, probably because there is no margin, image still thinks screen is that big.
html,body {
width: 100%;
height: 100%;
margin: -10px;
padding: 0;
overflow: hidden;
}
img {
width: 1600px;
height: 300px;
opacity: 70%;
object-fit: cover;
object-position: top 10px;
}
.cont {
position: relative;
text-align: center;
padding: 10px;
}
.main-text {
font-size: 100px;
color: white;
position: absolute;
top: 100px;
left: 70px;
}
<body>
<div class="cont">
<img src="https://i.stack.imgur.com/DWZAk.jpg">
<div class="main-text">Big Ass Title</div>
</div>
</body>
NOTE: If you have any questions or didn't understand anything about the question, please ask because I am ready for any answer. :) Thanks.
If your image is meant to be a decoration(design), then background is fine to use.
.cont can be a flex or grid element, to avoid position absolute and possible unwanted sides effects.
here an example with a background and grid:
body {
margin: 0;
min-height: 100vh; /* optionnal if it does not have a purpose */
}
.cont {
height: 300px; /* guessed from your code */
display: grid; /* default make a single column*/
background: url(https://picsum.photos/id/1015/600/300) 0 0 / cover; /* background covering */
}
.main-text {
margin-block: auto; /* vertical-centering in its row from here */
margin-inline-start:70px;
font-size: 100px; /* from your code */
color: white; /* from your code */
font-weight: normal; /* you looked for this? */
text-shadow: 0 0 1px #000; /*Optionnal increase readability*/
}
<div class="cont">
<h1 class="main-text">Big Ass Title</h1><!-- if that's a title, then make it a title ;) -->
</div>
Generally to eliminate all the margins and paddings you can add:
* {
margin: 0;
padding: 0;
}
By the way I attached a snippet where it's working as you requested. Is better to eliminate the margins than adding a negative margin, if you want to do it that way you must to compensate it in the width to achieve the 100% width intended.
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
img {
width: 100%;
margin: 0;
height: 300px;
opacity: 70%;
object-fit: cover;
}
.cont {
position: relative;
text-align: center;
}
.main-text {
font-size: 100px;
color: white;
position: absolute;
top: 100px;
left: 70px;
}
<html>
<body>
<div class="cont">
<img src="https://images2.alphacoders.com/941/thumb-1920-941898.jpg">
<div class="main-text">Big Ass Title</div>
</div>
</body>
</html>
Related
How do I stack images on bg-image exactly like this using html there is a navbar and logo on the BG as well
i tried something like this
// clearfix
.image-stack::after {
content: ' ';
display: table;
clear: both;
}
.image-stack__item--top {
float: left;
width: 66%;
margin-right: -100%;
padding-top: 15%; // arbitrary
position: relative;
z-index: 1;
}
.image-stack__item--bottom {
float: right;
width: 75%;
}
it didnt work as anticipated
enter image description here
There are many ways to approach this.
But first you need to understand
CSS Positioning, CSS Layout (Using Grid / FlexBox / Float, etc ) & CSS BoxModel.
So based on the snippet you posted, I am going with float, but I would have recommended flex as it's powerful and flexible.
Below is what I came up with.
/* USING MOBILE-FIRST APPROACH, I.E DEFINING CSS FOR MOBILE FIRST */
body {
padding: 0;
margin: 0;
font-family: sans-serif;
}
/* Will serve as container */
.image-stack {
position: relative;
}
.image-stack .bg {
position: absolute;
height: 100%;
width: 100%;
/* overlay-color */
background: black;
}
.image-stack .bg>img {
opacity: .75;
width: 100%;
height: 100%;
object-fit: cover;
}
/* will serve as row */
.image-stack .image-stack__item {
position: relative;
padding: 20px 10px;
height: 100%;
}
.col-half {
padding: 0 10px;
position: relative;
height: 100%;
}
.text-format {
color: white;
margin-bottom: 30px;
}
.text-format h1 {
font-size: 3rem;
font-weight: 700;
margin: 5px 0;
}
.img-overlap {
width: 100%;
height: 100%;
object-fit: cover;
}
/* RESPONSIVE CSS FOR BIG DEVICES */
#media screen and (min-width: 768px) {
.image-stack {
background: yellow;
/* height must be set in vh, px, rem, em */
height: 80vh;
margin-bottom: 60px;
}
.col-half {
/* SINCE WE ARE NOT USING `box-sizing: border-box` WE HAVE TO REMOVE THE LEFT AND RIGHT PADDING WE GIVE FROM MOBILE CSS = (20PX) FROM THE WIDTH */
width: calc(50% - 20px);
float: left;
}
.text-format {
margin-bottom: 0px;
}
.img-overlap {
position: absolute;
left: 0;
bottom: -30px;
}
}
<div class="image-stack">
<div class="bg">
<img src="https://picsum.photos/id/1045/1440/400">
</div>
<div class="image-stack__item">
<div class="col-half text-format">
<p>5th Consistent Award Winning Year!</p>
<h1>Modern Design Solutions</h1>
<p>A descriptive paragraph that tells clients how good you are and proves that you are the best choice.</p>
<p>A descriptive paragraph that tells clients how good you are and proves that you are the best choice.</p>
See our Projects
</div>
<div class="col-half">
<img src="https://picsum.photos/id/1008/600/400" class="img-overlap" alt="Overlapping Image" />
</div>
<!-- Notice Break that I used to clear float -->
<br clear="both" />
</div>
</div>
<div style="background: brown">
Other test
</div>
I added comments in the css section to guide you.
CodePen Link => https://jsfiddle.net/d5urpbL2/17/
I want something like this (the pink circle): CSS quarter circle 100vh example.
So far, I have a half-circle (see CSS below), but when I try to make it 100vh, it stretches and I can't figure out how to keep it proportional.
.circle {
height: 180px;
width: 90px;
border-radius: 0 90px 90px 0;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
background: red;
margin: 100px;
position: absolute;}
Any insights greatly appreciated. Thanks
I modified the code to only use 200vh to calculate both width and height of circle. This will give you a perfect circle at any screen size.
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100vw;height:100vh}
.box {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.box > .circle {
height: 200vh;
width: 200vh;
position: absolute;
bottom: -100vh;
right: -100vh;
border-radius: 50%;
background: hotpink;
}
<div class="box">
<div class="circle"></div>
</div>
You can do it like this:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100vw;height:100vh}
.box {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.box > .circle {
height: 200vh;
width: 125.5vw; /* if exactly 16:9 vw/vh aspect ratio */
position: absolute;
bottom: -100vh;
right: -56.250vw; /* if exactly 16:9 vw/vh aspect ratio */
border-radius: 50%;
background: hotpink;
}
<div class="box">
<div class="circle"></div>
</div>
Conclusion: This works perfectly if the screen viewport is exactly at 16:9 aspect ratio (see it inside the editor (not "Run code snippet") without Menu Bar & Bookmarks Toolbar but better to see it in full screen), anything else than that fails so I wouldn't recommend using viewport units for this task. If anyone can prove me wrong or do it better, go ahead.
And with px:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}
.box {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.box > .circle {
height: 180px;
width: 180px;
position: absolute;
bottom: -90px;
right: -90px;
border-radius: 50%;
background: hotpink;
}
<div class="box">
<div class="circle"></div>
</div>
you can start to keep the box into the ratio you want and center it when it doesn't fill the whole screen (=> downscaling to fit within the screen)
to size things, you can relay on %, vw,vh,vmax and or vmin units.
basicly you can start with size and max-size using the viewport as reference for the main box:
height:100%;
width:100%;
max-width:179vh;/* height viewport*/
max-height:56vw;/* width viewport*/
to align content you can use the flex display and margins and position.
To draw that 1/4 circle, you need a square that is at least the height of your box if it is to be drawn from border-radius. ( else a radial-gradient would do just fine).
for the vertical text, you may take a look at writing-mode.
A mix of CSS3 rules and positionning method can allow to do something that is about fluid.
Run the snippet below in fullpage and resize your window (heigh/width/both) your browser to see behavior.(or play with the codepen)
html {
height: 100%;
display: flex;
background: #ccc;
}
body {
margin: auto;
background: linear-gradient( to right, rgb(231, 231, 231) 25%, rgb(225, 207, 207) 25%);
height: 100%;
width: 100%;
max-width: 179vh;
max-height: 56vw;
display: flex;
align-items: center;
overflow: hidden;
position: relative;
box-shadow: 0 0 0 2px;
/* debug , see me */
}
/* make div be squares */
div:before {
content: "";
display: inline-block;
padding-top: 100%;
vertical-align: top;
}
.small {
border-radius: 50%;
background: rgb(101, 112, 168);
width: 25%;
margin-left: 13%;
box-shadow: 20vmin 20vmin 40vmin;
}
.big {
background: linear-gradient(to top, rgb(195, 90, 131), rgb(195, 90, 131)) no-repeat 0 0;
width: 56%;/* according to the ratio choosen */
border-top-left-radius: 100%;
flex-shrink: 0;/* avoid flex to shrink it */
margin: auto 0 0 auto;
}
/* position piece of text via absolute */
p {
margin: 0;
position: absolute;
bottom: 1%;
right: 5%;
font-size: 15vmin;
white-space: nowrap;
color: white;
}
p span {/* this rules might need to be tune to specific font-family*/
width: 0.25em;
display: inline-block;
vertical-align: -0.1em;
font-size: 0.155em;
writing-mode: vertical-lr;
transform: scale(-1);/*=> writing-mode:sideways-lr; not avalaible everywhere*/
}
h1,
body:before {
top: 0;
color: rgb(101, 112, 168);
position: absolute;
width: 5em;
font-size: 2vmin;
margin: 12vmin 0 5vmin 5vmin;
}
body:before {
content: "2017";
top: auto;
bottom: 0;
font-weight: bold;
}
h1:before {
content: "HB";
color: rgb(195, 90, 131);
border-radius: 50%;
position: absolute;
bottom: 150%;
font-size: 2.5em;
width: 0.75em;
height: 0.75em;
line-height: 0.75em;
letter-spacing: -0.35em;
border: solid 1px;
text-indent: -0.35em;
overflow: hidden;
}
<h1>VISUAL EXPLORATION</h1>
<p><span>BACK TO</span>BASIS</p>
<div class="small"></div>
<div class="big"></div>
By using the same view port unit for both height and width, you can achieve a perfect circle. Then putting it within a container which is fixed to the height of the view port and hiding the rest of the overflow will allow you to remove any unnecessary scroll bars and still allow for content below the circle.
The below demo will show the circle proportionally correct, always 100% of the view port height while making sure it is always a perfect circle.
It will obviously look better in full screen.
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
background: #dedede;
}
.dark {
background: #777777;
}
.circle {
width: 200vh;
height: 200vh;
border-radius: 100%;
position: absolute;
right: -100vh;
background: pink;
}
<div class="container">
<div class="circle"></div>
</div>
<div class="container dark">
</div>
The header of my blog shows the title with an image behind. I want that this image have it's own height until it gets bigger than 50vh (50% of user viewport).
But the normal behavior is the image be cropped from bottom and I want that the image be cropped from top and bottom (in other words: I want the image vertically centered).
I could do this with top: 50%; transform: translateY(-50%) but in that case img should be position: absolute and that would make the header always with the same height (since the image couldn't set the height of the element).
This is my code:
<div class="header">
<div class="date">
Posted 10 hours ago
</div>
<h1>Meet the all new Jaguar F-type</h1>
<img src="http://read.bi/2cMrdUI" />
</div>
On the following example, please resize jsfiddle width as much as you can. That will be easier to understand.
https://jsfiddle.net/jkc3L13g/
.header {
max-width: 100%;
position: relative;
overflow: hidden;
min-height: 150px;
max-height: 70vh;
.date {
z-index: 10;
position: absolute;
top: 0;
}
h1 {
position: absolute;
bottom: 0;
z-index: 10;
}
img {
width: 100%;
height: auto;
}
}
/* Just to style.. */
body { font-family: sans-serif; }
.header { color: white; text-shadow: black 0 1px 2px }
hr { margin: 2rem 0 ; }
code { font-size: 1.25rem; padding: 1px 2px; background: lightyellow; }
h1, .date { margin: 10px }
<div class="header">
<div class="date">
Posted 10 hours ago
</div>
<h1>Meet the all new Jaguar F-type</h1>
<img src="http://read.bi/2cMrdUI" />
</div>
<hr />
<p>
Resize window width as much as you can.
</p>
<p>
When <code>img</code> gets too big and <code>.header</code> starts limitating to <code>70vh</code>, <code>img</code> should "vertically centralize".
</p>
Instead of <img> tag, use the image as a CSS background image for .header, then set background-size: cover and background-position: center (this will align the image), but you also need to set a fixed height for .header.
This will look a bit different, hope it can help you.
background-image: url(http://read.bi/2cMrdUI);
background-size: cover;
background-position: center;
JSFiddle: https://jsfiddle.net/jkc3L13g/1/
.header {
max-width: 100%;
position: relative;
overflow: hidden;
min-height: 150px;
height: 70vh; /* fixed height */
background-image: url(http://read.bi/2cMrdUI);
background-size: cover;
background-position: center;
.date {
z-index: 10;
position: absolute;
top: 0;
}
h1 {
position: absolute;
bottom: 0;
z-index: 10;
}
img {
width: 100%;
height: auto;
}
}
/* Just to style.. */
body { font-family: sans-serif; }
.header { color: white; text-shadow: black 0 1px 2px }
hr { margin: 2rem 0 ; }
code { font-size: 1.25rem; padding: 1px 2px; background: lightyellow; }
h1, .date { margin: 10px }
<div class="header">
<div class="date">
Posted 10 hours ago
</div>
<h1>Meet the all new Jaguar F-type</h1>
</div>
<hr />
<p>
Resize window width as much as you can.
</p>
<p>
When <code>img</code> gets too big and <code>.header</code> starts limitating to <code>70vh</code>, <code>img</code> should "vertically centralize".
</p>
I'm trying to go with the css-only approach to this issue and not to use margin-left to move the <div class="fd"></div> from <div class="sb"></div>
I've ran out of the idea-fuel what to try. I've nested some wrappers and used different kinds of positionings (this is not a typo nor French, spell-checker excuse me) but nothing has worked out so far.
Issue: Making a fixed div as solid element, to accept the .fd element on it's right side.
.fd holds content which is going to exceed the height of the page.
.sb holds side-content which is going to remain as 100% in height.
See snippet for a clear example what I've been struggling with.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.sb {
height: 100%;
width: 300px;
background: blue;
position: fixed;
opacity: 0.5;
}
.fd {
min-height: 100%;
background-color: red;
display: inline; /* Won't apply to fixed? block will overlap everything */
}
<div class="sb"></div>
<div class="fd">
<p>Am I out in the open?</p>
</div>
Added an extra .wrap.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrap{
padding-left: 300px;
}
.sb {
height: 100%;
width: 300px;
background: blue;
margin-left: -300px;
position: fixed;
opacity: 0.5;
}
.fd {
min-height: 100%;
background-color: red;
display: inline; /* Won't apply to fixed? block will overlap everything */
}
<div class="wrap" id="wrap">
<div class="sb"></div>
<div class="fd">
<p>Am I out in the open?</p>
</div>
</div>
https://jsfiddle.net/afelixj/tb3pbam9/
I have a modal dialog for a workflow that displays content roughly of a fixed height, but also displays an embedded PDF for a user to review.
I'd like to maximize the height of the PDF for the user's screen size, so the dialog scales vertically, but I can't get the PDF to fill all the remaining space within the dialog's div.
Here is the Html:
<div class="container">
<div class="popUp">
<div class="popUpHeader">Header</div>
<div class="fixedContent">Fixed Height Content</div>
<div class="resizeableContent">I should fill all the free vertical space in .popUp</div>
<div class="popUpFooter">Footer</div>
</div>
</div>
and CSS I'm using:
body, html {
margin: 0;
height: 100%;
}
.container {
height: 100%;
min-height: 100%;
background: #F8F8FF;
}
.popUp {
background: lightgrey;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 70%;
height: 90%;
}
.popUpHeader {
width: 100%;
background: darkgrey;
text-align: center;
}
.popUpFooter {
width:100%;
background:darkgrey;
text-align:center;
position: absolute;
bottom: 0;
}
.fixedContent {
height: 10em;
text-align: center;
background: #E1E1EE;
}
.resizeableContent {
background: #7d7f7c;
text-align: center;
width: 100% height: 100%;
}
JsFiddle: http://jsfiddle.net/trainman1124/pnbeoyb9/2/
Here is an image of the desired result:
Edit
Here is a sample JsFiddle using an embedded PDF, which is what actually needs to be done.
http://jsfiddle.net/trainman1124/pnbeoyb9/3/
Note, I've corrected the missing semicolon in the example and also added overflow:hidden
You could use the display: table; and display: table-row properties in order to fill the space.
Set the .container to fill 100% of the page and .popUp div to display: table; and fill it's parent.
Display all the children as display: table-row;, and then set heights for the popUpHeader and popUpFooter divs.
Allow your resizableContent div to fill the remaining space:
.resizeableContent {
background: #7d7f7c;
width: 100% height: 100%;
display: table-row;
}
Check out this CodePen
Modify Popup class to make its color same as resiseableContent
.popUp {
background: #7d7f7c; /* Modified here */
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 70%;
height: 90%;
overflow: hidden;
}
Depending on what browsers you need to support (This wont work earlier than IE9), one solution would be to use calc and vh units.
Something like:
.popUp {
background: lightgrey;
margin: auto;
height: calc(100vh - 10em); /* Height of viewport minus your .fixedContent div, you may also want to include the height of the header */
overflow: hidden;
}
The updated fiddle has the heights set to % instead. That works as you want I think?
Update
http://jsfiddle.net/batcave/pnbeoyb9/7/
.popUpFooter {
width:100%;
background:darkgrey;
text-align:center;
position: absolute;
bottom: 0;
height: 7%;
}
.resizeableContent {
background: #7d7f7c;
text-align: center;
width: 100%;
height: 80%;
}
.fixedContent {
height: 10%;
text-align: center;
background: #E1E1EE;
}