I want to place a div over an image. As of now I think I want it towards the top left of the image. This needs to be compatible with views on different screen sizes so I don't think an absolute positioned div will work... How can I do this? Please help.
You can put the image as a background of a div and insert another div in the first one.
Something like this:
<div style="background: url('myimg.png'); width: '100px'; height: '100px' float: left;">
<div style="float: left;">TEST</div>
</div>
Test will appear on the top left side of the image.
A <div> already starts at the top left of its parent element. Since it's a block level element you will have to specify a width or else it will take up all the available space.
Working example: http://jsfiddle.net/pd39B/
<div></div>
<img src="https://twimg0-a.akamaihd.net/profile_images/2642324404/46d743534606515238a9a12cfb4b264a.jpeg">
div {
height: 50px;
width: 50px;
background-color: blue;
}
this is a bit trickier ...
Placing a div over an iframe/video...
(just replace the iframe w/ your image) ....
trick part is for video ... you must add ... ?wmode=transparent ... to the end of the src url...
<!DOCTYPE HTML >
<style type="text/css">
.Container {position:relative; float:left; border: 1px solid #0f0; }
.Vid {position:absolute; top:7px; left:7px; width:90%; height:90%; }
.Lyr {position:absolute; top:7px; left:7px; width:90%; height:90%; background-color: #a3E1a6; opacity:0.5; }
</style>
<div id="Cntr0" class="Container" style="width:220px; height:140px;">
<iframe id="frm0" class="Vid" src='http://www.youtube.com/embed/y1VVXrUdO2s?wmode=transparent' frameborder='0'></iframe>
<div id="div0" class="Lyr" ></div>
</div>
Related
HTML:
<div>
<img>
<div>
<table>...</table>
</div>
</div>
CSS:
#img {
position: absolute;
right: 0px;
}
Both divs are the same size as the table.
I want the image to float top right of the table.
This results that the img is at the right side of the screen and not in the div.
You need to add position:relative; to the containing div. Also, I would advise against using tables unless you will be displaying tabular data, they should not be used for layout.
.container {
position:relative;
width:500px;
height:500px;
border:1px solid black;
}
.container img {
position:absolute; /* absolute misspelled in your example */
top:0;
right:0;
}
<div class="container">
<img src="http://placehold.it/250x250" />
<div>
<table></table>
</div>
</div>
img ignore width set to their parent. Apply width to img itself instead.
Also, you misspelled "absolute".
I have some child divs placed in a parent div. It looks like that:
Now I need to place an image with a relative size into the red(brown) div.
But every time when I place the image into the div the layouts expands.
And that is a problem for me.
So how can I put an image with a relative size into my div without expanding the div layout?
HTML:
<div class="textContentContainer">
<div class="FirstSectionContentHeader">
<table class="layoutTable"><tr><td class="centerDiv">
<div class="FirstSectionHeaderintroText uppercase">
SOME TEXT
</div>
</td></tr></table>
</div>
<div class="FirstSectionLogoArea">
<img src="../img/Headerlogo.png" alt="Description" class="FirstSectionTitleLogo">
</div>
<div class="FirstSectionIntroText usualText">
ddd
</div>
<div class="FirstSectionBottomLayout">
<img src="../img/basics/Pfeil.png" alt="Pfeil" class="FirstSectionBottomArrow">
</div>
</div>
CSS
.FirstSectionContentHeader{
height:10%;
width: 100%;
font-weight:200;
text-align:center;
background-color: aqua;
}
.FirstSectionLogoArea{
height:10%;
width:100%;
background-color: chartreuse;
}
.FirstSectionTitleLogo{
height:80%;
width:100%;
object-fit:contain;
}
.FirstSectionIntroText {
height:70%;
width:100%;
background-color:white;
}
.FirstSectionBottomLayout{
height:10%;
width:100%;
background-color: brown;
}
.FirstSectionBottomArrow {
height:10%;
width:10%;
object-fit:scale-down;
}
the image has position: staticby default, which is "inserted" in the parent element and "takes some space" there, causing the parent element to become larger. You can give it position: absolute(which requires that the parent element has position: relative) and still use percentage values.
I am trying to take one image, place it on the screen as a background, and then put a company logo on top of it so it all looks like one image. I have looked at other people's examples, and those give me the background where I want it, but the company logo that I want on top of the background is displayed beside the background instead of on top. Nothing I try seems to be working. Can someone please help?
HTML:
<div id="Background">
<img src="images/background/background.png">
</div>
CSS:
div#Background
{
background-image:url('images/background/background.png')
background-repeat:no-repeat;
}
Here's how I'd do it. You'll need to give the surrounding div the dimentions of the background image:
HTML
<div class="background">
<img class="logo" src="http://placehold.it/150x75/FF0000/FFF&text=Logo" alt="Company Name" />
</div>
CSS
.background
{
position:relative; /*Any child elements can now be positioned relative to this element*/
background-image:url(http://placehold.it/750x150&text=background);
background-repeat:no-repeat;
width:700px; /*Width of background image*/
height:150px; /*Height of background image*/
}
Example: http://jsfiddle.net/8RC7U/
There are many different ways you can then position the logo:
Margins
.logo
{
margin-top: 10px;
margin-left: 10px;
}
http://jsfiddle.net/8RC7U/1/
Absolute Positioning
.logo
{
position:absolute;
top: 15px;
right:30px;
}
http://jsfiddle.net/8RC7U/2/
and that's just for starters.
On a final note the following may be more accesible for screen readers and better for SEO:
HTML - Include the company name as text
<div class="background">
<h2 class="logo">Company Name</h2>
</div>
CSS - Shift the text off screen and use background image again
.background
{
position:relative;
background-image:url(http://placehold.it/750x150&text=background);
background-repeat:no-repeat;
width:700px;
height:150px;
}
.logo
{
text-indent:-9999px; /*Shift the text off screen*/
width:150px; /*Width Of logo*/
height:75px; /*Height of logo*/
background-image:url(http://placehold.it/150x75/FF0000/FFF&text=Logo);
margin: 10px 0 0 10px; /*Positioning top right bottom left*/
display:inline-block; /*Set to inline block so margins apply inside parent*/
}
Example: http://jsfiddle.net/8RC7U/3/
Use the "background-image" CSS attribute on a block-level element (, etc.) for the background PNG, then place the PNG buttons inside that block element.
You can try Like this:
CSS
<style type="text/css">
div#Background
{
background-image:url('images/background/background.png')
background-repeat:no-repeat;
}
</style>
HTML
<div id="Background">
<img src="images/background/background.png" />
</div>
If you have doubt let me know..
One of the simple solution is use
z-index
make your logo's Z-index graterThan background Z-index e.g()
#background
{
z-index:9
}
#logo
{
z-index:99
}
This would help you accomplished what you want.
Hope that helps
FIDDLE
HTML
<div>
<img src="http://placehold.it/350x150" class="img1">
<img src="http://placehold.it/150x100" class="img2">
<div>
CSS
div {
position:relative;
}
.img1 {
position:absolute;
z-index:1;
top:0; left:0;
}
.img2 {
position:absolute;
z-index:2;
top:24px; left:100px;
border: solid 2px;
}
if you want to use only two images the best way to do it
have the div with the background, then load a image in side the div.
<div id="Background">
<img src="images/background/background.png">
</div>
#Background
{
background-image:url('images/background/background.png')
background-repeat:no-repeat;
}
I have a markup that looks like this:
<div style="width: 150px; height: 250px;">
<img src="Image1.jpg" />
<div class="YellowExclaimIcon iconsBlack"></div>
</div>
What I want to achieve is below:
Meaning that the image should always be placed center (Both horizontal and vertical) in the parent div and the warning icon should on top of the image with a margin of 5 to the right and to the bottom.
Another thing to note is that, the image width and height is not always the same, but the position for the warning icon should always be the correct place.
The YellowExclaimIcon class contains a background image, but can be altered to a image if need be. Something to consider is the image also has a max-width and max-height.
I tried with the answer in this thread CSS Help - div over image but I could't get it to work with the centering.
if the image width & height are variable, you can only achieve this if you change the markup, something like this:
<style type="text/css">
div.container {
width:150px; height:250px; display:table-cell; vertical-align:middle;
text-align:center; background-color:#ededed}
div.image {
position:relative; display:inline-block; }
div.image img {
display:block; }
div.YellowExclaimIcon {
position:absolute; width:80px; height:80px; bottom:5px; right:5px;
background:transparent url(your-icon.png) no-repeat 100% 100%}
</style>
<div class="container">
<div class="image">
<img src="Image.jpg" alt="" />
<div class="YellowExclaimIcon"></div>
</div>
</div>
The sample above will always horizontally & vertically align the image in the center, with an icon in the bottom right corner, 5px margin.
Check a working sample: http://jsfiddle.net/Q9uhV/
Use position:relative to outer div and absolute to inner div
HTML
<div class="outer">
<div class="YellowExclaimIcon"></div>
</div>
CSS
.outer{
width: 150px; height: 250px;
border:solid red 1px;
position:relative;
vertical-align:middle;
background:url(http://icons.iconarchive.com/icons/everaldo/kids-icons/128/penguin-icon.png) no-repeat center center;
}
.outer img{text-align:center; vertical-align:middle}
.YellowExclaimIcon{
position:absolute;
width:100%;
height:100%;
top:0; left:0; background:url(http://da.countyofventura.org/images/buttons/images/warning-icon.gif) no-repeat center 95%;
}
DEMO
You need to use z-index and some positioning like this:
<div style="width: 150px; height: 250px;">
<img src="Image1.jpg" style="z-index:-1" />
<div class="YellowExclaimIcon iconsBlack" style="z-index:1; margin-left:10px; margin-bottom:10px"></div>
</div>
..for example, set your margins to what you need.
Make your warning image absolute so you can position it over the other image at a specified location.
HTML:
<div class="container">
<img src="penguin.png" />
<img class="warning" src="warning.png" />
</div>
CSS:
.warning {
position:absolute;
left:80px;
top:80px
}
See this jsFiddle for a demo.
I have an image that is 500px wide. It is inside of a div. The width of the div is 250px. How can I align the image centered inside of the div? Should I use top or left or should I have negative margins?
I would use negative margins: #myDiv img { margin: 0 -125px; }. This only works if you know the width of both the DIV and the IMG though.
Can you change (or at least add) something in the html around the image? This is kind of an old trick, and is a little awkward in that it requires you to add an extra <div> around the image, but it works quite nicely if you're ok with that (Note, added some borders to make the effect easily visible while testing):
<div style="width:250px; border: solid 2px red;">
<!-- Place the following div at 50%: -->
<div style="width: 500px; margin-left:50%; border: solid 2px blue;">
<!-- ...then move the image back by half of it's own width: -->
<img style="width:500px; margin-left:-250px; border: solid 3px green;" />
</div>
</div>
Demo
Hey now used to display table-cell properties as like this
<div class="parent">
<img src="http://www.gravatar.com/avatar/3c6597370b476903ed475f70b4b3ce31?s=32&d=identicon&r=PG">
</div>
Css
.parent{
border:solid 1px red;
display:table-cell;
width:300px;
height:300px;
vertical-align:middle;
text-align:center;
}
.parent img{
vertical-align:top;
}
Demo
try this one (not sure about ie-6 but work fine in ie-7 and plus)
<style>
.test{ height:250px; width:250px; overflow:hidden; position:relative;}
.test img{ position:absolute; top:50%; left:50%; margin-left:-250px; margin-top:-250px; height:500px; width:500px;}
</style>
<body>
<div class="test"><img src="img.png" alt="img" /></div>
</body>
if is it possible to use that image as background you can try this one
.test{height:250px; width:250px; background:url(img-path.png) no-repeat 50% 50%;}