i have problem with positioning image
<div class="foto img-thumbnail">
<img class="img-thumbnail tengah" src="member/37/foto_profile/profile37.png">
</div>
the css file
.foto {
background-image: url('member/37/foto_profile/large.jpeg');
height: 300px;
background-repeat: no-repeat;
background-size:cover;
background-position:
center center;
width: 100%;
}
.tengah {
position: absolute;
}
GREEN = class tengah
RED = class foto
i want the image (RED) positioning center of div
when i change css like
.tengah {
left: 50%;
top: 50%;
position: absolute;
}
it returning the center of image
anybody can help me?
thanks before :)
I think you're talking about centering the .tengah div in the .foto.
If so, then you need:
.foto {
background-image: url('member/37/foto_profile/large.jpeg');
height: 300px;
background-repeat: no-repeat;
background-size:cover;
background-position:
center center;
width: 100%;
position: relative; /* ADDED */
}
.tengah {
left: 50%;
top: 50%;
position: absolute;
margin-top: -30px; /* ADDED */
margin-left: -30px; /* ADDED */
}
The margins are half the width and height of the <div> you want centered.
A cleaner method that will adapt to different size screens would be to avoid the "position:absolute" altogether by setting auto margins left and right for the .tengah class:
.tengah {
position: relative;
margin-left: auto;
margin-right: auto;
top: 50%;
}
This style class will auto center the image/div. The "top" can be adjusted a little depending on the image length if "vertical-align" is not used.
Related
I have a container of a given size, and I have an image inside it. I want the image to expand to either 100% height or 100% width, depending on whichever comes last, and I want it to keep its aspect ratio, so anything sticking on over the container is cropped off. If it's cropped on the sides, I'd also like it to be centered.
So to be clear, if it's a very wide picture, it would have height: 100%, and if it's a very tall picture, it would have width: 100%.
For example, here's the container and the image, with is neither sized correctly, nor centered:
https://jsfiddle.net/y5px1ch9/1/
<div class="wrapper">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/S%C3%A4ugende_H%C3%BCndin.JPG/800px-S%C3%A4ugende_H%C3%BCndin.JPG" class="picture">
</div>
.wrapper {
position: relative;
left: 40%;
width: 100px;
height: 200px;
border: 1px black solid;
overflow: hidden;
text-align: center;
}
.picture {
position: relative;
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
margin: auto;
left: 0;
right: 0;
background-position: center;
}
Anyone know if this is possible to do with CSS?
Since you have a fixed size wrapper, and as object-fit does not have that good browser support, I suggest you use background/background-size on the wrapper
Now, by setting its position, you control where it should get cropped. In below sample I used left top, which means it crops at right/bottom, and in your case, you might want center center, which will crop equally top/bottom or left/right, based on which of the two overflows.
Updated based on a comment
One can also set the image source in the markup, just how one do with the img, here done by setting background-image: url() inline.
.wrapper {
position: relative;
left: 40%;
width: 100px;
height: 200px;
border: 1px black solid;
overflow: hidden;
text-align: center;
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
}
<div class="wrapper" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/S%C3%A4ugende_H%C3%BCndin.JPG/800px-S%C3%A4ugende_H%C3%BCndin.JPG)">
</div>
And here is the version using object-fit
.wrapper {
position: relative;
left: 40%;
width: 100px;
height: 200px;
border: 1px black solid;
overflow: hidden;
text-align: center;
}
.picture {
position: relative;
height: 100%;
width: 100%;
object-fit: cover;
object-position: left top;
}
<div class="wrapper">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/S%C3%A4ugende_H%C3%BCndin.JPG/800px-S%C3%A4ugende_H%C3%BCndin.JPG" class="picture">
</div>
It is possible but you have to know the aspect ratio beforehand, knowing this you can reserve space for the image
div {
width: 100%;
overflow:hidden;
position:relative;
}
div::after {
padding-top: 56.25%; /* percentage of containing block _width_ */
display: block;
content: '';
}
div img {
display: block;
width:100%;
height:auto;
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
<div>
<img src="https://placehold.it/200x300"/>
</div>
The main trick is the padding-top: 56.25%;... the aspect ratio
If you define the image as a background-image, then you can use background-size: contain - this does what you want:
.wrapper {
position: relative;
left: 40%;
width: 100px;
height: 200px;
border: 1px black solid;
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/S%C3%A4ugende_H%C3%BCndin.JPG/800px-S%C3%A4ugende_H%C3%BCndin.JPG) no-repeat center center;
background-size: contain;
}
<div class="wrapper">
</div>
try this
vertical
.picture {
position: relative;
height: 100%;
width: auto;
margin: auto;
left: 0;
right: 0;
background-position: center;
}
horizontal
.picture {
position: relative;
width: 100%;
height: auto;
margin: auto;
left: 0;
right: 0;
background-position: center;
}
jsfiddle horizontal case
jsfiddle vertical case
please add height property auto and image width in percentage %, in this property you can manage aspect ratio,
width:50%,
height:auto,
So I have an image on my website and I want to perfectly center it. I have tried many things but none have worked.
body{
background-color: black;
}
img {
position: absolute;
margin-top: 10%;
text-align: center;
height: 40%;
z-index: -5
}
<img src="images/astronaut.png">
The simplest way to centre an image horizontally is with:
img {
display: block;
margin-right: auto;
margin-left: auto;
}
Like this?
body{
background-color: black;
}
img {
position: absolute;
margin-top: 10%;
text-align: center;
height: 40%;
z-index: -5;
left: 50%;
top:50%;
transform: translate(-50%, -50%);
}
<img src="images/astronaut.png">
The centering codes are the left, top, and especially the transform
Have a look at the following links for further help, hope it helps.
https://www.w3.org/Style/Examples/007/center
https://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
html {
width: 100%;
height: 100%;
background:url(http://tse4.mm.bing.net/th?id=OIP.IX1fAIIUJ82DtdfgR2tSnADhEs&w=207&h=276&c=8&qlt=90&o=4&dpr=2&pid=1.7) center center no-repeat;
}
Setting the left and right margin to auto will center the image horizontally within it's parent if your position isn't set or is set to relative.
So you could use:
img {
margin-top: 10%;
margin-left: auto;
margin-right: auto;
text-align: center;
height: 40%;
z-index: -5
}
If your position needs to be set to absolute, you can use CSS3's viewport sizing to center your image. This would place the image in the exact center of the page; so if you want to center the image within a sidebar, for example, don't use this method. You'll need to set a width for your image and then align it using the "left" property. That would look like this:
img {
position: absolute;
margin-top: 10%;
text-align: center;
height: 40%;
z-index: -5
width: 500px;
left: calc( 50vw - 250px );
}
The viewport is always 100vw wide, so setting the left property to 50vw - 1/2 of the image's width will center it on the page.
You can also use jQuery to similarly calculate the proper alignment and position the element.
You can put the image in a div and make it 100% of the screen in width and height.
Then add text-align:center; to center it horizontally.
Then set the line height to 100% and then add vertical-align: middle; to the image to center it vertically.
body{
background-color: black;
}
.CenterImage img {
height: 40%;
z-index: -5;
vertical-align: middle;
}
.CenterImage{
width:100vw;
height:100vh;
line-height: 100vh;
text-align:center;
}
<div class="CenterImage"><img src="images/astronaut.png"></div>
body{
background-color: black;
}
img {
position: absolute;
text-align: center;
height: 40%;
top: 50%;
left: 50%;
z-index: -5
}
<img src="images/astronaut.png">
I have a webpage with an background-image with background-size:cover.
Now I want to overlay this background-image with certain div's, which contain additional informations. These div's have to be at an exact position relative to the background image, even though I resize the broswer window.
That's just one attempt that didn't work.
HTML
<body>
<div class="icon">
<div class="background picture_rendering"></div>
</body>
CSS
.background {
width:100%;
height:100%;
background-image: url(images/bg.jpg);
background-size: cover;
z-index: 0;
position: absolute;
}
.icon {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: relative;
background-image: url('/images/icon.jpg');
background-size: 5% auto;
background-position: 227px center;
background-attachment: fixed;
}
It should be something like the map-tag: http://www.w3schools.com/tags/tag_map.asp But instead of links there should be icons.
I hope you understand :-)
Best regards,
The One
Basically you can create a parent or wrapper element which would have the background image and then place all the elements like icons etc inside this and do all your positioning etc. So I've created this for you:
CSS
.container {
background: url(http://www.w3schools.com/tags/planets.gif) no-repeat;
width: 145px;
height: 126px;
position: relative;
}
.icon {
position: absolute;
width: 30px;
height: 30px;
border-radius: 100%;
z-index: 2;
}
.icon1 {
background: green;
top: 20%;
right: 10%;
}
.icon2 {
background: red;
bottom: 10%;
left: 10%;
}
HTML
<div class="container">
<div class="icon icon1"></div>
<div class="icon icon2"></div>
</div>
Here is an example on jsFiddle http://jsfiddle.net/j5cgt22z/
So each icon is positioned inside the container, the planets need to use position:absolute to float them around in the container space but the container needs to have position:relative so they are positioned in relation to their parent http://css-tricks.com/absolute-positioning-inside-relative-positioning/
You can then use z-index on each position:absolute icon to stack each icon so the higher the z-index higher up the stack.
Hope this helps
After realising that there is no general solution for the problem yet. (object-fit isn't widely support).
I used the jquery-Plugin imagefill.js.
CSS
.background {
width:100%;
height:100%;
top: 0;
left: 0;
background-image: url(http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg);
background-size: cover;
z-index: 0;
position: absolute;
background-position: center center;
}
.container_icons
{
position: absolute;
height: 100%;
width: 100%;
}
.test
{
position: absolute;
background-image: url('http://www.clipartbest.com/cliparts/ncX/qyL/ncXqyLdcB.png');
background-size: 70px auto;
background-repeat: no-repeat;
background-position: 17% 49%;
}
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/2.1.0/jquery.imagesloaded.min.js"></script>
<script src="http://johnpolacek.github.io/imagefill.js/js/jquery-imagefill.js"></script>
<div class="background"></div>
<div class="container_icons"><img class="test" src="http://upload.wikimedia.org/wikipedia/commons/8/8c/Transparent.png" width="3869px" height="2574px" /></div>
<script>
$('.container_icons').imagefill();
</script>
Here is a jsfiddle --> It doesn't work as good as on my webpage ;-)
I am trying to achieve two fixed banners on either side of my sites wrapper. I have used absolute positioning to attach the banner divs to each side of the wrapper and have set a fixed background within each so the banner follows the users down the page.
I seem to be having issues setting the background position of the banners, the background position does not seem to be relative to the parent div. I would like the banner backgrounds to be centered within the divs.
Code and example site
<style>
.page-container {
position: relative;
background: #FFF;
width: 970px;
margin-left:auto;
margin-right: auto;
background-color:#F00;
}
#left-bg {
width: 306px;
height: 100%;
position:absolute;
top: 0px;
left: -306px;
background:url(http://www.superfreeslotgames.com/basecamp/L-Leovegas-banner.gif);
background-position: center center;
background-attachment: fixed;
}
#right-bg {
width: 306px;
height: 100%;
position:absolute;
top: 0px;
right: -306px;
background:url(http://www.superfreeslotgames.com/basecamp/R-Leovegas-banner.gif);
background-position: top center;
background-attachment: fixed;
background-position: center right;
}
</style>
<div class="page-container">
<div id="left-bg"></div>
<div id="right-bg"></div>
</div>
change your CSS like this:
.page-container {
position: relative;
background: #FFF;
width: 970px;
margin-left:auto;
margin-right: auto;
background-color:#F00;
}
#left-bg {
width: 306px;
height: 100%;
position:absolute;
top: 0px;
left: -306px;
background:url(http://www.superfreeslotgames.com/basecamp/L-Leovegas-banner.gif) no-repeat 100% 0;
}
#right-bg {
width: 306px;
height: 100%;
position:absolute;
top: 0px;
right: -305px;
background:url(http://www.superfreeslotgames.com/basecamp/R-Leovegas-banner.gif) no-repeat 100% 0;
}
Also, unless you're doing it by design, you should consider changing right: -305px; (which I also changed from your column because it adds a 1px blank space to the left of the column) to right:0
Usually this code works, but for some reason it's not vertically centering within it's parent element. Could this be because of the background image?
http://jsfiddle.net/tmyie/BcmNw/
<div class="background-image">
<div class="omg-title">This is the title</div>
</div>
CSS:
.background-image {
background-image: url('');
height: 600px;
background-size: contain;
position: relative;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
text-align: center;
}
.omg-title {
padding: 15px;
-webkit-transform: translate(-50%, -50%);
position: absolute;
}
Since you are using position: absolute you can remove transform and set the text to center with the following changes:
.omg-title {
top: 50%;
left: 50%;
position: absolute;
}
To perfect center horizontally you should know the width of the text, for example if it's 100px you should apply margin-left: -50px;
An example of the second solution http://jsfiddle.net/7ScDh/
If you just take away all of .omg-title's styling, it centers fine because .background-image has text-align:center;.
JSFiddle for proof
Remove the position and transform property and it will work for you:
.omg-title {
padding: 15px;
}
Try either of these, or remove absolute positioning:
1) center .omg-title div
.omg-title {
left: 50%;
position: absolute;
margin-left: -50px; // depending on width
}
2) give .omg-title div full width:
.omg-title {
width: 100%;
}
EDIT: For vertical allignment, try (demo here: http://jsfiddle.net/6E5as/):
.omg-title {
top: 50%;
position: absolute;
margin-top: -10px; // depending on height
text-align: center;
width: 100%;
}