I want my text to overlap my image (only a bit) center left. I am trying things like top: -50%, but doesn't work. I won't have control over the height of the image.
I am using both relative positioned because there is a bunch one after the other, and using relative I can control the spacing between them.
css
.article-txt {
position: relative;
z-index:1;
font-size:35px;
font-weight:bold;
padding: 0 50px;
}
.article-img {
display: block;
position: relative;
margin-top:50px;
margin-bottom:-50px; /* overlap image */
z-index:0;
}
html
<div id="article-txt"></div>
<div id="article-img"></div>
what i can understand from your query you want to acheive this
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
z-index:1;
}
.overlay {
position: relative;
top:-100px;
height: 100%;
width: 100%;
opacity: 1;
z-index:9;
}
.text {
color: red;
font-size: 20px;
}
<div class="container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSt06aInHbKL6NwLIP-Kx90M-QjhLcnxEDe8LaehoDz7zuqBNFBHg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
Related
How do you center h1 in an img element, when the image is 100% of screens width and always maintaining aspect ratio? This pen shows what I mean. I've seen some answers here on SO, but the image always had width and height fixed.
to achieve your goal you need to put both img and h1 into a div and use positioning to center the h1
#headerImage {
width:100%;
margin-left:auto;
margin-right:auto;
background-position:center;
background-repeat:no-repeat;
}
#greeting{
padding: 0px;
position: relative;
}
#greetin-h1{
text-align: center;
color:#000;
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index: 9999;
}
<div id="greeting">
<img id="headerImage" src="http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg" alt=""/>
<h1 id="greetin-h1">THIS IS H1 ELEMENT</h1>
</div>
Why not using the image as background?
html, body{
width: 100vw;
}
#greeting{
padding: 140px 20px 50px 20px;
background-image: url("http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg");
background-repeat: no-repeat;
background-size: cover;
}
#greetin-h1{
text-align: center;
color:black;
}
<div id="greeting">
<h1 id="greetin-h1">THIS IS H1 ELEMENT</h1>
</div>
greeting add css style
#greetin {
padding: 140px 20px 50px 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Use a combination of relative and absolute positioning, table and table-cell display like this:
CSS:
#headerImage {
position: relative;
text-align: center;
display: inline-block;
}
#headerImage img {
max-width: 100%;
}
#greeting {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#greetin-h1 {
margin: 0;
display: table;
width: 100%;
height: 100%;
}
#greetin-h1 span {
display: table-cell;
vertical-align: middle;
}
HTML:
<div id="headerImage">
<div id="greeting">
<h1 id="greetin-h1"><span>THIS IS H1 ELEMENT</span></h1>
</div>
<img src="http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg" alt="">
</div>
Fiddle: https://jsfiddle.net/ve8sot21/1
This way the h1 will always be centered horizontally and vertically no matter the image dimension.
.wrapper {
position: relative;
}
img {
display: block;
width: 100%;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: gold;
}
<div class="wrapper">
<img src="https://www.propointgraphics.com/wp-content/uploads/2016/01/stock-photos-vince_3219813k.jpg" alt="">
<h1>Hello, World!</h1>
</div>
This question already has answers here:
How can I center an absolutely positioned element in a div?
(37 answers)
Closed 6 years ago.
I have a problem I can't solve. i m trying to center this black box inside red box which has absolute position. I tried making the black box to relative position but i feel like i am missing something.
Ultimately, i m trying to make the top header.
here is an image header-image.jpg
Help?
body.esc-layout {
min-width: 960px;
margin: 0 auto;
}
.promo-bar {
display: block;
}
.promo-bar .customer-care-wrapper {
float: left;
max-width: 50%;
}
.promo-bar .customer-care {
font-size: 11px;
color: #000;
margin-left: 15px;
display: block;
}
.promo-bar {
width: 100%;
min-height: 32px;
position: relative;
height: auto;
overflow: visible;
z-index: 5;
background-color: #EEE;
overflow: hidden;
}
.promo-bar .service-message-wrapper {
padding-top: 2px;
max-width: 50%;
margin: 0 auto;
position: relative;
}
.service-message-wrapper .service-banner{
position: absolute;
left: 0px;
right: 0px;
text-align: center;
background: red;
}
.caption-wrapper{
position: relative;
background: black;
}
.service-message-wrapper .captions{
font-family: inherit;
font-style: italic;
font-size: 14px;
color: white;
}
<body class="esc-layout">
<div class="promo-bar">
<div class="customer-care-wrapper promo-block">
<div class="customer-care" style="padding-top:10px; padding-bottoms:12px;">
" Contact us 24/7: "
</div>
</div>
<div class="service-message-wrapper promo-block" style="height: 28px;">
<div class="service-banner service-message-1" style="margin-top: 0px;">
<div class="caption-wrapper">
<p class="captions">
<span> Same-day delivery to New York </span>
</p>
</div>
</div>
</div>
</div>
</body>
You can use position: absolute with a combination of top and transform.
The trick is that in top: 50%, the 50% refers to the parent height. In transform, 50% refers to the element's own height.
.outer {
height: 50px;
width: 50%;
position: absolute;
top: 0;
right: 0;
background: red;
}
.inner {
position: absolute;
left: 0;
/* make the top edge of .inner appear in the vertical center of .outer */
top: 50%;
/* move .inner up by half of its height so that its middle is in the middle of .outer */
transform: translateY(-50%);
height: 20px;
width: 100%;
background: black;
}
<div class="outer">
<div class="inner"></div>
</div>
More info: http://howtocenterincss.com/
Centering inside an absolute element, the inner element needs to be absolute give a width and height.
.red-box{
background-color:red;
width:400px;
height:400px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
.black-box{
background-color:black;
width:200px;
height:200px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
<div class="red-box">
<div class="black-box"> </div>
</div>
working sample (click run button)
For center div it is very easy to use flex box.
div.outer {
align-items: center;
background: red none repeat scroll 0 0;
display: flex;
height: 50px;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
div.inner {
background: black none repeat scroll 0 0;
height: 20px;
left: 0;
width: 100%;
}
<html><head>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
Do not forget using webkit for safari and chrome and in your case I think it's better to set margin:0 for <p> for better control
p.captions{margin:0;}
I want to achieve a flexible container with three images. One large one the left, two smaller ones (roughly one quarter of the size) aligned to the right of it:
When resizing the browser window, I want the three images to adjust accordingly while keeping the original proportions so the large image's baseline keeps aligned with the lower small image's baseline.
So far, I've tried the following code:
<div id="space">
<div id="large">
<img src="http://placehold.it/640x420" />
</div>
<div class="small">
<img src="http://placehold.it/320x200" />
</div>
<div class="small">
<img src="http://placehold.it/320x200" />
</div>
</div>
#space {
width:100%;
}
#large {
width:60%;
float:left;
margin:1% 1%;
padding:0px;
}
.small {
width:30%;
float:left;
margin:1% 1%;
padding:0px;
}
img {
width:100%;
height:auto;
padding:0px;
margin:0px;
}
In case the images are slightly higher than the proportions allow, the images should be vertically centered in the respective container, the overflow should be hidden.
You can find this code on JSFIDDLE: https://jsfiddle.net/u8kksgbq/12/
Please help - I've been trying and trying and don't find a solution.
Thanks for your answers. This my final solution:
<section id="contact-pics">
<div class="pic-large">
<div class="dummy"></div>
<div class="pic-content">
<img src="http://192.168.178.20"/>
</div>
</div>
<div class="v-spacer">
<div class="dummy"></div>
<div class="pic-content">
</div>
</div>
<div class="pic-small">
<div class="dummy"></div>
<div class="pic-content">
<img src="http://192.168.178.20"/>
</div>
</div>
<div class="h-spacer">
<div class="dummy"></div>
<div class="pic-content">
</div>
</div>
<div class="pic-small">
<div class="dummy"></div>
<div class="pic-content">
<img src="http://192.168.178.20"/>
</div>
</div>
</section>
And the CSS:
#contact-pics {
img {
width: 100%;
height: auto;
}
overflow: auto;
.pic-large {
display: inline-block;
position: relative;
width: 65.99%;
float:left;
.dummy {
padding-top: 62%;
}
}
.pic-small {
display: inline-block;
position: relative;
width: 32.8%;
float:left;
.dummy {
padding-top: 62%;
}
}
.v-spacer {
display: inline-block;
position: relative;
width: 1.2%;
float:left;
.dummy {
padding-top: 2535%;
}
}
.h-spacer {
display: inline-block;
position: relative;
width: 32.333333%;
float:left;
.dummy {
padding-top: 2.4%;
}
}
.pic-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
Guess there are easier solutions, but this one definitely works :-)
Fiddle
I don't know how much of an answer it is, but I gave it a try.
You have to put a vertical separator between small and large images, that way you can specify the "fake" margin between them in width: xx%;
As for horizontal separator, I tried it, but couldn't get it. The only solution that I can see is to create a transparent image and put between them. Set its width: 30% , just like the photos and that way it will keep the height: auto too.
Thanks for your question, I have tested some solutions and found the answer for # is the correct one, but the code isn't placed correctly. I have edited CSS as follow:
#contact-pics {
overflow: auto;
}
#contact-pics img {
width: 100%;
height: auto;
}
.pic-large {
display: inline-block;
position: relative;
width: 65.99%;
float:right;
}
.pic-large .dummy {
padding-top: 62%;
}
.pic-small {
display: inline-block;
position: relative;
width: 32.8%;
float:right;
}
.pic-small .dummy {
padding-top: 62%;
}
.v-spacer {
display: inline-block;
position: relative;
width: 1.2%;
float:right;
}
.v-spacer .dummy {
padding-top: 2535%;
}
.h-spacer {
display: inline-block;
position: relative;
width: 32.333333%;
float:right;
}
.h-spacer .dummy {
padding-top: 2.4%;
}
.pic-content {
position: absolute;
/*top: 0;*/
bottom: 0;
left: 0;
right: 0;
}
Hello how can I set image after div with image that will suit to browser width. I have this
code but it doesn't work properly. I want to image looks like in this way I mean how to make this line between images.
.phone{
margin:0 auto;
background: url(images/umow1.png);
width:74px;
height:74px;
}
.phone:after{
content: url(images/kreska2.png);
position: relative;
top: 20px;
max-width:300px;
width:100%;
left: 72px;
}
.message{
margin:0 auto;
background: url(images/napisz1.png);
width:74px;
height:74px;
}
.location{
margin:0 auto;
background: url(images/odwiedz1.png);
width:74px;
height:74px;
}
You need to make use of z-index so you can overlap the line with your circles.
Here's my sample code, this would make it easier for you to understand the concept: http://jsfiddle.net/C2yW4/
CSS
#linear,
#circle-group {
position: absolute; /*we need a position so we can use z-index.*/
}
#linear {
top: 100px;
width: 350px;
z-index: 0; /*It means the layer is at the most bottom*/
}
#circle-group {
z-index: 1; /*This layer will be displayed upfront than the lower value*/
}
.circle {
background: #65CA22;
border-radius: 100px;
display: inline-block;
width: 100px;
height: 100px;
margin-right: 50px;
}
HTML
<div id="parent">
<div id="linear">
<hr />
</div>
<div id="circle-group">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
Make sure to apply absolute/fixed/relative position so z-index would work.
I have a wide image that I want to absolutely position a transparent div in its bottom.
<div class="background">
<img src="background.jpg" class="image">
<div class="box">
<p>paragraph</p>
</div>
</div>
css:
.background {
Position: relative;
}
.image {
width: 100%;
display: block;
}
.box {
background: #CC333F;
color: white;
position: absolute;
bottom: 0;
}
problem is .box seems to be displayed as inline-block, I want it to take all the available width of the page, but it ends right where the paragraph does.
edit .box like this:
.box {
background: #CC333F;
color: white;
position: absolute;
bottom: 0;
right:0; /* added */
left:0; /* added */
}
You can also
just add width:100%;
as in
.box {
background: #CC333F;
color: white;
position: absolute;
bottom: 0;
width:100%;
}