How can a scale this perfect circle svg to the width of the div and keep in the center - and no repeat it. It is placed as a background image:
<style>
.play_full{
background: url('../_svg/_ionicons_svg_md-play-circle.svg');
position:absolute;
background-size: 100% 100%;
background-repeat: no-repeat;
}
This is what I am getting now?
How can I center the svg V and H?
you can use flexbox position to center, I changed this:
use Flexbox to centering elements in .cotainer
added width and height on .play_full
.container {
border : 1px solid red;
display: inline-flex;
justify-content: center;
align-items: center;
}
.play-full {
display: inline-block;
width: 50px;
height: 50px;
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IgogICAgIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIKICAgICB2aWV3Qm94PSIwIDAgMzIgMzIiCiAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDsiPjxnIGlkPSJzdXJmYWNlMSI+PHBhdGggc3R5bGU9IiAiIGQ9Ik0gMTYgNiBDIDEyLjIzNDM3NSA2IDguOTA2MjUgNi4zOTA2MjUgNi44NzUgNi42ODc1IEMgNS4xOTUzMTMgNi45MzM1OTQgMy44Mzk4NDQgOC4xOTkyMTkgMy41MzEyNSA5Ljg3NSBDIDMuMjY5NTMxIDExLjMwMDc4MSAzIDEzLjM4NjcxOSAzIDE2IEMgMyAxOC42MTMyODEgMy4yNjk1MzEgMjAuNjk5MjE5IDMuNTMxMjUgMjIuMTI1IEMgMy44Mzk4NDQgMjMuODAwNzgxIDUuMTk1MzEzIDI1LjA3MDMxMyA2Ljg3NSAyNS4zMTI1IEMgOC45MTQwNjMgMjUuNjA5Mzc1IDEyLjI1MzkwNiAyNiAxNiAyNiBDIDE5Ljc0NjA5NCAyNiAyMy4wODU5MzggMjUuNjA5Mzc1IDI1LjEyNSAyNS4zMTI1IEMgMjYuODA0Njg4IDI1LjA3MDMxMyAyOC4xNjAxNTYgMjMuODAwNzgxIDI4LjQ2ODc1IDIyLjEyNSBDIDI4LjczMDQ2OSAyMC42OTUzMTMgMjkgMTguNjA1NDY5IDI5IDE2IEMgMjkgMTMuMzk0NTMxIDI4LjczNDM3NSAxMS4zMDQ2ODggMjguNDY4NzUgOS44NzUgQyAyOC4xNjAxNTYgOC4xOTkyMTkgMjYuODA0Njg4IDYuOTMzNTk0IDI1LjEyNSA2LjY4NzUgQyAyMy4wOTM3NSA2LjM5MDYyNSAxOS43NjU2MjUgNiAxNiA2IFogTSAxNiA4IEMgMTkuNjMyODEzIDggMjIuODc4OTA2IDguMzcxMDk0IDI0Ljg0Mzc1IDguNjU2MjUgQyAyNS42ODc1IDguNzgxMjUgMjYuMzQ3NjU2IDkuNDE3OTY5IDI2LjUgMTAuMjUgQyAyNi43NDIxODggMTEuNTcwMzEzIDI3IDEzLjUyNzM0NCAyNyAxNiBDIDI3IDE4LjQ2ODc1IDI2Ljc0MjE4OCAyMC40Mjk2ODggMjYuNSAyMS43NSBDIDI2LjM0NzY1NiAyMi41ODIwMzEgMjUuNjkxNDA2IDIzLjIyMjY1NiAyNC44NDM3NSAyMy4zNDM3NSBDIDIyLjg3MTA5NCAyMy42Mjg5MDYgMTkuNjA5Mzc1IDI0IDE2IDI0IEMgMTIuMzkwNjI1IDI0IDkuMTI1IDIzLjYyODkwNiA3LjE1NjI1IDIzLjM0Mzc1IEMgNi4zMTI1IDIzLjIyMjY1NiA1LjY1MjM0NCAyMi41ODIwMzEgNS41IDIxLjc1IEMgNS4yNTc4MTMgMjAuNDI5Njg4IDUgMTguNDc2NTYzIDUgMTYgQyA1IDEzLjUxOTUzMSA1LjI1NzgxMyAxMS41NzAzMTMgNS41IDEwLjI1IEMgNS42NTIzNDQgOS40MTc5NjkgNi4zMDg1OTQgOC43ODEyNSA3LjE1NjI1IDguNjU2MjUgQyA5LjExNzE4OCA4LjM3MTA5NCAxMi4zNjcxODggOCAxNiA4IFogTSAxMyAxMC4yODEyNSBMIDEzIDIxLjcxODc1IEwgMTQuNSAyMC44NzUgTCAyMS41IDE2Ljg3NSBMIDIzIDE2IEwgMjEuNSAxNS4xMjUgTCAxNC41IDExLjEyNSBaIE0gMTUgMTMuNzE4NzUgTCAxOC45Njg3NSAxNiBMIDE1IDE4LjI4MTI1IFogIj48L3BhdGg+PC9nPjwvc3ZnPg==') 50% 50% no-repeat;
background-size: 100%;
}
<div class="container">
<div class="play-full"></div>
</div>
Related
I have to components one above the other. I would like to stretch the bg image from the lower one to the upper one. I set the background of the upper one as transparent but I cannot figure out what to do to stretch the image above the component in the second one. I've got
display: block;
background-image: url(${background});
background-position: bottom;
background-repeat: no-repeat;
background-size: 100% -50%;
but the size property is invalid and any positive value doesn't seen to do what I would like it to do. Could you help?
It's hard to know exactly what you are going for without a proper link, but I think you could achieve this by having the second component with a negative margin-top, and equivalent padding-top.
HTML:
<div class="comp-a">
I am the first component
</div>
<div class="comp-b">
I am the second. I control the background!
</div>
CSS:
* {
box-sizing:border-box;
}
.comp-a {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.comp-b {
height: 200px;
padding-top: 100px;
margin-top: -100px;
background: red;
display: flex;
color: white;
align-items: center;
justify-content: center;
}
http://jsfiddle.net/hrsapyqv/
I have a fixed div with the css width: 400px; height: 280px; but my image comes from various dimension, some are portrait some landscape. How do I fit/stretch/fill my image regardless of source size into the div size?
#giorgi-parunov has the simplest and best method. owever if you want to use , I suggest that you use css to make the image responsive to the div.
img {
max-width:100%;
height: auto
}
You can also use object-fit: cover
If you have fixed size on div you can just set height/width of img to 100%.
div {
width: 150px;
height: 50px;
border: 1px solid black;
}
img {
width: 100%;
height: 100%;
}
<div>
<img src="http://cdn2.spectator.co.uk/files/2016/04/iStock_000069830477_Small.jpg">
</div>
If you want to fill div but you also want to keep image aspect ratio you can use object-fit: cover that is similar to background-size: cover when you use img as background.
div {
width: 100px;
height: 150px;
border: 1px solid black;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div>
<img src="http://cdn2.spectator.co.uk/files/2016/04/iStock_000069830477_Small.jpg">
</div>
I think the best way yo do it , do it with background-image.
HTML<div style="background-image: url("paper.gif"); background-size: cover; background-position: center;"></div>
It is the best way to add your image to the div without Javascript.
You can check this answer to fit any image in a container centered
https://stackoverflow.com/a/36063374/2894798
In your case the code would be
.container {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid;
width: 400px; /*customize to your needs 100%*/
height: 280px; /*customize to your needs*/
}
.container img
{
max-width:100%;
max-height:100%;
}
here is the fiddle
I'm trying to align the background image of a div to the top of the div, but it continues to align it to the top of either the parent div or the whole page (I'm not sure which one, but I think it's page)
JSFiddle: https://jsfiddle.net/Minecraft_Percabeth/1wbuduze/2/
The background image of the #bottom div should show over the top of their heads, but instead the top is aligned to the top of the #wrap div. Edit: The image should also stay where it is when scrolling down, which is why I'm currently using fixed.
Change the margin-top to 0 to see what I mean.
<div id="wrap">
<div id="bottom"></div>
</div>
#wrap {
background-color: yellow;
height: 500px; width: 500px;
position: absolute;
}
#bottom {
background: blue url("http://i.imgur.com/BsTVroc.jpg") fixed center top;
height: 400px; width: 500px;
margin-top: 100px;
}
The fixed in
background: blue url("http://i.imgur.com/BsTVroc.jpg") fixed center top;
Is the shorthand for background-attachment: fixed;That is why the background image is fixed to the top "the page".Without this property the background image moves to margin-top: 100px;
Edit:
In order to move the background image vertically, you can use background-position: center XY%; and add again background-attachment: fixed;
#bottom {
background-image: url("http://i.imgur.com/BsTVroc.jpg");
background-repeat: no-repeat;
background-position: center 20%;
background-attachment: fixed;
height: 400px;
width: 500px;
margin-top: 100px;
}
#wrap {
background-color: #737373;
height: 500px;
width: 500px;
position: absolute;
}
<div id="wrap">
<div id="bottom"></div>
</div>
You can use background-position: center 100px; - this will move the background image down by 100px.
I'm having some trouble with aligning certain elements using Flexbox. You can see the JSfiddle here,
I used flex because the image from the Steve Jobs movie is higher then the image of Legend, so when I place the images in the divs there would be a gap.I want them to be the same size. So I used Flex to create divs with the same size and then use the image as the background to fill it up. Which works fine.
But the problem is that I want to show the release date above the images and for some reason Flex decides to put the span element with the date and the image element with the image next to each other.
If I remove the display: flex from the .movie_container it places the release date above the image but then the images have different sizes.
So I'm wondering if there's a way to keep the Flex aspect but also have the span element above the image instead of next to it.
div#got-gridbox {
padding: 20px;
background: #F1F1F1;
display: flex;
flex-flow: row wrap
}
.movie_container {
width: 150px;
background: #ddd;
padding: 10px;
display: flex
}
.movie_container img {
width: 100%;
opacity: 0;
}
span {} .poster_1 {
background: url('http://image.tmdb.org/t/p/w500//7SUaf2UgoY0ZRGbQtRlfDkLDBCb.jpg') no-repeat center center;
background-size: cover;
background-color: green;
display: inline-block;
}
.poster_2 {
background: url('http://image.tmdb.org/t/p/w500//3tD0r8F6b7vygxZt3iRvf2ELwAO.jpg') no-repeat center center;
background-size: cover;
background-color: green;
display: inline-block;
}
The default flex-direction value is row. Thus the date is placed in line with the image. Set the flex-direction to column so that the two elements occupy the full width of the parent and the date is place above the poster.
For setting the images with same height, you need to assign flex: 1 to the poster elements.
flex: 1 is equivalent to flex: 1 1 0[flex-grow flex-shrink flex-basis] which tells the item to grow and shrink with the parent container and absorb the remaining space.
Updated JSfiddle
div#got-gridbox {
padding: 20px;
background: #F1F1F1;
display: flex;
flex-flow: row wrap
}
.movie_container {
width: 150px;
background: #ddd;
padding: 10px;
display: flex;
flex-direction: column;
}
.movie_container img {
width: 100%;
opacity: 0;
}
span {} .poster_1 {
background: url('http://image.tmdb.org/t/p/w500//7SUaf2UgoY0ZRGbQtRlfDkLDBCb.jpg') no-repeat center center;
background-size: cover;
background-color: green;
display: inline-block;
}
.poster_2 {
background: url('http://image.tmdb.org/t/p/w500//3tD0r8F6b7vygxZt3iRvf2ELwAO.jpg') no-repeat center center;
background-size: cover;
background-color: green;
display: inline-block;
flex: 1;
}
<div id="got-gridbox">
<div class="movie_container">
<span>2015-08-01</span>
<div class="poster_1">
<img src="http://image.tmdb.org/t/p/w500//7SUaf2UgoY0ZRGbQtRlfDkLDBCb.jpg"></img>
</div>
</div>
<div class="movie_container">
<span>2015-08-01</span>
<div class="poster_2">
<img src="http://image.tmdb.org/t/p/w500//3tD0r8F6b7vygxZt3iRvf2ELwAO.jpg" />
</div>
</div>
</div>
I am trying out responsive layout with 100% div wrapper and then placing a background image with text above and below it.
Unable to get it to display.
Looking to get the image to resize with browser window.
What am I doing wrong?
.wrapper {
width: 100%;
}
.image {
background: url("http://upload.wikimedia.org/wikipedia/commons/3/35/Rivi%C3%A8re_Coulonge_Pont_Davidson_1024x768.JPG") no-repeat center;
background-size: cover;
}
.text {
text-align: center;
font-size: 50px;
color: yellow;
}
http://jsfiddle.net/f5F6T/
Looks like you need to give height and width to your .image element. As well as a height to your wrapping div.
u need to set the content in middle div or give height. because initial div does nt have any height so how can u see the background??
check the fiddle-
--HTML--
<div class="wrapper">
<div class="text">Give the height to below div!</div>
<div class="image"></div>
<div class="text">So, here u have ur photo</div>
</div>
--CSS--
.image {
background: url("http://upload.wikimedia.org/wikipedia/commons/3/35/Rivi%C3%A8re_Coulonge_Pont_Davidson_1024x768.JPG") no-repeat center;
background-size: cover;
height:100px;
}
You're .image is actually 0px heigh, that's why the image is not displayed.
Check out this :
just moved the .image code into the .text code :
.text {
background: url("http://upload.wikimedia.org/wikipedia/commons/3/35/Rivi%C3%A8re_Coulonge_Pont_Davidson_1024x768.JPG") no-repeat center;
background-size: cover;
text-align: center;
font-size: 50px;
color: yellow;
}
http://jsfiddle.net/f5F6T/1/
Edit :
.image {
height: 30px;
background: url("http://upload.wikimedia.org/wikipedia/commons/3/35/Rivi%C3%A8re_Coulonge_Pont_Davidson_1024x768.JPG") no-repeat center;
background-size: cover;
}
http://jsfiddle.net/f5F6T/3/