As shown in the screenshot, there are contents inside a div element which has a background image. This div container is set to have height: 40% of its parent, I believe it is <ion-content> in this case. Now, the image and the text underneath are cropped. I want to make them fit inside the div container. The background image is also not centered in the div.
How can I style it such that all the contents can be displayed?
How can I center my background image both vertically and horizontally?
It somehow works if I make the browser viewport narrower as shown below. However, I would like to have everything displayed and the background image centered both vertically and horizontally regardless the width of the viewport.
HTML
<div style="height: 40%; overflow: hidden;">
<div class="user-profile">
<div class="user-profile-background"></div>
<div class="user-profile-content">
<div class="row" style="height: 100%;">
<div class="col col-center">
<div class="row">
<div class="col col-33 col-offset-33">
<div style="height: 0; border-radius: 50%; background-image: url('img/ionic.png'); background-repeat: no-repeat; background-size: cover; background-position: center center; padding-top: 100%;">
</div>
</div>
</div>
<div class="row">
<div class="col" style="text-align: center; color: rgba(200, 200, 200, 1);">
<h3 style="color: white;">Seraph Cheng</h3>
<p><strong>Male, 28</strong></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.user-profile {
position: relative;
width: 100%;
height: 100%;
}
.user-profile .user-profile-background {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background-image: url('../img/basketball.jpg');
background-size: cover;
}
.user-profile .user-profile-content {
position: relative;
z-index: 2;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
Edit
Added a CodePen link to illustrate my problem.
The problem is the background-size: cover css rule. You can test the difference between cover and contain here:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain
It's fully compatibility with latest browsers: http://caniuse.com/background-img-opts
Try this:
.user-profile .user-profile-background {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background-image: url('../img/basketball.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
You can set an explicit height for the background image for example height = 350px and set center center as the position property where you have specified the background image. This way the height will remain fixed but as the view port is reduced, the background image will start cropping from left and right sides i.e it would remain in the center.
Then on smaller view port, you can reduce the height to say 250px.
HTML
<div class="root">
<div class="subroot">
<div class="container">
<div class="square bg"></div>
</div>
<div class="passage">
<p>Hello world!</p>
</div>
</div>
</div>
CSS
.root {
width: 70%;
margin: auto;
border: 2px solid yellow;
background-image: url('http://baconmockup.com/600/400');
background-size: cover;
background-position: center;
}
.subroot {
background-color: rgba(0, 0, 0, 0.7);
}
.container {
border: 2px solid black;
width: 100px;
margin: auto;
}
.square {
border: 2px dotted red;
padding-bottom: 100%;
}
.bg {
background-image: url('http://placehold.it/200x300');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
}
.passage {
border: 2px dotted green;
width: 80%;
margin: auto;
text-align: center;
white-space: nowrap;
overflow: scroll;
color: white;
}
Problem solved.
Related
I've been following this solution to add responsiveness to my parallax images in my right grid. The responsiveness is working fine except the image doesn't takes up the WHOLE viewpoint.
I have put a red border around the image to show this: https://jsfiddle.net/65r3bth1/3/
When it becomes responsive, the image doesn't fill up the left side of the viewpoint unless I change the background-size and mess around with my background positioning. Is it possible to ensure my image takes up the whole viewpoint while maintaining its responsiveness?
.image-greet {
background: url("http://placekitten.com/g/800/800")
calc(75% + 120px) 50px /120px auto;
/*calc (middle of right grid + how pushed to the rigth) how far push down from top / zoom*/
border-top: 20px;
background-size: 40% auto;
width: 78%;
height: 12%;
margin: 15% auto 0;
background-attachment: fixed;
background-repeat: no-repeat;
border: 1px solid red;
}
Is it possible to ensure my image takes up the 100% of the viewpoint while maintaining responsiveness in its original background position?
Thank you!
The solution that you are following can be achieved with CSS, without the need for JS, as you can see in this fiddle. Hope this helps!
.body {
display: flex;
}
.container {
border: 1px solid red;
width: 100%;
height: 400px;
margin-top: 50px;
}
.sidebar {
height: 2000px;
width: 50px;
background-color: #333333;
margin-right: 30px;
}
.bg {
background: url('https://loremflickr.com/320/240');
background-size: cover;
background-attachment: fixed;
width: 100%;
height: 100%;
display: block;
}
<div class="body">
<div class="sidebar"></div>
<div class="container">
<div class="bg"></div>
</div>
</div>
In CSS, how do I setup an image like this: https://www.dropbox.com/s/1y8zkiwcq80p2dc/ygb-t.png?dl=0 as the foreground that remains static and fits to any screen despite the monitor/browser resolution?
The idea is to have other images behind this, and as you scroll only the background images move. Creating an image overlay effect.
There are a few ways to do that, but this is how I would do it. This will stretch the image to fit the width of any screen, and the height will remain proportional. The top and bottom, if empty, will be filled in by the .padding divs:
`
.bg{
margin: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display:flex;
flex-direction: column;
}
.img {
width:100vw;
align-self: center;
height: auto;
}
.padding {
flex: 1;
background-color: pink; //MAKE THIS THE COLOR OF YOUR IMAGE
}
.content {
height: 300vh;
background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}
<div class="bg">
<div class='padding'></div>
<img class='img' src="https://photos-3.dropbox.com/t/2/AACmD9Oh8XyU7XsuoMbGiFvhR74Kyf2mmCrvJnHqoPIyQA/12/548079133/png/32x32/3/1528948800/0/2/ygb-t.png/EJK827EEGEYgAigC/X_nlbu7xSKtG1OsirOK65Kyxjviska-5QQCExTwpanM%2ChhX24rQp1YsmgIno_q-Sb66Y78jGxhYf_ZswlAPtHwI?dl=0&preserve_transparency=1&size=1600x1200&size_mode=3">
<div class='padding'></div>
</div>
<div class="content"></div>
`
Kind of messy with the divs and inline styling, but this is a way you could have what you want and instead of having the colors you would set the background of each div to the picture you would want
<body style="height: 200vh;">
<div class="1" style="height: 20vh;
background-color: red;"></div>
<div class="1" style="height: 20vh;
background-color: red;"></div>
<div class="1" style="height: 20vh;
background-color: red;"></div>
<div class="1" style="height: 20vh;
background-color: green;"></div>
<div class="1" style="height: 20vh;
background-color: blue;"></div>
<div class="1" style="height: 20vh;
background-color: yellow;"></div>
<div class="1" style="height: 20vh;
background-color: orange;"></div>
<div class="1" style="height: 20vh;
background-color: purple;"></div>
<div class="container">
<img class="stay" src="https://photos-3.dropbox.com/t/2/AACmD9Oh8XyU7XsuoMbGiFvhR74Kyf2mmCrvJnHqoPIyQA/12/548079133/png/32x32/3/1528948800/0/2/ygb-t.png/EJK827EEGEYgAigC/X_nlbu7xSKtG1OsirOK65Kyxjviska-5QQCExTwpanM%2ChhX24rQp1YsmgIno_q-Sb66Y78jGxhYf_ZswlAPtHwI?dl=0&preserve_transparency=1&size=1600x1200&size_mode=3" style="vertical-align: middle;
border-style: none;
width: 100vw;
height: 100vh;
position: fixed;
left: 0;
top: 0;">
</div>
</body>
Use a partially transparent image (i.e. with only a few non-transparent areas, like in your example, most likely in png format) and put it centered into a container that has position: fixed and full window size, like this:
.container {
position: fixed;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
The rest of the content (i.e. your moving background images) has to be outside this container.
ADDITION:
To make the image size relative to the window, give it a percentage-based size like this:
.container img {
width: 60%;
height: auto;
}
Example: https://codepen.io/anon/pen/mKwZVV (using text instead of background images and in lack of a partially transparent placeholder image, just a "normal" image)
So im trying to figure out how I could make all of my webpage change size when you zoom in or out at the same proportion. I cant figure out how to do this but here is a little test Fiddle I created in a couple minutes.
https://jsfiddle.net/cejnkx4h/1/
So as you can see in this, whenever the browser/canvas changes size all the text and stuff changes proportion. I want the user to be able to zoom in to accommodate impairments however I want the entire webpage to zoom in at the same proportion, not just certain elements like the text.
If any of you guys can help me I'd appreciate it a lot.
body,
html {
margin: 0;
background-image: url("https://www.hdwallpapers.in/walls/blur_colors-wide.jpg");
background-position: cover;
background-size: 100%;
background-attachment: fixed;
min-width: 1000px;
background-repeat: no-repeat;
}
.bg {
width: 60%;
margin-left: 20%;
background-color: grey;
border: thick solid black;
height: 100%;
}
#right {
width: 45%;
vertical-align: baseline;
border: thick solid black;
}
#left {
width: 45%;
float: left;
font-size: 16pt;
color: black;
padding-top: 20px;
}
.format {
width: 85%;
margin-left: 10%;
overflow: hidden;
padding-top: 5%;
padding-bottom: 10%;
display: flex;
align-items: center;
}
<div class="bg">
<div class="format">
<div id="left">
<p>
Gaming Pc
<br/>$1500
</p>
</div>
<div id="right">
<img src="https://www.cyberpowerpc.com/images/cs/smraidmax/blk_400.png" width="100%" </div>
</div>
</div>
You can use css transform to scale the page proportionally.
transform: scale(1);
Something like this. Where scale 1 means a 100%. You can set it to something like 0.5 for 50% or 1.1 for 110%.
Hope this helps.
Are there any ways that we can set a tag inside a div perfectly center no matter what is the width and height of that div? In other way, I want to set an image position inside a div tag like a center background. For example:
.image-wrap {
width: 50vw;
height: 720px;
background: url('some-images.jpg') no-repeat center center / auto 100%;
}
I want to set an image inside a div like a background above with auto width and 100% height so that all the important content in an image will be in the center of the div.
<div class="image-wrap">
<img src="some-images.jpg" alt="some image here"/>
</div>
Thank you very much!
You can center it easily using flex property. Demo here
.image-wrap {
height: 400px;
display: flex;
align-items: center;
justify-content: center;
border: dotted 1px #CCC;
}
<div class="image-wrap">
<img src="http://lorempixel.com/400/200" alt="some image here"/>
</div>
You could use transform: translate
.image-wrap {
position: relative;
height: 400px;
text-align: center;
border: 1px dashed gray;
}
.image-wrap img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="image-wrap">
<img src="http://placehold.it/200" alt="some image here"/>
</div>
Now, if you want it to behave as background-size: auto 100% does, do like this
.image-wrap {
position: relative;
height: 200px;
border: 1px dashed gray;
overflow: hidden;
}
.image-wrap img {
position: relative;
height: 100%;
left: 50%;
transform: translateX(-50%);
}
<div class="image-wrap">
<img src="http://placehold.it/600x100" alt="some image here"/>
</div>
<div class="image-wrap">
<img src="http://placehold.it/200x400" alt="some image here"/>
</div>
And here is a version behaving as background-size: cover does
.image-wrap {
position: relative;
height: 200px;
overflow: hidden;
border: 1px dashed gray;
margin-bottom: 10px;
}
.image-wrap img {
position: relative;
min-height: 100%;
min-width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<div class="image-wrap">
<img src="http://placehold.it/600x100" alt="some image here"/>
</div>
<div class="image-wrap">
<img src="http://placehold.it/200x400" alt="some image here"/>
</div>
And this version behaving as background-size: contain does
.image-wrap {
position: relative;
height: 200px;
overflow: hidden;
border: 1px dashed gray;
margin-bottom: 10px;
}
.image-wrap img {
position: relative;
max-height: 100%;
max-width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<div class="image-wrap">
<img src="http://placehold.it/600x100" alt="some image here"/>
</div>
<div class="image-wrap">
<img src="http://placehold.it/200x400" alt="some image here"/>
</div>
You could do it like so:
.image-wrap {
width: 50vw;
height: 720px;
background: url('some-images.jpg') no-repeat center center / auto 100%;
position: relative;
}
img
{
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px; /* (EXAMPLE) - value should be half of the image width */
margin-top: -100px; /* (EXAMPLE) - value should be half of the image height */
}
<div class="image-wrap">
<img src="some-images.jpg" alt="some image here"/>
</div>
.parent-div {
width: 50vw;
height: 720px;
position: relative;
z-index: 1;
}
.image-wrap {
background-position: 50% 50%;
background-size: cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
you can use like this
<div class="parent-div">
<div class="image-wrap" style="background-image: url('http://weknowyourdreams.com/images/nature/nature-02.jpg')"></div>
</div>
This is where FlexBox properties become very useful. You can set align-items: center; on a container to (by default) vertically center any child elements. Here's an example: https://jsfiddle.net/ks62qtns/
The advantage of this is that you don't need to know the dimensions of any of the elements involved in the layout - which is very useful for responsive designs and/or dynamic content.
Flex properties are reasonably well supported in modern browsers. You might need fallbacks to support older versions of IE (if you need to)
HTML:
<div class="container">
<div class="content">
<h1>
Content. Any Content.
</h1>
<p>
I might have anything in me!
</p>
</div>
</div>
CSS:
.container {
display: flex;
align-items: center;
justify-content: center;
background: #EEE;
/* This is just to make a big container. You can set the dimensions however you like.*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.content {
background: #89D485;
padding: 2rem;
text-align: center;
}
This is the most over thought out problem that most developers run into.
If the object is inside another object you are able to just use margin: 0 auto; inside the CSS. This will make the left and right ways to line up correct. This also then works for all media queries from small screen to large screens.
You can use jquery to calculate the width of the div and image.
$(img).css({
position: "absolute",
left: ($(img).parent().width() - $(img).width()) / 2
});
This would mean:
((width of div)-(width of image))/2
This would center image perfectly.
just do it like this.set the container's property "text-align:center",make it is the inline-block element and 100% height，then can get what you want.
.image-wrap{
width: 50vm;
height: 720px;
text-align: center;
}
.image-wrap img{
display: inline-block;
height: 100vm;
}
I'm beginner in HTML/CSS.
I've created some div that looks like a circle. I want to put facebook image into that circle, but as a circle logo.
HTML
<div class="social" id="social1"> Facebook
<a href="www.facebook.com">
<img src="https://www.facebook.com/images/fb_icon_325x325.png" width="106" height="106"/>
</a>
</div>
CSS
div {
display: inline-block;
margin-left: 55px;
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px solid black;
text-align:center;
}
img {
width: 100%;
height : 100%;
object-fit: contain;
}
How to fit img into div circle ?
.social .facebook {
display: inline-block;
width: 100px;
height: 100px;
background: url(https://www.facebook.com/images/fb_icon_325x325.png);
background-position: 50% 50%;
background-size: cover;
border-radius: 50%;
}
<div class="social" id="social1">
<a class="facebook" href="https://www.facebook.com/"></a>
</div>
Basically there are two ways to achieve this.
You could add border-radius: 50%; to the img element.
You could add overflow: hidden; to the div element.
Both will work. You should remove the "Facebook" string to get proper positioning of the image.
You were very close. The text content "facebook" of the DIV is taking up room and needs to be removed. It can be replaced by alt text to display if the image is not available, with a title attribute that typically displays as a tooltip. Height and width are not needed for the IMG element since it is specified in CSS:
<div class="social" id="social1">
<a href="https://www.facebook.com">
<img src="https://www.facebook.com/images/fb_icon_325x325.png"
alt="facebood" title="facebook">
</a>
</div>
Besides this you only need to add overflow: hidden as a property for the div CSS
Alternatively if you want to support IE and Edge which (from #Blazemonger 's comment) don't support object-fit, you could add the image as a background attachment of the DIV and make the DIV itself the link element's content (without an alt text option):
HTML
<a href="https://www.facebook.com">
<div class="social" id="social1" title="facebook">
</div>
</a>
and include
background-image: url("https://www.facebook.com/images/fb_icon_325x325.png");
background-size: cover;
overflow:hidden;
in CSS for the div element.
overflow:hidden; + position:relative/absolute to not mind the text aside image :
div {
display: inline-block;
margin-left: 55px;
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px solid black;
text-align: center;
position: relative;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
<div class="social" id="social1">Facebook
<a href="www.facebook.com">
<img src="https://www.facebook.com/images/fb_icon_325x325.png" width="106" height="106" />
</a>
</div>
You could set a border radius in CSS to round the image like so:
img {
width: 100%;
height : 100%;
object-fit: contain;
border-radius: 999px;
}
Example: http://codepen.io/JasonGraham/pen/zBGYgx
Well you can do this :
div {
display: inline-block;
margin-left: 55px;
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px solid black;
text-align: center;
background: url("https://www.facebook.com/images/fb_icon_325x325.png") center no-repeat;
background-size: cover
}
<a href="https://www.facebook.com/">
<div class="social" id="social1"></div>
</a>
img{
border-radius: 100%;
object-fit:cover
}
This will position the image so that it appears centered and cropped and round its edges.
Add border-radius:100% to your img css code segment as well.
img {
width: 100%;
height : 100%;
border-radius:100%;
}