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;
Related
I'm working on a small site for a startup
the site works well on desktops, but I'm trying to make it more responsive
using the Bootstrap grid system, however I'm getting red grid lines
What am I doing wrong?
Screenshot
HTML and CSS code below
<section class="tds-banner">
<div class="overlay">
<div class="description">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12">
<h1>Fishing Club Studios</h1>
</div>
</div>
<div class="row">
<div class="col--xs-12 col-sm-12">
<h5>We Make food and We drinks</h5>
</div>
</div>
<div class="row">
<div class="col-6">
Food
</div>
<div class="col-6">
Drinks
</div>
</div>
</div>
</div>
</section>
<style>
<!--CSS-->
#media only screen and (min-device-width: 300px) {
.tds-banner .overlay{
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background-image:url('/static /talking_drumstudios_logo_360.png');
background-attachment: fixed;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.description {
font-size: 20px;
border: none
}
}
</style>
When you find this kind of issues with borders using frameworks to override, inspect the element and try properties like:
border: none;
box-shadow: none;
outline: none;
About your text issues, I don't have access to your code but you probably have:
Reduce the padding on the container or margin on the divs, that's
why you have all this white space on top and left.
Or I see that you're using position absolute in some cases, try using to the minimum otherwise you'll have more work trying to do the responsiveness.
From your screenshot, it seems like you have assigned border to row or column class, try this CSS code:
.row,col-*{
border-width:0px;
}
I am trying to put my background behind the div that contains a jumbotron, but the div keeps on staying below the background image, instead of appearing on it. How do I fix this?
P.S : I do not want to put the background image in my CSS file for some reasons, so i want the image src to only be in my HTML. Many thanks!
Here is my code :
<div class="container-fluid" >
<img src='U_Thant_PIC_3.jpg'
width='1400px' height='800px'/>
<div class="jumbotron jumbotron-fluid">
<center>
<h2 class="a">Cats are cool</h2>
</center>
</div>
</div>
In order to achieve this you need to tell the browser to position the img element behind your child div. For the purpose you can use the position attribute, with the img having a lower z-index.
The z-index does work for this, as long as you have position properties on the elements:
div.container-fluid{position:relative;}
div.container-fluid img{position:absolute;top:0;left:0;z-index:1}
div.container-fluid div.jumbotron{position:relative;z-index:5;color:white;}
<div class="container-fluid" >
<img src='https://www.w3schools.com/css/img_lights.jpg'
width='1400px' height='800px'/>
<div class="jumbotron jumbotron-fluid">
<center>
<h2 class="a">Cats are cool</h2>
</center>
</div>
</div>
Try this;
HTML
<div class="container-fluid">
<img src="U_Thant_PIC_3.jpg" alt="Snow" width='1400px' height='800px'>
<div class="jumbotron jumbotron-fluid">
<h2 class="a">Cats are cool
</div>
</div>
CSS
.jumbotron {
position: absolute;
left: 50%;
}
It will give you centered text on top of your image.
Add position: absolute; into the class="jumbotron jumbotron-fluid", and move your <img src='U_Thant_PIC_3.jpg' width='1400px' height='800px'/> to the bottom of code.
.box {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
}
.jumbotron {
color: white;
position: absolute;
}
<div class="box">
<div class="jumbotron">
textbox
</div>
<img src="https://www.w3schools.com/css/img_lights.jpg">
</div>
You need set up first the parent element with position: relative; in this case you should add the css below.
.container-fluid { position:relative }
and then you need to set up the jumbotron with the next style.
.jumbotron { position: absolute }
with this should be work, also you can move the .jumbotron with the top, bottom, left and right positions, for example:
.jumbotron { position: absolute; top: 20px; left: 10px; }
In this way .jumbotron will move in the area with the first position: relative; taken. In this case in the area of .container-fluid class.
<div class="container-fluid" >
<img src='https://www.w3schools.com/css/img_lights.jpg'
width='1400px' height='800px'/>
<div class="jumbotron jumbotron-fluid">
<center>
<h2 class="a">Cats are cool</h2>
</center>
</div>
</div>
Here I give you and example:
https://jsfiddle.net/mnL8cvf2/2/
Hope this can help you.
I am trying to build an image-focussed page, where all images resize flexibly within fixed-sized containers. The containers are set up in two rows; the first are three 4-spaced columns each with an image (following bootstrap), and the second row is a 12-spaced column, filled with one image.
Ideally, I want them to show this behavior:
- If they are wider than the container, I want the image to be resized and centered, until the image border meets the container either heightwise or widthwise. Any corresponding spillover will be cut-off.
Overflow already cuts them off; align-self should center them; object-fit covers the image; but I don't know how to make it behave the way as I described above.
Thanks very much for having read this far, and thank you even more if you are willing to help me out ^^
The website
Code:
.img-responsive {
width: auto;
margin-left: auto;
margin-right: auto;
display: block;
position: relative;
align-self: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
}
.col-4 {
min-height: 20px;
max-height: 300px;
padding: 0;
overflow: hidden;
}
.col-12 {
min-height: 150px;
max-height: 300px;
padding: 0;
overflow: hidden;
}
<section>
<div class="container-fluid">
<div class="row">
<div class="col-4 hoveropacity">
<img class="img-responsive" src="https://vietnamtravel.guide/wp-content/uploads/2015/04/Banh-Mi-Vietnam.jpg" );>
</div>
<div class="col-4 hoveropacity">
<img class="img-responsive" src="https://s.iha.com/00125194526/Hanoi-municipality-Street-market-in-hanoi.jpeg" );>
</div>
<div class="col-4 hoveropacity">
<img class="img-responsive" src="https://i.pinimg.com/736x/da/86/35/da863581a7524e3260b6ba75a8b08cdb--vietnamese-iced-coffee-coffee-latte.jpg" );>
</div>
</div>
</div>
</section>
<section>
<div class="container-fluid">
<div class="row">
<div class="col-12 hoveropacity">
<img class="img-responsive" src="https://www.vietnamtravelblog.info/wp-content/uploads/2011/05/Vietnam.jpg" );>
</div>
</div>
</div>
</section>
NB: I did look around for answers already given, but I couldn't quite find an answer that worked for me. Please forgive any oversight on my part.
Solved! Thanks to #Kangouroops
Added
object-fit: contain;
width: 100%;
height: 100%;
I have been following Keith Clark's guide to CSS Parallax. His concept it like so:
HTML:
<div class="container”>
<div class="parallax-child”></div>
</div>
CSS:
.container {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
perspective: 1px;
perspective-origin: 0 0;
}
.parallax-child {
transform-origin: 0 0;
transform: translateZ(-2px) scale(3);
}
This works perfect for the most part, for example on my development website. However I need to add this effect to another website where I can't control the HTML structure much at all, below is the basic structure tree, added comments to where I can edit.
<html>
<body>
<div itemscope itemtype="http://schema.org/AutoDealer">
<div id="main-wrap">
<div class="row">
<div class="main twelvecol">
<!-- Editable -->
<div>
<div class="row-block finance parallax__group">
<div class="parallax__layer--back parallax__layer">
<p>Content in here scrolls slower than everything else</p>
</div>
<div class="wrapper">
<div class="container">
<div class="parallax__layer--base parallax__layer">
<p>This is all of the top level content</p>
</div>
</div>
</div>
</div>
</div>
<!-- END Editable -->
</div>
</div>
</div>
</div>
</body>
</html>
I can add any styles I want, just can't edit the HTML structure apart from where stated in the comments.
My issue is I can't seem to get the parallax effect to work, if I put the example container styles for the parallax effect (at the top of this post) on the body the parallax effect works...
From what I have read I would need to add the transform-style: preserve-3d; style onto elements between the container and the children, however this doesn't appear to work.
Anyone know what's going wrong?
Edit:
Codepen of the working CSS on the body.
Codepen of the non-working CSS on the HTML.
Edit:
Due to more complications with fixed positions and detecting body scroll (not possible it seems), I really need to get this working by using the HTML element.
What is strange, is that is sort of works. Follow this link and click and drag the slider left/right, the parallax effect is there, just not when you scroll down...
Not too sure why this effect doesn't work when you scroll down...
Guessing no one knows the answer to this, so thought I may as well post what I did.
It appears that you simply can't use the HTML tag for this Parallax effect, so I have just put the effect on a containing div, so then for things functions such as sticky headers I can simply check for the scroll amount on this div and set anything sticky to position: sticky.
Sticky doesn't work on Edge or IE so a fall back would be just to completely disable the parallax effect on these browsers and give the scrolling back to the HTML element so you can use position: fixed.
Fallback:
#supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch)) and ((position: sticky))) {
Not sure if I quite understood your problem, but why don't you ignore the body/HTML and just map it to your own editable elements.
See working example
.body {
perspective: 1px;
height: 100vh !important;
overflow-x: hidden;
overflow-y: auto;
preserve-origin-x: 100%;
}
.body > div { height: 200%; }
p { color: #fff; }
.parallax__group {
position: relative;
// transform-style: preserve-3d;
overflow: hidden;
height: 300px;
margin-top: 100px;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer--base {
transform: translateZ(0);
position: relative;
float: left;
}
.parallax__layer--back {
transform: translateZ(-1px) scale(2);
height: 100vh;
background-image: url('https://static.pexels.com/photos/173383/pexels-photo-173383.jpeg');
background-size: cover;
background-position: center center;
}
.row-block {
background: red;
}
<html>
<body>
<div itemscope itemtype="http://schema.org/AutoDealer">
<div id="main-wrap">
<div class="row">
<div class="main twelvecol">
<!-- Editable -->
<div class="body">
<div>
<div class="row-block finance parallax__group">
<div class="parallax__layer--back parallax__layer"></div>
<div class="wrapper">
<div class="container">
<div class="parallax__layer--base parallax__layer">
<p>This is all of the top level content</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END Editable -->
</div>
</div>
</div>
</div>
</body>
</html>
It uses the same CSS of the version you claimed as "working". The only change I made is changing your body for a .body which is an additional div wrapper. This way, it is only touching elements you own / can edit.
I'm using bootstrap and right now I have a banner image below my navbar with a title header over it. It works fine but now I'm not sure how to get content below my image. For example, the content div is overlapping the image and not going below it like a block element.
Do I need to use an img tag instead of using the css background property?
HTML
<nav class="navbar navbar-default" role="navigation">
...
</nav>
<div class="img-banner">
</div>
<div class="container">
<h1>TITLE</h1>
<div class="content">
<p>new section/block of text</p>
</div>
</div>
CSS
.img-banner {
height: 800px;
background: url('../img/background.jpg') no-repeat;
background-size: cover;
background-attachment: fixed;
position: absolute;
width: 100%;
top: 0;
z-index: -1;
}
Try position:relative instead of position:absolute for the img-banner. I think this is the fix.