I want to position the img element in the middle of the site.
I already tried to postion it in css with the bottom tag to no avail
CSS:
img {
border-radius: 50%;
display: block;
width: 128px;
margin-left: auto;
margin-right: auto;
}
HTML:
<html>
<div class="logo">
<img src="assets/img/logo-icon.png" alt="Avatar"></div>
A simple option is to place an object in the center, you need to set its absolute position and the width of the parent block in % and then use left and right to center it.
.logo {
width: 10%;
height: 125px;
border-radius: 40%;
position: absolute;
left: 45%;
right: 45%;
top: 40%;
}
<html>
<body>
<div class="logo">
<img src="https://new-world-rpg.ru/wp-content/uploads/c/d/b/cdb30fb67d36f487047a812eef6c458d.jpeg" alt="Avatar">
</div>
</body>
</html>
Related
This is what I have:
I want it to be:
Code snippet:
.test0 {
float: left;
width: 0%;
height: 100px;
}
<div class="test0">
<img src="../arrow.png" height="30px" width="100px">
</div>
Really not able to fix this all day.
You can use positioning to achieve this. You need to make the parent div relative and the child have a position of absolute.
See Codepen
CSS
.test0 {
position: relative;
float: left;
width: 0%;
height: 100px;
}
.test0 img {
position: absolute;
left: -20px;
}
I have been trying to keep the text inside the image when I resize the browser. I've tried floating it as well.
<div class="image">
<img src="background2.jpg">
<h1>Hello</h1>
</div>
And here is the CSS
.image img{
width: 90%;
display: block;
margin: auto;
position: relative;
}
h1{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
}
You want the parent element (.image) to be position: relative so that it's what the h1 will be absolutely positioned relative to. You can also give it the width and margin that center it at 90% of the page. Then make the image 100% width of the parent, and use top: 50%; left: 50%; transform: translate(-50%,-50%); to absolutely center the text vertically and horizontally.
.image {
width: 90%;
display: block;
margin: auto;
position: relative;
}
.image img {
width: 100%;
display: block;
}
.stuff {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
<div class="image">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
<div class="stuff">
<h1>Hello</h1>
<h2>Foobar</h2>
</div>
</div>
You can try making the image the background of the parent div:
<div class="image">
<h1>Hello</h1>
</div>
The css would look something like this:
.image {
background: url('background2.jpg') no-repeat center center;
background-size: cover;
}
Here is my fiddle:
JSFiddle
You can find the sources here in a JSFiddle.
CSS
.container {
width: 100%;
height: 350px;
float: right;
}
.box {
margin-top: -350px;
float: right;
width: 100%;
}
.box:first-child {
margin-top: 0;
}
img {
width: 50%;
height: 350px;
float:right;
}
.top-section {
width: 50%;
background-color: red;
height: 175px;
}
.bottom-section {
width: 50%;
background-color: blue;
height: 175px;
}
HTML
<div class="container">
<div class="box">
<img src="http://st.hzcdn.com/simgs/7d0137b70f7848d3_3-3892/modern-futons.jpg">
<div class="top-section">
some text.......
</div>
<div class="bottom-section">
some other text.....
</div>
</div>
<div class="box">
<img src="http://i.ebayimg.com/00/s/MzAwWDMwMA==/z/JLYAAOSwxH1UBi1~/$_35.JPG?set_id=2">
<div class="top-section">
some text.......
</div>
<div class="bottom-section">
some other text.....
</div>
</div>
</div>
I have two divs stacked on top of each other (div.box) using margin-top. each div.box is divided into 3 section: a section for a picture, one for some text and another for some other text.
I'm trying to make div.top-section and div.bottom-section the same height and my problem is this:
I want my pictures to be responsive using width:100%;height:auto but I want at the same time, whenever a user resize the window, div.top-section and div.bottom-section don't loose their height relevant to the picture. I mean I want div.top-section and div.bottom-section, each have 1/2 image height and using % unit and not pixel.
How can I achieve this? Thanks in advance.
You can do this with absolute positioning. You can position the container your holding this all in to relative and then posiiton all of your inner content to absolute. Then give your container a padding-bottom of a percentage and play with this percentage until you get your desired height. Then give your text section absolute positioning and a height of 50% and your image a height of 100% and width of 50% and position this to the right.
This can be acheived one of 2 ways. You can use just the image and position that absolutely like so:
html:
<div class="container">
<div class="text-1">
Text 1
</div>
<div class="text-2">
Text 2
</div>
<img src="http://st.hzcdn.com/simgs/7d0137b70f7848d3_3-3892/modern-futons.jpg"/>
</div>
Css:
.container{
position: relative;
padding-bottom: 60%;
}
.text-1{
position: absolute;
left: 0;
top: 0;
height: 50%;
width: 50%;
background: red;
}
.text-2{
position: absolute;
left: 0;
top: 50%;
height: 50%;
width: 50%;
background: blue;
}
.container img{
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
}
Here is a working fiddle of that method Fiddle
Next if you don't want to lose the aspect ratio of the image. Say you have a tall image and a short image and you want to use this multiple times on your page. You can put another div in the container and position this to the right and place your image as the background of this div like so:
Html:
<div class="container">
<div class="text-1">
Text 1
</div>
<div class="text-2">
Text 2
</div>
<div class="image-section" style="background:url('http://st.hzcdn.com/simgs/7d0137b70f7848d3_3-3892/modern-futons.jpg')"></div>
</div>
Css:
.container{
position: relative;
padding-bottom: 60%;
}
.text-1{
position: absolute;
left: 0;
top: 0;
height: 50%;
width: 50%;
background: red;
}
.text-2{
position: absolute;
left: 0;
top: 50%;
height: 50%;
width: 50%;
background: blue;
}
.image-section{
position: absolute;
right: 0;
top: 0;
background-size:cover !Important;
background-position:center !Important;
backgroung-repeat:no-repeat !Important;
height: 100%;
width: 50%;
}
Here is a working fiddle of that Fiddle
I wanna make overlay background image to image. the code is here.
How can I put background image over img element?
my html is;
<div id="sidebar">
<div class="editor-select">
<img src="http://i.imgur.com/mh3noQH.jpg" alt="img"/>
</div>
</div>
my css is;
#sidebar{
width: 344px;
background: url("http://i.imgur.com/BQc7nYP.png") no-repeat top right !important;
float: left;
height: 500px;
margin-top: 45px;
padding: 8px;
position: relative;
z-index: 1000;
}
.editor-select{
width: 350px;
height: 360px;
position: relative;
}
.editor-select>img{
width: 320px;
height: 160px;
z-index : -1;
}
You can't. Your img element is contained within the #sidebar element, which effectively makes the img element on top of the #sidebar element. You cannot position a parent element on top of its child.
Pure CSS Solution
What you can do, however, is use a pseudo-element (:before or :after), positioned on top of your img element (which I've offset by 6px on all 4 sides to allow the image to overlap properly):
.editor-select:after {
content: '';
position: absolute;
top: -6px;
left: -6px;
height: 172px;
width: 332px;
background: url("http://i.imgur.com/BQc7nYP.png") no-repeat top right
}
CodePen Demo.
You can't have a background for a given element above the element contents .... You'll need to make some adjustments to your markup.
I forked your pen: http://codepen.io/anon/pen/ipmDv
This is your new HTML:
<div id="sidebar">
<div class="overlay"></div>
<img src="http://i.imgur.com/mh3noQH.jpg" alt="resim"/>
</div>
And your new CSS:
#sidebar{
width: 344px;
float: left;
height: 500px;
margin-top: 45px;
padding: 8px;
position: relative;
z-index: 1000;
}
.overlay{
width: 116px;
height: 116px;
position: absolute;
z-index:1000;
background: url("http://i.imgur.com/BQc7nYP.png") no-repeat top right !important;
top:0px;
right:25px;
}
I need to put image of play-button on center of big picture like this https://drive.google.com/file/d/0B-humNPiH1w8Mnp6dWhjcG1kR0E/edit?usp=sharing
Now I got this:
<style type="text/css">
.imgA1 { position:absolute;}
.imgB1 { position:absolute; top: 0px; left: 0px;}
</style>
<img class=imgA1 src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png">
<img class=imgB1 src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTDPvq3uKG_PYVLgF4Mg1bqXKmpVzmAhpPdjRhK4dy1QA-PND-iMTuHLg">
Can somebody help to newby?
Here is the code,
<div class="container">
<img class=imgA1 src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" />
<img class=imgB1 src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTDPvq3uKG_PYVLgF4Mg1bqXKmpVzmAhpPdjRhK4dy1QA-PND-iMTuHLg" />
</div>
CSS class,
.container {
position: relative;
width: 322px;
height: 346px;
}
.imgB1 {
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
DEMO
The simplest way would be set the larger image as the background image of a div & then adjust the play button in the center as shown below.
Adjust height & width as per as image
<style type="text/css">
.ImgContainer {
background-image: url("http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png");
display: table-cell;
height: 322px;
width: 346px;
text-align: center;
vertical-align: middle;
}
</style>
<div class="ImgContainer">
<img class="imgB1" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTDPvq3uKG_PYVLgF4Mg1bqXKmpVzmAhpPdjRhK4dy1QA-PND-iMTuHLg">
</div>