As seen in the below screenshot
the viewport height is covered around 97% and not 100%. the next section can be seen. I am stuck with this issue for a couple of hours now, below is my css and html code
css
html, body {
width: 100%;
height: 100%;
}
.section-3 {
background: url(../images/section-3-bg.jpg) center center;
background-size: cover;
position: relative;
height:100vh;
}
HTML
<section class="section-3 col-xs-12" id="demand">
<section class="container">
<center>
<div id="trapezium"></div>
<h1 class="blue big-font">On Demand Charters</h1>
<img src="images/demand-border.png" alt="" class="img-responsive" style="width:auto;">
<div class="col-md-7 col-md-push-2">
<p class="medium-font">With Powerfly, access a range of aircraft from light
to large jets, turboprops and helicopters
either through on-demand charters. All you need to
do is book and a Powerfly executive will customise
your plan as per your needs.
</p>
<h2 class="explore-btn">Details</h2>
</div>
</center>
</section>
</section>
The real problem is the carousel!
#carousel-generic-1 {
margin-top: 0;
}
It works fine .. You didn't take a complete screenshot of the section but it actually take the place it should.
However, it cuts the button because of the height: 100vh;
Related
This question already has an answer here:
Make background image the size of screen
(1 answer)
Closed 5 years ago.
Ok, so my question is how do I make my image more responsive? I am a new coder, so I'm still trying to understand css more. I've tried using the contain value, but it doesn't cover the entire div. I also tried cover, but it doesn't show the entire image when it expands inside the div. If anybody has any ideas at all, I would love to hear from you. Thanks Also, it's not the same question as covering the entire page. I want the image to cover inside my div, and it doesn't seem to be working.
.tribute {
margin-top: 40px;
margin-left: 12%;
height: 250px;
width: 35%;
background: url(dickgregory.jpg);
background-size: cover;
float: left;
}
<div id="projects">
<br>
<br>
<h1 class="centerh1">Projects</h1>
<hr class="portfoliohr">
<a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
<div class="tribute">
</div>
</a>
</div>
Your image is taking up the full width and height of your .tribute element. The problem is that you've both added margin to the .tribute element, and restricted its width.
Removing the margins and setting width to 100% shows the image covering the full area as expected.
Note that background-size: cover may stretch or crop the image, and background-size: contain will resize the image to ensure that it is always visible.
This is best demonstrated with an example.
Contain:
.tribute {
height: 250px;
width: 100%;
background: url(http://placekitten.com/310);
background-size: contain;
float: left;
}
<div id="projects">
<br>
<br>
<h1 class="centerh1">Projects</h1>
<hr class="portfoliohr">
<a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
<div class="tribute">
</div>
</a>
</div>
Cover:
.tribute {
height: 250px;
width: 100%;
background: url(http://placekitten.com/310);
background-size: cover;
float: left;
}
<div id="projects">
<br>
<br>
<h1 class="centerh1">Projects</h1>
<hr class="portfoliohr">
<a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
<div class="tribute">
</div>
</a>
</div>
Hope this helps! :)
Unfortunately cover and contain are the best ways to handle an image that isn't the proportion you want. You could use an <img> tag instead of a div with a background image, if that would work for your use. Otherwise, I usually add a background color to the element that is similar to the image, so that it blends in better.
.tribute {
margin-top: 40px;
margin-left: 12%;
height: 250px;
width: 35%;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/7b/Dick_Gregory.jpg');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
background-color: #666;
float: left;
}
<div id="projects">
<br>
<br>
<h1 class="centerh1">Projects</h1>
<hr class="portfoliohr">
<a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
<div class="tribute">
</div>
</a>
</div>
before anything: No I don't mean centering an image inside a div
WHAT I WANT TO DO IS SIMILAR TO THE DESKTOP 'CENTER' OPTION HENCE THE TITLE PLEASE DON'T BE CONFUSED I JUST DON'T KNOW THE SUITABLE TERM OF WHAT I WANT
I am making a certian css template for my use, but I have this question that I couldn't figure out ..
basically, there is an image before each post, so the width is known. I set it to 100% of a container called "post". post has a width of 75% of the browser
<div class="post">
<h1>post title</h1>
<img class="post-img" src="myImg.png" />
<!--other elements-->
</div>
css:
.post {
width: 75%;
.post-img {
max-width: 100%;
}
Now to the problem ..
although the width now is fixed regardless of the image, the height is pretty much automatic
I want to set the height to a certain value, like max-height: 500px; for example .. so when a picture is big:
make width = 100% of the post div
is the height > 500px? no then make it auto. yes then crop the extra part
an image
as you can see, the black stroke is the limited width and height
the width was checked first so no extra parts to the left and right
the height is more than 500px, so it will be cropped and the viewed image would be the one inside the black frame
Like i said overflow:hidden; is the one you need
.container{
width: 700px;
}
.post {
width: 75%;
overflow:hidden;
border:2px solid #f63;
}
.post img{
max-width: 100%;
}
<div class="container">
<div class="post">
<h1>post title</h1>
<img class="post-img" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/adorable-cat.jpg" />
<!--other elements-->
</div>
</div>
What you are trying to achieve may be something like that, using background instead of <img>, so you have a much more simple control on the image :
.post {
width: 75%;
}
.container {
width: 100%;
height: 500px;
overflow: hidden;
background: url('https://s3-eu-west-1.amazonaws.com/hasselblad-masters/web-hi-res-content/X1D-Sample-Images/X1D5_B0001993.jpg') center no-repeat;
background-size: cover;
}
<div class="post">
<h1>post title</h1>
<div class="container">
</div>
<article>
<p>Other content</p>
</article>
</div>
I think what you need is to wrap your image in a container and set the maximum sizes and overflow:hidden; on that container
Something like:
<div class="post">
<h1>post title</h1>
<div class="img-container">
<img class="post-img" src="img.jpg" />
</div>
</div>
<style>
.post {
width: 75%;
}
.img-container {
max-width: 100%;
max-height: 100px;
overflow: hidden;
}
</style>
I have made a website in bootstrap but struggling with a height issue, on two columns.
On the contact page there is two columns below the map. The left is an image and right is some text, would love it if someone could help me get it so they respond at the same height. So the left and right column resize the same way before snapping to full width.
http://reraisedesign.com/contact-us.php
<div class="container-fluid" style="padding: 0; background: #fff;">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 con-img">
<img src="img/contact-us.jpg" width="100%"/>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 con-blurb">
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<h1>Say Hello</h1>
<span class="line-left"></span>
<p>We would like to just thank you for taking the time to visit our site, if you would like hear more about ReRaise feel free to give us a call or drop us an email. We would love to hear about any potential projects or queries you may have and will always aim to respond the same day.</p>
<p class="con-dets">0151 705 3414</br>
Send us an Email</p>
</div>
</div>
</div>
</div>
Here is the CSS to accompany the HTML
.con-blurb{
padding-top:100px;
padding-bottom:100px;
}
.con-img{
size:cover;
-webkit-size: cover;
-moz-size: cover;
-o-size: cover;
height: 100%;
}
.con-blurb h1{
text-align: left;
}
Try out this code:
.con-img img{
height: 100%;
max-width: 100%;
width: auto;
}
set the top margin property in .con-img class to margin-top:27px and set div including "say hello" margin-top:-106px
//code
.con-img{
margin-top:27px;
}
//div incluing say hello
.div{
margin-top:-106px;
}
Found a solution that didn't distort:
.con-blurb{
padding-top:100px;
}
.con-img img{
display: block;
max-width: 100vw;
background-size: cover;
height: 50vh;
object-fit: cover;
}
I'm trying to build an html template from a psd design and I started mobile first doing pretty good so far with one issue.
I have this image which I positioned absolute in order to achive this effect. ( Image attached)
The thing is now that I got the image working the button for the collapse menu is not working anymore and neither the brand link. What I'm assuming is that the menu and brand are behind the image and that might cause the problem but I tried z-index to get it up front and is still the same..
I have a container for the image which has a 250px height because I wanted the image to fill this.. I got it to fill the container but it looked squeezed and I didn't know how to fix it..
HTML:
<!-- start mobile-img -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="top-img-container">
<h1 class="img-caption">Bodybuilding is good for your health</h1>
<img class="img-fluid center-block top-img hidden-sm-up" src="images/slider-01.jpg" alt="Image">
</div>
</div>
</div>
</div>
<!-- end mobile-img -->
CSS:
.top-img-container{
padding-top: 60px;
height: 250px;
min-width: 100%;
position: relative;;
}
.top-img{
position: absolute;
top:0;
left: 0;
padding-top: 60px;
min-width: 100%;
}
Since object-fit has really bad browser support, and as you have a given height, do like this, where you use a div instead.
The background-image can of course be set in the CSS as well, though sometimes the resource gets set in the markup, hence showing that as one way, often missed when replacing an img with a div.
.top-img-container{
padding-top: 60px;
height: 250px;
min-width: 100%;
position: relative;;
}
.top-img{
height: 100%;
background-size: cover;
background-position: center;
}
<!-- start mobile-img -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="top-img-container">
<h1 class="img-caption">Bodybuilding is good for your health</h1>
<div class="img-fluid center-block top-img hidden-sm-up" style="background-image: url(http://f.tqn.com/y/bodybuilding/1/W/K/7/GettyImages-73539617.jpg)"></div>
</div>
</div>
</div>
</div>
<!-- end mobile-img -->
Just add
object-fit: cover;
to the css for the image, and get rid of the
position: absolute;
top:0;
left: 0;
I'm learning CSS at the moment and I am using it on a website to control the layout of the site.
I Have a number of containers, 5 of them, all on top of each other, I have a background for the page but I also want to use a background for one of the containers. So I used the 'background-image:url("");' tag to use a background, the I also used the attachment, repeat. The problem I was the image wasn't setting itself to the container, it was pushing out way past the dimensions that I had set in my CSS code which were height:312px; and width: 1000px;
Here is the CSS
html, body
{
margin-top: 25px;
padding: 0;
background-image:url("../../images/background.png");
background-repeat: none;
background-attachment: fixed;
}
.hidden
{
display: none;
}
#page-container
{
width: 1000px;
margin: auto;
background: transparent;
}
#header
{
height: 130px;
}
#content-top
{
background: #D9D9D9;
background-image:url("../images/pic.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position:right top;
height: 312px;
width: 1000px;
}
Here is the HTML:
<div id="page-container">
<div id="header">
<div id="flashContent">
</div>
</div>
<div id="content-top"><!--<img src="images/pic.png">--></div>
<div id="portfolio-container">
<div id="portfolio1"><p>1</p></div>
<div id="portfolio2">2</div>
<div id="portfolio3">3</div>
<div id="portfolio1"><p>4/p></div>
<div id="portfolio2">5</div>
<div id="portfolio3">5</div>
</div>
<div id="main-content">
main-content
</div>
<div id="footer">Footer</div>
</div>
I haven't pasted all of the CSS but its needed let me know.
Its as if the background is filling a space that is a lot bigger than the space specified.
Last time I needed to do something like this, I did the following:
#background{position:absolute; top:0; left:0; width:100%; max-width:1024; max-height:768; height:auto; z-index:-1; }
And then on my page I included the following:
<img id="background" src="whatever.jpg" alt="" title="" />
And that was it. This actually works quite nicely, with the background image magically resizing itself until one of the dimensions (width or height) reaches the maximum specified.
It doesn't need CSS3 support. Try it and see.
Obviously tweak the positioning stuff if you don't want it to fill the screen (I did).
You will have to set background-size to 100%
It only works in browsers supporting CSS3
Try float:left in #contentTop
Hope that helps!
In css you also have background-size:contain/cover