I have a div which has a background-img and and img element that is inside this div. I want the background-img to be shown on top of the img. Both images are positioned relative. I know this sounds a little weird, I mean this is a "background" image, but if there is any way for doing this that would really help me
This is my code in a simple way:
<div id="sample_div">
<img src="path of the image">
</div>
<style>
#sample_div{
position: relative;
background-img= url(another path);
}
#sample_div img{
position:relative;
}
</style>
More info about these images:
The background image is a floor with the 1800*150 dimension and I want to show 2 characters standing on top of it. I want to align these 2 images in a way that they stand on top of this floor image and their feet go a little under the top surface of the floor. Thought this might help to figure out what I reallt want to do
z-index: 100;
Z-Index, will always reposition of things, whether you want things in front or the back. And of course, to make things go back, make it a negative number. It dont have to be 100, I always just use larger numbers. Hope this helps
You can use pseudo elements for this case:
Demo: http://jsfiddle.net/GCu2D/364/
HMTL:
<div id="sample_div">
<img src="http://www.lorempixel.com/400/200/sports/2" />
</div>
CSS:
#sample_div {
position: relative;
}
#sample_div:after {
position:absolute;
content:url(http://www.lorempixel.com/400/200/sports/1);
top:0;
bottom:0;
right:0;
left:0;
z-index:1;
}
#sample_div img {
position:relative;
}
Don't need to move it anywhere, just hide the child image when you need to:
.hide-inner-contents {
background-image:url(src);
}
.hide-inner-contents > img{
display:none;
}
<div class="hide-inner-contents"><img/></div>
Related
i want to make a slideshow and it should look like this.
but what i have is this . preview
as you can see the problem is left side arrow [rig_arrow] is invisible and i know it's underneath of main div.i want to know how can i modify codes to visible both divs.
this is the code
html
<div class="arrow" id="rig_arrow">></div>
<div class="arrow" id="main"></div>
<div class="arrow" id="lef_arrow"><</div>
css
.arrow{
float:left;
}
#main{
width:200px;
height:50px;
background-color:rgb(153,153,153);
}
#rig_arrow{
background-color:rgb(204,204,204);
width:20px;
margin-right:-20px;
}
#lef_arrow{
background-color:rgb(204,204,204);
width:20px;
margin-left:-20px;
}
The problem is that the divs stack on top of each other in the order they appear in the DOM. You could change the order by putting #main first, but then you'd need something different than just float: left.
Another trick to change the layer order is to use position: relative on the right arrow:
#rig_arrow{
background-color:rgb(204,204,204);
width:20px;
margin-right:-20px;
position: relative;
}
Example: https://jsfiddle.net/ykLjy4L2/1/
See the fiddle
No need to change your markup..Just add the below css..
Add
position: relative;
to your CSS for #rig_arrow and #lef_arrow or add these two styles to .arrow.
I’ve got some markup that doesn’t have much flexibility. It contains a simple link with an image inside of it. I’m trying to use CSS to get the image to display below the text. However, the only way I can do this is with absolute positioning. I thought there was another way to do this without having to resort to that. Any ideas? Also, I’m trying to get the image to display to the right of the text. I can do this by floating the image to the right, but the image appears all the way to the right of the container. Does anyone know how I can get the image to appear right next to the text? I don't really have the flexibility of adding a span tag around the link text.
a img{ position: absolute; top:30px }
<a href="#">
<img src="http://placehold.it/350x150”>
Enter Header
</a>
Not using position as you mentioned in your question, and keeping the same HTML you can put image right sided to text:
see the snippet below:
a {
display: inline-block;
width: auto;
}
a img {
float: right;
margin-left: 10px;
}
<a href="#">
<img src="http://placehold.it/150x100" />Enter Header
</a>
UPDATE Based on OP question in comment here is how to put text above image.
Thanks, what about the instance when I want the text above the image?
and after a discussion with OP, it was possible to use position after all.
a {
position: relative;
}
a img {
position: absolute;
top: 25px
}
<a href="#">
<img src="http://placehold.it/150x100" />Enter Header
</a>
Try setting the a as block, and relative:
a { display: block; position: relative }
this should work:
a img {
display:inline-block;
vertical-align:middle;
float:right;
}
a {
display:inline-block;
line-height:150px; (or any height of the image)
}
fiddle: http://jsfiddle.net/Monteduro/nt44h5r5/14/
Try using CSS display block.
http://jsfiddle.net/nt44h5r5/15/
a img {
}
To use float properly, you need to have a container (DIV) at a set width. I believe this is what you're looking for (jsfidd link).
I don't really know how to approach this, but this is what I'm trying to do, placing the white arrowbox:
I know how to do an arrowbox, but placing it like that is a mystery to me. At the moment I have two sections, upper and lower, and then tried giving the box an absolute position, but didn't work.
How should I approach this problem? I'm sure there is an easy solution, but I'm not that experienced with CSS.
didn't understand your question very well myself. IF you are trying to position your box in the middle of the lower blue container with: position:absolute I would try this myself
.box {
height:100px;
width:300px;
background-color:red;
position:absolute;
top:-50px;
left:50%;
margin-left:-150px; /*this has to be half your box width negative margin*/
}
Don't forget to add position relative to your blue div (or fixed, or absolute... just not default static). A fiddle as an example ( I add css box arrow just in case you need it): http://jsfiddle.net/j5a0227s/1/
Clearly misunderstood your question. Please see the updated JSFiddle.
This places a green block below the middle circle, but by giving it the position: absolute, you can change the location with margin-top. I don't know how this reacts in responsive websites, you might want to tweak it a bit.
Edit2: Even better is to place the white block in the div you have above the circles. See this updated JSfiddle.
HTML
<div class="main">
<div class="container0">
<div class="hover2"></div>
</div>
</div>
CSS
.main {
margin-top:100px;
}
.hover2 {
height: 50px;
width: 100px;
background: green;
margin-left:180px;
position: absolute;
margin-top:60px;
}
.container0 {
background: purple;
width: 100%;
height:100px
}
Wrap your two sections with a div and take a close look at this interesting article: Centering in CSS: A Complete Guide.
I'm sure this is super simple, but I'm new to css. I'm essentially trying to position some rendered typography and make it stay centred no matter what the size of the browser is. I've tried using margins with percents, but that doesn't seem to work.
Here's my code.
html
<div class="weare">
<img src="image/textrenders/weare.png" />
</div>
<div class="shaftesburytv">
<img src="image/textrenders/Shaftesburytv.png" />
</div>
<div class="awebbasedstudio">
<img src="image/textrenders/awebbasedstudio.png" />
</div>
css
.weare {}
.shaftesburytv {}
.awebbasedstudio {}
I want the result to look something like this
Any help would be appreciated.
Simplify your content:
<div id="container">
<img src="http://placekitten.com/200/50">
<img src="http://placekitten.com/300/100">
<img src="http://placekitten.com/250/75">
</div>
Then ensure the container has the same width as the largest contained image, and apply margin:0 auto; to it to center. Finally put display:block on the images to make them all stack vertically:
#container {
margin:100px auto;
width:300px;
}
#container img {
display:block;
}
Sample here.
Alternatively, if you also want to center vertically, you can also use absolute positioning and then negative margins on the absolute size of the object - no problem for you since the image sizes are fixed:
#container {
margin-left:-150px;
margin-top:-112px;
left:50%;
position:absolute;
top:50%;
}
#container img {
display:block;
}
Sample of this approach here.
Since you're using images, you could
margin: 0 auto;
to them. For text, you could
text-align:center;
With divs, you could also center align them (in HTML).
You could also use center tags: http://jsfiddle.net/A33J2/
It can be verry simple.
If you do not split your image and gather all text of it into one.
html
<img id="my-whole-image" src="http://placekitten.com/300/250" />
css
#my-whole-image {
margin-left:-150px;
margin-top:-125px;
left:50%;
position:absolute;
top:50%;
display:block;
}
jsFiddled here
Just a tip, ence you're saying you are new to css, i presume you are new to html too : always use the minimum required to build your webpages. Those 3 images had to be merged into one for many reasons like server request, bandwidth, browser redraw, dom elements number.
i'm stuck in a bit of a rut at the moment.
if you head over to my website...
http://dekkro.no-ip.org/
You will see an image, and a div underneath it. I have spent the past few hours trying to position these both in the middle of the page, with the bottom div over lapping the image.
I have failed and failed, what am I doing wrong here? I have used z-index, and positioning but its never centered.
Thanks!
All you need is this:
CSS:
#my_img {
margin:auto;
display:block;
}
#my_div {
margin:auto;
position:relative;
top:-100px;
z-index:2;
}
HTML:
<img id="my_img" src="http://dekkro.no-ip.org/images/testimage.png" />
<div id="my_div">whatever</div>
Here's a demo: http://jsfiddle.net/tX2JY/embedded/result/
Wow, that's alot of code going on for that page.
Without reviewing everything yet (will in a bit) - have you tried setting the main image to be a background image of a div, and then simply putting the log in form inside it?
CSS
#image-div { background-image:url('yourimage.jpg'); }
HTML:
<div id="image-div">
<div id="form-div">
form...
</div>
</div>
Lets say one div has width w1 and height h1 ; other w2 , h2
#div1 {
position:absolute; top:50%; left:50%; margin-left: - w1/2px; margin-top:-h1/2px;
}
#div2 {
position:absolute; top:50%; left:50%; margin-left: - w2/2px;
margin-top:-h2/2px; z-index:9999;
}