I am working for responsive site. I want to place a small image over large image. Small image should be placed exactly center of this large image. I can't take large image as background of my page. It should be inside div. How?
JSFIDDLE
//code
<div class="text-center">
<img id="draggable1" class="img-responsive" src="http://photos.foter.com/a266/freestanding-wood-and-wire-pet-gate-size-21-width-narrow-span-2658163_300x300.jpg">
<img class="heartimg" src="http://gorgeousme.co/media/19340/heart_50x42.jpg"/>
</img>
</div>
Use absolute positioning on the heart img
JSFiddle Demo
CSS
.text-center {
display: inline-block;
border:1px solid grey;
position: relative;
}
.text-center img {
display: block;
}
.text-center .heartimg {
position: absolute;
top:50%;
left:50%;
margin-top:-25px; /* half of it's height */
margin-left:-21px; /* half of it's width */
}
The <img> element cannot contain other elements inside. So you can't do something like <img><img/></img>
Nest both images under the same div and use position: absolute; and position: relative to align your image.
Here's a Kitten-based example:
HTML
<div class="text-center">
<img class="largeImage" src="http://placekitten.com/g/500/600?ext=.jpg" alt="Large kitten"/>
<img class="smallImage" src="http://placekitten.com/g/50/50?ext.jpg" alt="Tiny kitten"/>
</div>
CSS
.text-center {
display: inline-block; /* Inline block to match large image dimensions */
position: relative;
}
.smallImage {
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px; /* Half the image's size. */
margin-left: -25px;
}
You can use CSS position to achieve what you want.
In MDN you can retrieve information about different CSS position and its uses.
Based on your fiddle, you can add the following css class and the heart image will be on top of the other image:
.heartimg {
position: relative;
top: -55px;
left: -55px
}
Basically by positioning "relative" you can move the heart image relative to where it normally would have shown. An example fiddle with that working is here: http://jsfiddle.net/du84q/ Best of luck!
Note: As others have noted you shouldn't be nesting the "img" tag either. Browsers tend to ignore this, but it doesn't strictly do you any good.
Related
I have an image inside of a div to put a button on the image. I've searched around the web but can't find any way to center the image.
I've tried making it it's own class and centering the img tag itself, but none of them seem to work.
<div class="container">
<img src="https://cdn.discordapp.com/avatars/543553627600584735/470015f633d8ae88462c3cf9fa7fd01f.png?size=256" alt="utili">
Utili
</div>
The image should be centered in the middle of the page, so I can line up 3.
In HTML:
<img src="paris.jpg" alt="Paris" class="center">
To center an image, set left and right margin to auto and make it into a block element:
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
So, you can center any image while its inside a div. I hope this might help you.
You could position the .btn absolute to the relative container. If you know the size you want your image, even better.
How I would attempt to achieve it:
.container {
position: relative;
height: (the height of your image);
width: (the width of your image);
}
img {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
.btn {
position: absolute;
bottom: (however far you want it from the bottom in pxs - so lets say 10px);
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
I'm trying to get exactly the same effect as here: Responsive images positioned over image , so I want my absolute positioned elements to stay in the same place but get smaller or bigger when the browser is being sized. I tried many different possibilites, before I worked with this code, but I don't understand why my wrapping container (id="wrapper") is placed under the image. And to get the question mark on the image I would need to use minus percentage. In the example I copied from another question in stackoverflow there are bootstrap styles. I don't know and I don't want to use bootstrap though. I will be very grateful for all suggiestions what I'm doing wrong.
#wrapper {
position: relative;
display: inline;
}
#questionMark {
position:absolute;
left:33%;
top:-43%;
max-width: 10%;
}
This is my fiddle: https://jsfiddle.net/8obzf2c8/2/
inline elements doesn't get the height of the elements inside them.
You should remove the display: inline from the #wrapper element.
#wrapper {
position: relative;
margin-top: 150px;
}
#questionMark {
position:absolute;
left:33%;
top:-43%;
max-width: 10%;
}
<div id=wrapper>
<img src="http://e.allegroimg.pl/s400/19/53/89/71/60/5389716014"/>
<img id="questionMark" src="https://image.freepik.com/free-icon/speech-bubble-with-question-mark_318-78800.png"/>
</div>
I also set margin-top to make sure the question mark image is in the viewport.
Your wrapper has property display: inline; so it behave like a fe. span element, it is not a block.
Change display: inline; to display: inline-block; so the wrapper behaves like inline container. You will also need to change this weird top: -43%; to fe. top: 43% as things will get more normal and predictable.
Use display:inline-block; instead of inline
#wrapper {
position: relative;
display: inline-block;
}
#questionMark {
position:absolute;
left:33%;
top:43%;
max-width: 10%;
}
This will make the image placed in the center and will also be responsive with all screen sizes.
#wrapper {
position: relative;
display: inline-block;
}
img{
width: 100%;
height: auto;
}
#questionMark {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 10%;
}
<div id=wrapper>
<img src="http://e.allegroimg.pl/s400/19/53/89/71/60/5389716014"/>
<img id="questionMark" src="https://image.freepik.com/free-icon/speech-bubble-with-question-mark_318-78800.png"/>
</div>
Hope this helps,
Here is the thing.. I have a web page split to 2 sections (intro and main)
The intro section stretches to 100 based on the browser height with CSS:
#intro {
height: 100vh;
}
I want to add an arrow with href that will be positioned at the bottom section of the intro div no matter which screen size is entering the page.
Do you have any idea how can it be done?
Thanks!
#intro {
...
position: relative; /* or absolute, as appropriate */
}
#down_arrow {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -25px; /* half the element's width */
}
This assumes markup similar to the following. In the future, please provide your markup in your question.
<div id="intro">
<div id="down_arrow"> ... </div>
</div>
Set position:relative to the #intro element and position:absolute to the arrow.
Also give a bottom and left rule:
#arrow {
width:40px; /* sample width - set as you wish */
position:absolute;
bottom:10px;
left:50%;
margin-left:-20px; /* important: set half of the width (centers the div) */
}
margin-top:90vh
:D and I need to write some text so stackoverflow knows I'm not spamming.
Rich homie quan is a good rapper. I think the limit has been reached, now.
Did You mean something like this Fiddle
I use positioning of intro element as relative and set this viewportheight as you want.
So if i set arrow postion to absolute it will stay inside intro element.
.arrow{
width: 50px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -25px;
}
Using flexbox (demo):
<div class="intro">
<div class="nav"></div>
<div class="link-container">
<a>Arrow</a>
</div>
</div>
<div class="main"></div>
CSS:
.intro {
height: 100vh;
display: flex;
flex-direction: column;
background: blue;
}
.intro > .link-container {
position: absolute;
bottom: 20px;
text-align: center;
width: 100%;
}
...
Place the arrow inside of the intro container and use:
.arrow{
bottom: 0px;
}
you may also need to fiddle around with the POSITION property as well, but this should give you what you need. Hope this helps!
.section2 {
position:fixed;
bottom:0;
}
#intro {
position: relative;
}
Add appropriate styles to make it as center of the screen.
In my layout, I am trying to output php generated items.
Each item retrieved from the database has a title, an image and a description.
I am trying to generate a layout that would have a thumbnail header composed of the img as a background (with the css style border-radius: 50%) and the title as a banner centered in the middle and taking the whole width. But using top 50% on the absolutely positioned div.title centers via the top edge and the div.title's height is dependent on font size.
I am wondering if there is a way to perfectly center the title, while keeping the border-radius effect considering that the only actual known dimension is the div.item's width and all height data is ultimately determined by .thumbnail-wrapper img and .title's font-size
the html is
<div id="container">
<div class="item">
<div class="thumbnail-wrapper">
<img />
<div class="title">Title</div>
</div>
<div class="content">Content</div>
</div>
</div>
The CSS
#container {
width: 600px;
}
.item {
position: relative;
display: inline-block;
width: 50%;
}
.thumbnail-wrapper {
text-align: center;
position: relative;
}
.thumbnail-wrapper img {
border-radius: 50%;
}
.title {
width: 100%;
position: absolute;
top: 50%; /* this is the problem */
}
Thanks!
JSFiddle example
Try this CSS for centering an absolutely positioned element (i.e. add it to div.title):
/* centering css */
top: 50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
Updated your JSFiddle Demo
Reference
What I want to do is to make a image fill it's parent element.
<div class="parent">
<img src="image.jpg">
</div>
If in my CSS I use:
img{
width: 100%;
}
It will make the image fill it's parent but just horizontally but if the image is smaller vertically it will leave a empty space. Like this:
What I really want to do is to make the image to cover the whole thing. I also don't want to use overflow: hidden, because if the image is way bigger than it's parent the image will be cut. I want to make the image to resize and cover it's parent like using background-size: cover, with the difference that this is not a CSS background but inner element.
Can someone help me please?
Thank you.
You can use some css and a wrapper element to accomplish this. The size applied to the parent is for example only and doesn't need to be there. You will need overflow:hidden though.
HTML
<div class="parent">
<div class="img-container">
<img src="http://placehold.it/200x300"/>
</div>
</div>
CSS
.parent{
width:200px;
height:300px;
overflow:hidden;
}
.img-container{
position:relative;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.img-container img{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
Fiddle http://jsfiddle.net/dquN6/
Adapted from http://css-tricks.com/perfect-full-page-background-image/
If you want your image to cover its parent without preserving the aspect ratio, you only need to add height:100% in the css of your image. Like this:
img {
width:100%;
height:100%;
}