Can anyone tell me how can I add an image over another image without using Z-index or Z-order?
Difficult to answer properly without knowing exactly what you want to achieve, z-index probably isn't what you actually need. For instance the following would work:
<div id="container">
<img src="img1.jpg" id="img1" />
<img src="img2.jpg" id="img2" />
</div>
#container {
position:relative;
}
#img2 {
position: absolute;
left: 50px;
top: 50px;
}
Also whether you use <img> tags or background-images depends on the semantic valueof the images, i.e. are they presentational or actualy content of the page?
The easiest way is to make sure they're both the same size, one has transparency, and you use this snippet:
<img style="background:url(image.jpg)" src="overlay_image.gif" alt="" />
Set the main image's background image in CSS with the background-image property
You can also use text over image by using the following code:
<TABLE BORDER="0" cellpadding="0" CELLSPACING="0">
<TR>
<TD WIDTH="221" HEIGHT="300" BACKGROUND="samplepic.jpg" VALIGN="bottom">
<FONT SIZE="+1" COLOR="yellow">Sample Text</FONT>
</TD
</TR>
</TABLE>
Hope that helps.
Related
I wanted to have a full-width call-to-action banner on my client's website. The template that my client has does not support CSS, so I'm making use of like old school HTML to build pages.
I have a background image for the img src and I want to overlay the text in it. I'm in need of a code that is working since I'm really not well-versed.
I searched up for solutions in adding overlay text to a background image, but most of the answers contain CSS. Here's a code that I tried.
<table>
<tr>
<td></td>
<td rowspan=4><img src="/uploads/image12345jpg"></td>
</tr>
<tr>
<center><td colspan=4>This is the overlay text</td></center>
</tr>
</table>
</center>
I'd appreciate your help and answers.
The support says that I have to individually add it in the HTML code... not sure where it goes.
I think you might be looking for something like this: https://jsfiddle.net/DIRTY_SMITH/vz04m3ph/2/
<TABLE border="0" cellpadding="0" cellspacing="0">
<TR>
<TD width="221" height="300" background="https://placeimg.com/640/480/any" valign="bottom">
<FONT size="+1" COLOR="red">This is the overlay text</FONT>
</TD>
</TR>
</TABLE>
EDIT:
This question is asking how to use inline styles, I think:
(I've also put some inline javascript on a click function because you mentioned your scripts wernt working either)
https://jsfiddle.net/DIRTY_SMITH/vz04m3ph/28/
<td style="position:relative;">
<img src="https://placeimg.com/640/480/any" style="position:absolute;z-index:1;" width="600px" height="150px" />
<div style="z-index:2;position:relative;color:red;font-weight:bold; font-size: 40px; top: 40px; left: 100px;" onClick="(function(){
alert('See You can click me');
return false;
});">
<a href="#" onClick="(function(){ alert('See You can click me'); return false; })();return false;">
your text goes here click here</a>
</div>
</td>
This worked for me. Thank you for the help! Appreciate it.
<div class="container" style="position:relative;text-align:center;color:white;" >
<img class="img-responsive" src="https://placeimg.com/640/480/any" alt="#" style="width:1880px;height:250px;" >
<div class="centered" style="position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);" >Example Text</div>
</div>
I just want to decrease the size of space between this two images I put in the table. I'm so sorry I know this is just a basic html code. Please help me.
This is the code:
<table class="sample" width="200" border="0" cellpadding="1" cellspacing="1" >
<tr>
<td align="center" valign="center">
<a href="#" ><img src="images/reception2.png" alt="" /></a>
</br>
SERVICES
</td>
<td align="center" valign="center">
<img src="images/services2.png" alt="" />
</br>
OFFERS
</td>
</tr>
</table>
It's hard to advise without seeing the CSS you are using. You could try adjusting the width of the table.
Demo here: http://codepen.io/sol_b/pen/VmQGzr
You can remove the inline style on your table and then target it in your CSS, like this:
.sample {
width: 200px;
}
Change the width to whatever works.
you can use margin property of CSS. for your question margin-right for the SERVICES img and margin-left for the OFFERS img are proper solutions.
Try to add this snippet:
<img src="images/reception2.png" alt="" style="margin-right: -25px"/>
<img src="images/services2.png" alt="" style="margin-left: -25px"/>
Also, You can change the number range to finally find the suitable numbers.
Here is the code:
<table border="1" cellpadding="2" cellspacing="2" height="250">
<tbody>
<tr>
<td>
<div style="background: url('image path goes here';); width: 300px; height: 250px; position: relative;">
<p style="width: 180px; font-size: 12px; margin-top: 35px; position: absolute;">My TEXT goes here....</p>
</td>
</tr>
</tbody>
</table>
Now, I am i need to increase the width of the image OR need to left-indent the image.
How can I do that ?
I have tried giving the width directly.. But it's not working...
Any advice or suggestion will be thankful and grateful..
You are using image as background of the parent div. If you want to just change the size of image you should use img tag. Something like the example below
<table border="1" cellpadding="2" cellspacing="2" height="250" width="300">
<tbody>
<tr>
<td>
<div >
<img style="float:left;" src="http://www.gravatar.com/avatar/03bc7f86de865926a1cb5036198d00a0?s=32&d=identicon&r=PG" width="150px" height="125px" /></div>
<p style=" display: block; width: 280px; font-size: 12px; margin-top: 35px; position: relative;">We understand you want to choose benefits that suit you and your life. And we regularly review things so we're always offering benefits you say you want to see.</p>
</td>
</tr>
</tbody>
</table>
You could use the CSS3 background-size property.
.myelement {
background-size: 275px 125px; /* input your values here */
}
Alternatively you could make yourimage inline instead of being the background of a DIV and size it using regular width and height that way.
A couple of points about the code you have posted:
Tables should only be used to display tabular data and not for simple layour purposes.
You have no closing DIV tag.
I have used <div align="center"> and put the image inside the div tag. Well the image is at the center but not at the middle. The image started from the top of div tag and placing at the center but I want it to be placed at the middle not at the top.
When I googled it I found <td valign="middle">. and its working as I intended and below is what I have designed after googling,
<div align="center" style="width:510px;height:510px;margin-left:300px">
<table style="width:510px;height:510px">
<tr>
<td align="center" valign="middle">
<img id="main" src="dock.jpg" style="max-width:500px;max-height:500px"/>
</td>
</tr>
</table>
</div>
But using a table for these purpose is it harmful ? Because I have tried <div align="center" style="vertical-align:middle"> but does not seem to work as i expected and please let me know if there is a way to do without table ?
You shouldn't be using <div align="center"> either really, its been deprecated:
http://reference.sitepoint.com/html/div/align
This attribute is deprecated. The correct method for aligning a div is
to use the CSS text-align attribute.
I'm not certain on the best way of vertically aligning div's (although you may find this article worth reading), but I know that you are right, you shouldn't use tables as a solution. Table should only be used when creating a table of data results for example, never layout purposes.
This will help you i think so:
just give #to div. and then style it in CSS as follow:
position: absolute;
left: 50%;
right: 50%;
width: _px;
height: _px;
margin: half of the width, half of the height;
Try this. May help you.
<div style="width:510px;height:510px;border:1px solid;margin:auto;">
<table style="width:100%; height:100%;">
<tr>
<td align="center">
<img id="main" src="wp1.JPG" style="max-width:300px;max-height:300px;"/>
</td>
</tr>
</table>
</div>
I am creating a web page, where I have an image that I want to place in the center. On the top of that image I want to have input boxes, labels, and a submit button.
I am trying to use this CSS
img.center
{
z-index:-1;
}
but this does not work. When I change the code to
img.center
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
it makes the image go behind. But then as I used left:0px and top:0px ... it puts the image at location 0,0. But I want the image to stay in the center.
To keep the image in the center, I have added this: <div align="center">.
Is there any way, I can keep the image in the center and make it go behind the boxes, labes, and buttons too?
My HTML page looks like this (I tried to have a background image for my div tag, but no image is appearing on top of it):
<html>
<head>
<title>Question of the Week</title>
<style type="text/css">
body
{
background-image:url('images/background.jpg');
background-repeat:repeat-x;
}
.container
{
background-image:url('images/center.jpg');
background-repeat:no-repeat;
}
td.cntr {padding-top:50px;}
</style>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div align="left"><img src="images/logo.jpg"></div></td>
<td></td>
<td><div align="right"><img src="images/right_logo.jpg"></div></td></tr>
</table>
</tr>
<tr>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="cntr">
<div id="container">
<input name="box" type="textbox" />
<input name="box" type="textbox" />
<input name="submit" type="submit" />
</div>
</td>
</tr>
</table>
</tr>
</table>
</body>
</html>
You can position both the image and the text with position:absolute or position:relative. Then the z-index property will work. E.g.
#sometext {
position:absolute;
z-index:1;
}
image.center {
position:absolute;
z-index:0;
}
Use whatever method you like to center it.
Another option/hack is to make the image the background, either on the whole page or just within the text box.
Well, put your image in the background of your website/container and put whatever you want on top of that.
Your container defined in HTML:
<div id="container">
<input name="box" type="textbox" />
<input name="box" type="textbox" />
<input name="submit" type="submit" />
</div>
Your CSS would look like this:
#container {
background-image:url(yourimage.jpg);
background-position:center;
width:700px;
height:400px;
}
For this to work though, you must have height and width specified to certain values (i.e. no percentages). I could help you more specifically if you wanted, but I'd need more info.
Make it a background image that is centered.
.wrapper {background:transparent url(yourimage.jpg) no-repeat center center;}
<div class="wrapper">
...input boxes and labels and submit button here
</div>
Try this code:
body {z-index:0}
img.center {z-index:-1; margin-left:auto; margin-right:auto}
Setting the left & right margins to auto should center your image.
Start at 0 and go up from there, rather than using -1. For instance, set the div containing your inputs and labels to a z-index of 100, and give the image you want to place behind it a z-index of 50.
Alternatively just set the image as the background-image of the div containing the inputs and labels. Since the image is probably illustrative and therefore presentational, it doesn't really need to be an actual img element.
There are two ways to handle this.
Background Image
Using z-index property of CSS
The background image is probably easier. You need a fixed width somewhere.
.background-image {
width: 400px;
background: url(background.png) 50% 50%;
}
<form><div class="background-image"></div></form>
I style my css in its own file. So I'm not sure how you need to type it in as your are styling inside your html file. But you can use the
Img{
position: relative
Top: 150px;
Left: 40px;
}
This would move my image up 150px and towards the right 40px. This method makes it so you can move anything you want on your page any where on your page If this is confusing just look on YouTube about position: relative
I also use the same method to move my h1 tag on top of my image.
In my html5 file my image is first and below that I have my h1 tag. Idk if this effects witch will be displayed on top of the other one.
Hope this helps.