So i have one div and inside i have img tag. SO what i would like to do is put that div background on top of img, i know i could use another div with absolute position to do that but maybe it's possible to do it with only 1 div?
This is my code:
<div id="container">
<img src="image.jpg" />
</div>
EDIT Sorry for explaining it all wrong, but i want to background over the image, and from what i can see right now it's not possible without extra div.
Simply put, you can't with that code.
The best you could do is use some positioning and z-index properties within a single div.
<div id="container">
<div id="cover"></div>
<img src="image.jpg" />
</div>
Then use CSS to move the cover div above the image.
You can use css to attach the background for div like
background: url(images/myimage.png) no-repeat center top;
Related
I am trying to add text "Post" in the center of Div on top of image , but it adds next to the image:
HTML:
<div id="Post">
<span class="Post">Post
<img src="images/ask_post.png" />
</span>
</div>
CSS:
#Post {
position:absolute;
background-image:url('../images/ask_post.png') no-repeat;
left:741px;
top:157px;
}
First remove the image from the div element, the text wont go on top of that image, only the background. Second, play around with the background properties until it looks like you want it to.
My guess is that you need to adjust the background-size or background-position.
<div id="Post">
<span class="Post">Post</span>
</span>
See if background-size:cover; is what you need. You'll probably also have to adjust the height and width of the div to get what you want.
It looks like you are calling the image twice. Once in the css and again in the div. Remove
I have an image and one div.I want "text2" to come under "text1" .WHen I add clearfix the "text2" come under image .
I know that I can use "br" but is possible to have same effects without"<br>"
DEMO
Do you want text over image ?
if so you could use something position relative on div and position absolute on text, if text is still under image you can use z-index: 999 if you want to force text over image
Just add float: left to your child div element, like this:
<div>
<img src="http://lorempixel.com/100/80/" style="float:left">
<div style="float:left">
<span>TEXT1</span>
<div class="clear"></div>
<span>TEXT2</span>
</div>
</div>
Online example
I have an image and also a small container that I want to be placed on the container, but it sets this ".innerimage" below the image.
Do not suggest using top: xx; because in my actual project I have many divs with the same class and I can't use top or it will screw it up.
<div id="page">
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Black_300.jpg">
<div class="innerimage"></div>
</div>
</div>
If I well understand your need and if you don't have to support IE7, maybe you could use the display:table and display:table-caption
I updated the JSFiddle with these CSS properties:
http://jsfiddle.net/ZhdMj/1/
I am trying to make a shopping cart layout and am having a hard time getting the checkboxes to appear at the right spot. The code here:
http://jsfiddle.net/35Hkj/1/
renders wrong on jsfiddle itself and internet explorer/firefox... It looks right in expression web 4 and chromium. Should be a checkbox beside each color.
If I position one check box with absolute in a relative container it works on all browsers perfectly but loses the flow meaning it doesn't expand the div container dynamically.
Is there a way to position absolute (relative to the parent) without losing the flow??
I'm guessing slicing up the image with css and positioning a checkbox beside each sliced part wouldn't be correct or easy.
Position absolute will allways "lose the flow".
However, you can position the divs absolutely, if they are in the same container as the image. Just change the left value accordingly. The container will be strechted to image's height as the image will remain in the flow.
Wrap the texts beside checkboxes in a label. More semantic + container divs will have enough height to not lose the flow so that you can absolutely position the checkboxes within.
An element with position:absolute is always taken out of the regular flow of relative elements.
What you could do is use a sprite for the background image. Place your checkboxes and your image in float:left and float:right divs or float both of them left and keep a margin between them and modify the background position of the sprite. If you wanted to, you could also use images, though I feel that using a sprite would be faster. For eg.
<div>
<div class='item'>
<div class='image'>
<img alt="" src="http://www.ahornblume.ch/images/img1.jpg" />
</div>
<div class='checkbox'>
<input name="product1[]" type="checkbox" value="skin" />skin
</div>
</div>
<div class='item'>
<div class='image'>
<img alt="" src="http://www.ahornblume.ch/images/img2.jpg" />
</div>
<div class='checkbox'>
<input name="product1[]" type="checkbox" value="face" />face
</div>
</div>
</div>
.item{
float:left;
width:auto;
}
.image{
float:left;
width:auto;
}
.checkbox{
float:right;
width:auto;
}
If you wanted to use sprites, you could give each div an id and define a background position, depending on the image-checkbox pairing.
I have some trouble putting just simple text over an image in IE. The image has a lower z-index than the text so I am not sure what it can be. I also tried to give the text a relative position rather than a absolute one. But it’s still not working. Has anybody please any ideas??
Thanks
IE doesn't handle z-index as the standard states. The best solution is to put the image as a background-image property to a container (for example a div) and the text inside that div. This way all the browsers recognize the correct order.
The second solution is to place both the img and the span (containing the text) in a div with the following properties:
<div style="position:relative">
<img src="a.jpg" style="position:absolute;" />
<span style="position:absolute">your text here</span>
</div>
Put the image and text in a div container set to 'relative' position.
Set the image to position 'absolute'
The text will appear ontop of the image
To control the text put it in another div and use the margin property to move it.
<div id="container" style="position: relative;">
<img style="position: absolute;" src="#" />
<div id="textcontainer" style="margin: 10px 10px 10px 10px">
Text to float on image here
</div>
</div>
No need for z-index :) Different versions of IE don't like it anyway.
<img src="myimage.jpg" title="Text over image here">