please i'm trying to use horizontal overflow using css , if i use just images i get the horizontal scroll this how i use it with images
<div class="d-flex overflow-hidden overflow-scroll-x ">
<img
class="max-width-200 "
src="../../../../assets/images/Creditrd.svg"
/>
<img
class="max-width-200 "
src="../../../../assets/images/Creditard.svg"
/>
</div>
if i use background images i dont get anything here's how i do it
<div class="d-flex overflow-hidden overflow-scroll-x">
<div class="account-wallet-imag max-width-200 border-radius-16">
heheh
</div>
<div class="account-wallet-imag max-width-200 border-radius-16">
eheehhh
</div>
</div>
this is my css
.account-wallet-imag {
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
width: 100%;
height: 100%;
background-image: url("#/assets/images/card.png");
}
please how can i go about this
Related
I have a background image that is not staying within its div and will overflow into other contents. The background image div is on the same z-index and is nested within the background gradient div which contains the navbar and CTA section. I have tried just adding the background image to the same css class as the background gradient, but that has caused other issues to arise since I cannot resize it to how large it is supposed to be so I am just using the method I stated above. Can someone please help me with this? link to code sandbox is here codesandbox
what its doing:
what it needs to look like:
code below:
import styles from './style';
import { Navbar, CTA, BodyTop, BodyBottom, BodyMiddle, Footer } from './components';
const App = () => (
<div className='w-full overflow-hidden'>
<div className='bg-cta-gradient z-[0] h-[450px]'>
<div className={`flex-col h-[450px] relative overflow-hidden ${styles.paddingX} ${styles.flexCenter}`}>
<div className="background-img z-[-0] absolute overflow-hidden "></div>
<div className={`mt-5 margin-bottom absolute z-[2] ${styles.boxWidth}`}>
<Navbar />
</div>
<div className={`z-[0] ${styles.boxWidth}`}>
<CTA />
</div>
</div>
</div>
<div className={`bg-bodyColor z-[2] ${styles.flexStart}`}>
<div className={`${styles.boxWidth}`}>
<BodyTop />
<BodyMiddle />
<BodyBottom />
<Footer />
</div>
</div>
</div>
);
export default App;
code for css:
#media screen and (max-width: 760px) {
.bg-cta-gradient {
background: linear-gradient(hsl(13, 100%, 72%), hsl(353, 100%, 62%));
border-radius: 0px 0px 0px 70px;
}
.background-img {
background-image: url('./assets/bg-pattern-intro-mobile.svg') !important;
background-repeat: no-repeat;
background-size: contain;
width: 1300px;
height: 1300px;
overflow: hidden;
margin-left: 200px;
margin-top: 250px;
}
It seems that the container of this section is not having a border radius matching the shape of the left bottom corner.
That mismatched corner is causing the background image to overflow when on a smaller screen width.
Here is a quick fix that could be tried for this issue: (live demo: codesandbox)
Add a fix class to the CSS in index.css:
/* if it works, change the class name to a proper one later */
.fix-bg-img {
border-radius: 0px 0px 0px 70px;
}
Add the fix class to the said container in App.jsx:
import styles from "./style";
import {
Navbar,
CTA,
BodyTop,
BodyBottom,
BodyMiddle,
Footer,
} from "./components";
const App = () => (
<div className="w-full overflow-hidden">
<div className="bg-cta-gradient z-[0] h-[450px]">
<div
// Add the fix here 👇
className={`fix-bg-img flex-col h-[450px] relative overflow-hidden ${styles.paddingX} ${styles.flexCenter}`}
>
<div className="background-img z-[-0] absolute overflow-hidden "></div>
<div className={`mt-5 margin-bottom absolute z-[2] ${styles.boxWidth}`}>
<Navbar />
</div>
<div className={`z-[0] ${styles.boxWidth}`}>
<CTA />
</div>
</div>
</div>
<div className={`bg-bodyColor z-[2] ${styles.flexStart}`}>
<div className={`${styles.boxWidth}`}>
<BodyTop />
<BodyMiddle />
<BodyBottom />
<Footer />
</div>
</div>
</div>
);
export default App;
Hope this will help.
I'm struggling to fit the background image to the parent div if the screen size getting wider.
If screen size for mobile, the result is correct what I expect. But if the screen size getting wider the background image will cut off by the parent element.
While for desktop screen, the background image will cut off by parent element:
So far my code like this:
index.html
<div id="hero">
<div className="weekend">
<h1 className="text-center">WEEKEND FROM HOME</h1>
<h6 className="text-center">Stay active with a little workout.</h6>
</div>
<div className="position-relative text-center d-flex justify-content-center">
<img src={robot} alt="" />
<button className="btn btn-light lets-go text-center">
Let's Go
</button>
</div>
</div>
style.css
#hero {
background-image: url("../../assets/shapes/bg-1.svg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: var(--pinky-50);
padding-top: 134px;
padding-bottom: 20px;
padding-left: 24px;
padding-right: 23px;
}
So far my solution is adjust padding and height for different screen size but it's not best practice, because sometime i missed for several screen size.
info: resolution of background image is 1366px x 732px
I am using a full background image in my div, but when resizing the window it is not resizing properly from left and right, I do not want to use position:fixed because it is creating issues for me.
Kindly help, how can I fix this issue, the image should resize perfectly as per window size (resize).
<div class="row">
<div class="container-fluid">
<div class="col-md-3"></div>
<div class="col-md-9">
<div class="loginbg"></div>
</div>
</div>
</div>
**css:**
.loginbg{
background: url("../../images/TalexAuthbg3.jpg") no-repeat center top;
z-index: 0;
background-size: cover;
height:100vh;
background-position:100%;
}
I want to render a full background image within the .loginbg div but it is not rendering properly.
You can use background-size: contain if you want the full image to show at every window size, because of background-size: cover crops the image to fit the window size without disturbing its aspect ratio.
.loginbg{
background: url("https://longstoryshortdesign.co.uk/wp-content/uploads/2017/03/mc-saatchi-hero-home.jpg") no-repeat center top;
z-index: 0;
background-size: contain;
height:100vh;
}
<div class="row">
<div class="container-fluid">
<div class="col-md-3"></div>
<div class="col-md-9">
<div class="loginbg"></div>
</div>
</div>
</div>
I've been given a design that I'm having a lot of trouble building as a responsive site.
I'd like the image to extend to the edge of the browser window, so I've placed it as a background image in the fluid container, with a spacer image. The problem is that once we go mobile, the background image will appear beneath the copy above.
I've tried several other versions of this layout, and nothing works. Hoping someone has a suggestion.
Here's a rough markup.
.test {
background-image: url(http://placehold.it/1600x500 );
background-repeat: no-repeat;
background-position: 50% bottom;
background-size: cover;
padding: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid test">
<div class="container">
<div class="row">
<div class="col-md-6" style="background-color: blue;">left col</div>
<div class="col-md-6"><img src="http://placehold.it/20x500/b0b0b0" alt="spacer"></div>
</div>
</div>
</div>
one way to achieve the responsive effect is to change the background-size accordingly to match the new visualization. That way you can alter from 50% 100% for the desktop version where it's right aligned and to 100% 50% on the mobile version where it fills half the height of the component.
As an example I've created this jsFiddle demo, that goes like this:
The html is pretty much the same:
<div class="container bg-pink">
<div class="row half-bg">
<div class="col-sm-6">
<p class="text-right">
<b>bold text first with some nuances</b> then some normal text to break the line. then some normal text to break the line. then some normal text to break the line.then some normal text to break the line.then some normal text to break the line.then some normal text to break the line.
</p>
</div>
<div class="col-sm-6 no-gutter">
<div class="half-holder">
</div>
</div>
</div>
</div>
The CSS (important bits) we define:
/* Image */
.half-holder {
height: 100px;
}
/* Normal */
.half-bg {
background: url('https://maxwelldemon.files.wordpress.com/2012/03/2x1-triangle.png') no-repeat right bottom;
background-size: 50% 100%;
}
/* The media query for responsive */
#media (max-width: 768px) {
.half-bg {
background-size: 100% 50%;
}
}
Hope it helps!
I have rectangular, not necessarily square images.
Using Bootstrap's img-circle, I'd like to get circular crops, not elliptical/non-circular crops of these rectangular images.
How can this be accomplished? The crops should behave in an img-responsive manner and should be centered.
JSFiddle to illustrate the non-circular behavior of non-square img-circle images.
<div class="container-fluid text-center">
<div class="row">
<div class="col-xs-12">img-circle test</div>
</div>
<div class="row">
<div class="col-xs-6">
<img class="img-responsive" src="http://placekitten.com/g/200/200" />
</div>
<div class="col-xs-6">
<img class="img-responsive img-circle" src="http://placekitten.com/g/200/200" />
</div>
</div>
<div class="row">
<div class="col-xs-6">
<img class="img-responsive" src="http://placekitten.com/g/200/400" />
</div>
<div class="col-xs-6">
<img class="img-responsive img-circle" src="http://placekitten.com/g/200/400" />
</div>
</div>
<div class="row">
<div class="col-xs-6">
<img class="img-responsive" src="http://placekitten.com/g/400/200" />
</div>
<div class="col-xs-6">
<img class="img-responsive img-circle" src="http://placekitten.com/g/400/200" />
</div>
</div>
</div>
I see that this post is a little out of date but still...
I can show you and everyone else (who is in the same situation as I was this day) how i did it.
First of all, you need html like this:
<div class="circle-avatar" style="background-image:url(http://placekitten.com/g/200/400)"></div>
Than your css class will look like this:
div.circle-avatar{
/* make it responsive */
max-width: 100%;
width:100%;
height:auto;
display:block;
/* div height to be the same as width*/
padding-top:100%;
/* make it a circle */
border-radius:50%;
/* Centering on image`s center*/
background-position-y: center;
background-position-x: center;
background-repeat: no-repeat;
/* it makes the clue thing, takes smaller dimension to fill div */
background-size: cover;
/* it is optional, for making this div centered in parent*/
margin: 0 auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
It is responsive circle, centered on original image.
You can change width and height not to autofill its parent if you want.
But keep them equal if you want to have a circle in result.
Link with solution on fiddle
I hope this answer will help struggling people. Bye.
I use these two methods depending on the usage. FIDDLE
<div class="img-div">
<img src="http://placekitten.com/g/400/200" />
</div>
<div class="circle-image"></div>
div.img-div{
height:200px;
width:200px;
overflow:hidden;
border-radius:50%;
}
.img-div img{
-webkit-transform:translate(-50%);
margin-left:100px;
}
.circle-image{
width:200px;
height:200px;
border-radius:50%;
background-image:url("http://placekitten.com/g/200/400");
display:block;
background-position-y:25%
}
You stated you want circular crops from recangles. This may not be able to be done with the 3 popular bootstrap classes (img-rounded; img-circle; img-polaroid)
You may want to write a custom CSS class using border-radius where you have more control. If you want it more circular just increase the radius.
.CattoBorderRadius
{
border-radius: 25px;
}
<img class="img-responsive CattoBorderRadius" src="http://placekitten.com/g/200/200" />
Fiddle URL: http://jsfiddle.net/ccatto/LyxEb/
I know this may not be the perfect radius but I think your answer will use a custom css class. Hope this helps.
use this in css
.logo-center{
border:inherit 8px #000000;
-moz-border-radius-topleft: 75px;
-moz-border-radius-topright:75px;
-moz-border-radius-bottomleft:75px;
-moz-border-radius-bottomright:75px;
-webkit-border-top-left-radius:75px;
-webkit-border-top-right-radius:75px;
-webkit-border-bottom-left-radius:75px;
-webkit-border-bottom-right-radius:75px;
border-top-left-radius:75px;
border-top-right-radius:75px;
border-bottom-left-radius:75px;
border-bottom-right-radius:75px;
}
<img class="logo-center" src="NBC-Logo.png" height="60" width="60">
You have to give height and width to that image.
eg. height : 200px and width : 200px
also give border-radius:50%;
to create circle you have to give equal height and width
if you are using bootstrap then give height and width and img-circle class to img
the problem mainly is because the width have to be == to the height, and in the case of bs, the height is set to auto so here is a fix for that in js instead
function img_circle() {
$('.img-circle').each(function() {
$w = $(this).width();
$(this).height($w);
});
}
$(document).ready(function() {
img_circle();
});
$(window).resize(function() {
img_circle();
});
You Need to take same height and width
and simply use the border-radius:360px;
You could simply use .rounded-circle bootstrap.
<img class="rounded-circle" src="http://placekitten.com/g/200/200"/>
You can even specify the width and height of the rounded image by providing an inline style to the image, which overrides the default size.
<img class="rounded-circle" style="height:100px; width: 100px" src="http://placekitten.com/g/200/200" />