I have a image who's width and height i got in Javascript. i want to set the background image on image.
means to the background image is look like image as youtube show the image on video called play icon.
i want to show them on image. can someone tell me how i can set playicon over the image.
I didn't understand exactly your question. I suppose you want to place img over a background-image if yes check the following example:
html
<div>
<img id="play" src="http://dummyimage.com/40x40/454/000&text=Play">
<img id="pause" src="http://dummyimage.com/40x40/848/000&text=Pause">
</div>
css
div {background:url("http://dummyimage.com/300x300/000/fff&text=video") no-repeat;
height:300px;
width:300px;
position:relative;
}
img#play {
position:absolute;
bottom:0;
}
img#pause {
position:absolute;
bottom:0;
left:40px;
}
Demo: http://jsfiddle.net/ACazB/
div has position:relative and imgs inside div have position:absolute. This will allow you to manipulate the position of any images in the scope of div. Using box offsets top, bottom,left,right you can move the images in the place you need.
http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/
http://www.w3.org/TR/CSS2/visuren.html#position-props
Related
I have a slider on my homepage with.
I made a background, but it isn't the at the top. Now it's under my slide items. How can make sure that the background is upper than the slide items? Something with z-index?
if your "background is this one: IMAGE it will never show as you have put the image as background-image in the slider container so obviously the images inside that container will show on top.
What you need to do is to add in your html a div inside id="slider" right before the id="prevBtn" span like this one:
<div class="border-image"></div>
and add this css:
.slider4_effect {position:relative;}
.border-image {
position:absolute;
width:100%;
height:100%;
background-image:url('http://magento.gaafwebdesign.nl//skin/frontend/rwd/shop/images/sliderbg.png'); /*or your relative path*/
background-size:cover
}
that should work fine
I have a background image for the "portal" to a new website. On top of the image, there need to be 5 images, placed in a unique pattern, plus 3 divs with text with links. Here is a picture of what it needs to look like:
Link to design of Portal
http://dansdemos.info/clips/screenshots/portal.png
The portal needs to be implemented in a responsive design.
I have experimented with relative and absolute positioning, but I am having trouble figuring out whether either or both of those is the correct way to position these smaller items on top of the larger item. So, I am struggling to figure out the best way of positioning the images and yellow divs on top of the picture. My question is: what is the best way of putting the images and divs on top of the background image for the portal?
Link to construction to live portal.
http://dansdemos.info/prelaunch/WorldClothingCorp_QA/
I think I can figure something out, but I really want to do this the "right way", or at least a good way.
Thank you.
I've had this situation myself before.
Resize the images you want to put on top to the same size as the parent (background) image. So place the images the way you want and make the rest transparent (png24, good transparency support and lower file size as gif).
Using your favorite image editing software:
Create a canvas of the same size as the background image
Place the background image in the canvas for reference (and lock the layer if possible)
Put in the overlay image and position like you want
Repeat this for the other overlays
Remove the background (reference) image and make the canvas transparent
Export the overlay images as PNG24
In the CSS use:
img { width: auto; max-width: 100%; }
…to make the images responsive. Now if the window resizes the images will respond to the width you specify to the page container.
More info on responsive or "fluid" images here: http://alistapart.com/article/fluid-images
I would suggest you position your background image within a relatively positioned div container. Once you have that placed to your liking, You would do the same thing for the images to be placed on top of the big image except you will want to position them absolutely.
HTML:
<div id="container>
<img src="..." alt="Background Image" /> /* Big Image */
<img src="..." alt="Jacket" />
<img src="..." alt="Skirt" />
<img src="..." alt="Top" />
<img src="..." alt="Dress" />
<img src="..." alt="Jacket 2" />
RETAIL STORE
WHOLESALE USED CLOTHING
WIPING RAGS
</div>
CSS:
#container {position:relative;}
#container > img { width: 100%; }
#container img+a {position:absolute; top:30%; left:30%;}
#container img+a+a {position:absolute; top:50%; right:30%;}
#container img+a+a+a {position:absolute; top:30%; right:30%;}
#container img+a+a+a+a {position:absolute; top:30%; left:30%;}
#container img+a+a+a+a+a {position:absolute; top:80%; left:40%;}
#container .yellowflag
{
/* Retail Store */
background-image: url(...);
position:absolute;top:...;left:...
}
#container .yellowflag+.yellowflag
{
/* Wholesale */
top:...;left:...;
}
#container .yellowflag+.yellowflag+.yellowflag
{
/* Wiping rags */
top:...;left:...;
}
As Chawk said you want to position your divs containing each image using position:absolute in a div containing the background image which uses position:relative. By setting them up this way, the 5 images will be positioned in relation to their parent element rather than the full screen.
Be aware that the divs around the images are currently displayed as blocks meaning they take up the full width of the parent element. You might want to set widths for them and display them as inline-block to make things easier.
I have a popup overlay that I'm currently resizing with some jquery code. I'm looking to change this implementation to work only with CSS. This is the general setup I have along with the jsFiddle
<div id="BigDiv"></div>
<div id="Overlay"></div>
#Overlay{
background:red;
opacity:0.6;
position:absolute;
top:0;
left:0;
width:100%;
height:100%}
#BigDiv{
height:2000px;
width:2000px;
background:blue;}
As you can see, the overlay is sized at 100% width and height so when the user looks at the overlay, it fills the screen. However, when the user scrolls, the overlay isn't resized. How can I change this to make the resize work only with CSS, if at all possible.
Thanks.
Using position:fixed instead of absolute which will place the overlay at a
specified position relative to the screen's viewport and doesn't move when scrolled
You can keep the width:100%;height:100% or use a full top:0;right:0;bottom:0;left:0; positioning system - both should make the overlay cover the whole viewport.
I just hope there is any creative solution out there to solve the following problem:
I have a #containter with a background image applied
#container {
height:400px;
width:100%;
background-image: url(http://cl.ly/NEvg/kv.jpg);
background-repeat:no-repeat;
background-size: 1000px;
background-position:center 0px;
}
The image I have has an area in it on which I want to position a clickable link.
In this example image I want to position an invisible a#square on top of the green square so that when I click ONLY the square the link is fired.
However the problem is that the background image is moving when scaling the browser window (I want it to move, so this is not the problem itself), but the link isn't.
See this live example: http://jsfiddle.net/KDag7/
Is there any creative CSS Way to make the link move along with the square in the image?
Thank you for your tipps and tricks.
Regards,
Matt
Using the example of the image in your question (firewall blocked the image in the jsFiddle), if I understand what you're looking for, you can use this css:
position:absolute;
top:158px;
left:50%;
margin-left:64.5px;
See this jsFiddle: http://jsfiddle.net/KDag7/21/
Here is an update fiddle. I added position:relative; to the main image and position:absolute; to the link so that it is aligned to its parent. The positioning for the link can be achieved by:
position:absolute;
top:153px;
left:50%;
margin-left:63px;
I need to position elements and receive like in attached image
I have a page where all elements are inside MainDiv. There are 2 images.
I would wondering if somebody showed my html + css should be.
thanks in advance!
A possible way would be to set the position of the overlayed image to absolute:
#overlayImage{
position:absolute;
right:0px;
bottom:0px;
width:150px;
height:150px;
}
Important is, that the position of the main div is not "static".
<div id="main_div">
<div id="other div"> </di>
<div id="overlayImage"> </div>
</div
you can accomplish this the following way: assign the background image as background to the main div
background: url(some/url/to/image) no-repeat scroll top right transparent;
then add a normal image element inside that div and position it absolute with the folllowing css
right: 0;
bottom:0;
position: absolute;
make sure the main div has position set to relative