How to position image so it overlaps the background image - html

Will i need javascript? or html css is enough, if so, should i use position or what properties to do that?
If I did not describe clearly then the picture may help to demonstrate

Use position relative on the top div and Position absolute on the img
DEMO:
MARKUP:
<section>
<article>
<figure></figure>
</article>
<article></article>
</section>
STYLE:
*{box-sizing:border-box; padding: 0; margin:0;}
section{
width:480px;
border:2px solid #ccc;
margin:0 auto;
padding: 20px 0;
}
article{
min-height:320px;
width:100%;
display:block;
clear:both;
border-bottom:2px solid #ccc;
position:relative;
}
figure{
position:absolute;
bottom:-40px;
right:10px;
width:80px;
height:80px;
background:#ccc;
}

do further demonstrate kougiland's point, here is a fiddle that has what you want:
.header{
height: 200px;
width: 100%;
background: #000;
position: relative;
}
.image{
height: 100px;
width: 100px;
background: red;
position: absolute;
right: 50px;
bottom: -50px;
}
JSFIDDLE

Related

css image with border-radius

I am trying to replicate this style, which has a background image, on the other hand I have a div over it that has a right border-radius, I can't do it, I provided the following options adapting them, but I couldn't
enter image description here
Transparent hollow or cut out circle
div{
position:relative;
width:500px; height:200px;
margin:0 auto;
overflow:hidden;
}
div:after{
content:'';
position:absolute;
left:175px; top:25px;
border-radius:100%;
width:150px; height:150px;
box-shadow: 0px 0px 0px 2000px #E3DFD2;
}
body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg';
Background with radius-top inside
div {
background:lightgreen;
width:100%;
height:200px;
position:relative;
text-align:center;
padding:100px 0 0 0;
box-sizing:border-box;
}
div:before {
content:'';
position:absolute;
background:white;
width:100%;
height:100px;
top:0;
left:0;
border-radius:40%;
transform:translatey(-50%);
}
The cut out example with the circle suits fine, You just need to play around with the values in the DevTools/Inspector.
Adjust heights/widths of the :before to stretch the curve to your liking or even mess with % of border radius, then the border width for how much space around it, the top and left to position it to the edges, then use the parent container to trim off right and bottom areas.
.banner {
background: url(https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg);
background-size: cover;
}
.shape {
position: relative;
width: 170px;
height: 440px;
overflow: hidden;
}
.shape:after {
content: '';
position: absolute;
left: -100px;
top: -200px;
border-radius: 100%;
width: 151px;
height: 440px;
border: 200px solid #ffffff;
}
<div class="banner">
<div class="shape">
</div>
</div>
you can do this by clip-path property ..
Note : minimum width required otherwise shape will not display
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
width: 100%;
margin: 0 auto;
display: flex;
}
.left{
width: 10%;
}
.image {
width: 90%;
height: 400px;
overflow: hidden;
background: url(https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg);
background-size: cover;
clip-path: circle(100% at 100% 50%);
}
<div class="container">
<div class="left">
</div>
<div class="image">
</div>
</div>

Creating a circular border radius on multiple child components

so what i am trying to do is have a circle which inside of it, contains an image and a description which overlays the image at 50% Opacity. Heres the result so far:
So, obviously, i want the entire div to have this border-radius, and so far have had to set the parent and img components to have this certain border-radius. What i was wondering was how to have all elements with a circular radius,
(bonus points possibly using border-radius: XX% and not border-radius: XXpx;). Heres what i have tried so far:
JSX
return(
<div className="container">
<img src={this.props.src} alt=""/>
<div className="descriptor">
<h4>{this.props.title}</h4>
</div>
</div>
);
CSS
.container{
margin: 20px;
height: 200px;
width: 200px;
border-radius: 20px;
position: relative;
border-radius: 100px;
display: inline-block;
border-radius:100px;
border:2px solid red;
}
.container img{
max-width:100%;
border-radius:100px;
float: left;
}
.descriptor{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30%;
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
color: white;
opacity: 0.5;
/*NOTE: Here i have tried using things like border-bottom-left-radius: 750px;
But yeah that didnt work*/
}
Here's a demonstration with the comments for the appropriate CSS style attributes.
.roundc{
width:300px; /*Width and height need to be equal for border radius*/
height:300px; /*50% to work and make the square circular */
display:inline-block;
border-radius: 50%; /*Make the container circular */
border:3px solid red;
overflow: hidden; /*Hide the content overflow */
position:relative; /*To use absolute positioning on img*/
}
.roundc img{ /*To center the large image */
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.roundc span{
position:absolute;
z-index:1;
background:red;
color:white;
width:300px;
height:30px;
text-align:center;
bottom:0;
}
<div class="roundc">
<img src="http://via.placeholder.com/350x350">
<span> About me </span>
</div>

Float:right causing anchor to stretch with line-height

I want to position my anchor to middle (vertical) inside a fixed div.
I can't use display:table/table-cell because of other content inside my div, so I thought line-height would be the best alternative.
My problem is that the anchor will stretch out when I put line-height with it, but only if it's floated.
HTML:
<div class="fixed">
<a class="btn" href="#">btn1</a>
</div>
CSS:
.fixed
{
height: 100px;
width: 100%;
background-color:grey;
position:fixed;
}
.btn
{
padding: 3px 9px;
background-color:red;
color:white;
line-height:100px;
float:right;
}
JSfiddle: https://jsfiddle.net/828zrzrk/
add display:block;
change padding value.
.fixed
{
height: 100px;
width: 100%;
background-color:grey;
position:fixed;
top:0;left:0;
}
.btn
{
display:block;
padding: 0 9px;
background-color:red;
color:white;
line-height:100px;
float:right;
}
<div class="fixed">
<a class="btn" href="#">btn1</a>
</div>
is this what you need?
```
.btn {
**
width: WIDTH;
height: HEIGHT;
position: absolute;
left: 50%;
top: 50%;
margin-top: -WIDTH/2;
margin-left: -HEIGHT/2;
}
```
Demo

How to arrange div structure with radius using CSS

I am trying to create HTML page shown in this sample image.
I want to place other component on top of this black and maroon circles. For this I am using tag Structure of div and span. And using span background-image to apply this image as background.
My problem is what will be structure of div and span to arrange black circle on radius of div/span tags containing maroon circle as background.
Till now I have center circle placed. I don't know how to arrange other circles around it
div.table-text {
position: fixed;
top: 20%;
left: 20%
}
span.table-text {
position: inherit;
display: block;
width: 60%;
height: 60%;
background-image: url(../images/table-text.png);
background-position: bottom;
background-repeat: no-repeat;
}
<div class="table-text">
<span class="table-text">
</span>
</div>
Im not sure I understood the question, but I'll try to answer.
You can't use something like cos() to arrange elements on HTML, you will have to use negatives margin-top: or position: absolute;
My advise: use negative margins, for the black dots on the left and right.
Edit: I did your job, now pay me! #:
.circle {
display: inline-block;
border-radius: 200px;
position: absolute;
width: 100px;
height: 100px;
background-color: black;
}
#bigCircle {
border-radius: 200px;
width: 400px;
height: 400px;
margin: 0 auto;
background-color: brown;
}
#bottom {
margin: 50px calc(50% - 50px);
}
#left {
margin: -50px calc(25% - 50px);
}
#right {
margin: -50px calc(75% - 50px);
}
<div id="bigCircle"></div>
<div class="circle" id="left"></div>
<div class="circle" id="bottom"></div>
<div class="circle" id="right"></div>
JSFiddle - DEMO
Without knowing the rest of your document structure, I've thrown together this proof of concept for you using absolute positioning which should, hopefully, point you in the right direction.
If you need clarification on anything or any of it doesn't suit your needs, please let me know and I'll attempt to update it accordingly.
*{
box-sizing:border-box;
color:#fff;
font-family:sans-serif;
}
.top{
background:red;
border-radius:50%;
margin:-10% auto 0;
padding:0 0 75%;
position:relative;
width:75%;
}
div>div{
background:green;
border-radius:50%;
overflow:hidden;
padding:0 0 20%;
position:absolute;
width:20%;
}
div.one{
left:-10%;
top:80%;
}
div.two{
left:40%;
top:103%;
}
div.three{
right:-10%;
top:80%;
}
p{
text-align:center;
position:absolute;
margin:0;
width:100%;
}
.top>p{
top:15%
}
.top>div>p{
top:5%;
}
<div class="top">
<p>top</p>
<div class="one">
<p>one</p>
</div>
<div class="two">
<p>two</p>
</div>
<div class="three">
<p>three</p>
</div>
</div>
I think you want like here
for responsive you can use value in percentages or max-width.
<div class="maroon">
<div class="m-child m-child1"></div>
<div class="m-child m-child2"></div>
<div class="m-child m-child3"></div>
<div class="m-child m-child4"></div>
</div>
.maroon{
max-width: 300px;
max-height:300px;
background:maroon;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
.m-child, .maroon{
position: absolute;
border-radius:100%;
}
.m-child{
background: #000;
width:100px;
height:100px;
}
.m-child1{
left: -50px;
top:0;
bottom: 0;
margin: auto;
}
.m-child2{
right: -50px;
top:0;
bottom: 0;
margin: auto;
}
.m-child3{
top: -50px;
left: 0;
right:0;
margin: auto;
}
.m-child4{
bottom: -50px;
left: 0;
right:0;
margin: auto;
}
I think you need something like following: You can make changes as per your requirement.
.middle_circle {
background: none repeat scroll 0 0 red;
border-radius: 100%;
height: 200px;
left: 220px;
position: absolute;
top: 60px;
width: 200px;
}
.circle{
position:relative;
width:5%;padding-bottom:50%;
margin-left:47.5%;
}
.circle div {
position:absolute;
top:0; left:0;
width:100%; height:100%;
-webkit-transform : rotate(24deg);
-ms-transform : rotate(24deg);
transform : rotate(24deg);
}
.circle:before, .circle div:before {
content:'';
position:absolute;
top:0; left:0;
width:100%; padding-bottom:100%;
border-radius: 100%; background:black;
}
<div class="circle">
<div><div><div><div><div><div><div><div><div><div><div><div><div><div><div>
</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
</div>
<div class="middle_circle"></div>
Check Fiddle.

Center div inside parent div

I'm trying to center a div inside a parent div based on the dimensions of the parent div. I have tried using:
display: inline-block;
because I have seen other questions where this was used to center the div but I am not having luck.
BOX1 should be centered insdie of test
<div class="tab-pane" id = "test">
<div id="Box2">
<h1> Graph Text </h1>
</div>
<div id="BOX1">
</div>
</div>
#test {
width:700px;
height: 500px;
background: grey;
position:relative;
}
#BOX1 {
display: inline-block;
width: 500px;
height: 300px;
background: lightgrey;
position:absolute;
z-index:1;
}
#Box2{
width: 250px;
height: 50px;
background: lightblue;
position:absolute;
left: 125px;
z-index:2;
}
h1 {
font: 25px Helvetica, sans-serif;
text-align: center;
}
http://jsfiddle.net/bahanson/xvL2qvx0/5/
try this :demo
#test {
width:700px;
height: 500px;
background: grey;
position:relative;
}
#BOX1 {
margin:0 auto;
width: 500px;
height: 300px;
background: lightgrey;
position:relative;
z-index:1;
}
#Box2{
width: 250px;
height: 50px;
background: lightblue;
position:absolute;
left: 125px;
z-index:2;
}
h1 {
font: 25px Helvetica, sans-serif;
text-align: center;
}
<div id="test" class="tab-pane">
<div id="BOX1">
<div id="Box2">
<h1> Graph Text </h1>
</div>
</div>
</div>
Adding this to the box 1 css does what you want and will keep the child centered if the parent width changes.
left: 50%;
margin-left: -250px;
http://jsfiddle.net/xvL2qvx0/6/
If you don't need IE8 support you can just use:
left: calc(50% - 250px);
You should read up on normal flow and CSS positioning.
http://webdesign.about.com/od/cssglossary/g/bldefnormalflow.htm
But basically, a div will always position relative to the parent div.
If you add margin: 0 auto; to a div, it should horizontally position it within the parent div
#BOX1 {
display: inline-block;
margin-left:100px;
width: 500px;
height: 300px;
background: lightgrey;
position:absolute;
z-index:1;
}
use margin-left command to adjust it to the centre....
Seen as though you are using absolute positioning you can simply give it a top,right,left and bottom of 0 and use margin:auto to centre it both horizontally and vertically.
This benefits from be able to use relative (percentage) sizing if you want and there's no maths involved. Furthermore, if you later change the dimensions (maybe via a media-query for mobile devices) you don't need to recalculate messy margins or offsets - just change the size and it will be centred.
#BOX1 {
display: block;
width: 500px; /* it will still work if you change the size */
height: 300px; /* the dimensions could be percentages if you like */
background: lightgrey;
position:absolute;
z-index:1;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
http://jsfiddle.net/xvL2qvx0/7/
#test {
width:700px;
height: 500px;
background: grey;
position:relative;
}
#BOX1 {
width: 500px;
height: 300px;
background: lightgrey;
position:absolute;
z-index:1;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
#Box2{
width: 250px;
height: 50px;
background: lightblue;
position:absolute;
left: 125px;
z-index:2;
}
h1 {
font: 25px Helvetica, sans-serif;
text-align: center;
}
<div class="tab-pane" id = "test">
<div id="Box2">
<h1> Graph Text </h1>
</div>
<div id="BOX1">
</div>
</div>