fix a div/button/link to a background image - html

I am having an annoying issue to position an element on top of a background image. Say we have a html as :
<html>
<head>
</head>
<body style = "margin: 0 auto;">
<div style="background:url('image.png'); background-size:cover;">
<button>Button </button>
</div>
</body>
</html>
The button should be placed at left: 50px; top: 100px; against the original image, but because the device screen ( desktop chrome or ios safari ) change, and the background-size: cover; property, the image is actually scaled, so the button would not appear at the right position.
I tried another way :
<html>
<head>
</head>
<body style = "margin: 0 auto;">
<div style="width:100%;">
<img src="image.png" width="100%" />
<button style="top: -100;z-index: 5;">Button </button>
</div>
</body>
</html>
This way the page may scroll because the image might beyond screen height, once i positioned the button to the right place, and changed to another device resolution, the position was altered again.
I also tried javascript to listen to resize event to absolutely position the button, it still has obvious difference between desktop and ios screens.
How can i make it ? Thanks in advance!
Edit:
If the image is scaled due to screen resolution, i want the button be scaled same ratio too. It would be great to find a way without complex javascript.

If you want the button size change with the scale of the page, so you must add width and height style for that in% unit. Because pixel is a fix unit on different devices but % depends on device resolution. And finally you can add min-width and min-height or max-width and max-height to your div style to have a good control on other devices. Good luck.

Add CSS position absolute to your image and button elements. In this way you will be able to set their position accordingly to their parent element <div>.
http://jsbin.com/mevuxizuzu/1/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div style="width:100%;">
<img style="position:absolute" src="image.png" width="100%" />
<button style="position:absolute; left: 50px; top: 100px;z-index: 5;">Button </button>
</div>
</body>
</html>

You can use the position:absolute; for your button and set the right place with top and left position with %, because your width and height are based on % not pixels .

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="width:100%;">
<img style="position:absolute" src="image.png" width="100%" />
<button style="position:absolute; left: 15%; top: 10%;z-index: 5;">Button </button>
</div>
</body>
</html>

Try the following code that use relative position for the button:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
button {
position: relative;
left: 20px;
top:100px;
}
.bd{
background-image: url('http://lorempixel.com/650/1000/sports/1/');
background-size: cover;
height: 1000px;
width: 650px;
}
</style>
</head>
<body>
<div class="bd" style="width:100%;">
<img style="position:absolute" src="" width="100%" />
<button>Button </button>
</div>
</body>
</html>
Checkout this DEMO: http://jsbin.com/pemafigafa/3/

Related

How to make an <img> element tiled over all elements in a webpage without using CSS background properties

I want to tile an image through the entire web document which I want to print. I have used background property to tile that, but I have to set the z-index property to make that image placed over all elements of the web page. Help me solve this.
stick it to the root style
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root
{
background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRxExzbsZCvO6lpE1tll_7pQLB5nd4RkWkrMannssfhAYni_Ct");
opacity: .4;
}
</style>
</head>
<body>
<div id="overlay" onclick="off()"></div>
<div style="padding:20px">
<h2>Overlay</h2>
<p>Add an overlay effect to the page content (100% width and height with background with 40% opacity).</p>
<button>some button here</button>
</div>
</body>
</html>

Image and their size in HTML

Suppose we have the code
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src="pic_trulli.jpg" alt="Trulli" width="500" height="333">
</body>
</html>
When we are inserting images using HTML, do we need to include the dimensions, width and height. If we don't need to, does it automatically set a default size for the image.
The default size for images in HTML is the actual size of the files on the filesystem. If you want to set the height and width of an image, here is how I would do it (adapting your code):
<!DOCTYPE html>
<html>
<head>
<style>
#imageId {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<h2>HTML Image</h2>
<img src="pic_trulli.jpg" id='imageId'>
</body>
</html>
And set the size dimensions (height, width) to whatever you want

html/css can't change image height with percentage

So I've got a simple little domain up with a fileserver.
I want the main page just to be an image.
I also want that image to take up half of the browser window's height, so I write up a bit of html with in-line styling. Yes, I am a beginner at this stuff, so all I know for now is basic html and css.
<img src="fruit.png" alt="a bowl of fruit" style="max-width:auto;max-height:50%;">
I try it out and the image happily displays at full resolution, completely ignoring my styling, so I play with it a little and I eventually find out that something like
<img src="fruit.png" alt="a bowl of fruit" style="max-width:auto;max-height:500px;">
and
<img src="fruit.png" alt="a bowl of fruit" style="width:50%;">
work just fine, but the reason I use a percentage is because I want the size to scale according to the browser window size.
So I'm trying to figure out what I'm doing wrong here, or if there's some bug or I'm just being an idiot and the fix is painfully obvious.
The img has to have an absolute position! Otherwise a max-height doesn’t do anything.
Furthermore the value "auto" isn’t allowed.
<style>
img {
position: absolute;
max-height: 50%;
}
</style>
<img src="fruit.png" alt="a bowl of fruit"/>
or
<img src="fruit.png" alt="a bowl of fruit" style="position: absolute; max-height: 50%;"/>
First of all, you should use CSS in a linked file and not inline, like you do right now. This makes managing changes incredibly easier. Take a look at this minimal example:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<img src="fruit.png" alt="a bowl of fruit">
</body>
</html>
The style.css file would contain all your styles, like:
img {
max-width: auto;
max-height: 500px;
}
An alternative for small pages is writing the CSS within the <style> tags, like so:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<style>
img {
max-width: auto;
max-height: 500px;
}
</style>
</head>
<body>
<img src="fruit.png" alt="a bowl of fruit">
</body>
</html>
Even better, use classes:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<style>
.image {
max-width: auto;
max-height: 500px;
}
</style>
</head>
<body>
<img class="image" src="fruit.png" alt="a bowl of fruit">
</body>
</html>
Regarding your question, I assume what you want is dynamically fill the half of the browser window with an image. This is possible with a rather new unit called viewport height (vh). Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<style>
.half-viewport {
height: 50vh;
width: auto;
}
</style>
</head>
<body>
<img class="half-viewport" src="http://lorempixel.com/1280/800/" alt="image">
</body>
</html>

Making an image fit to size of the html page using css

<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<link rel="stylesheet" href="movie.css">
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img src="images/rancidbanner.png" alt="Rancid Tomatoes">
</div>
</body>
</html>
so far i have succeeded with
img{
width: 100%;
}
but i want to it make it so only this image fits and not the other ones.
i tried doing it with
img.fit
on my css file, but this just returns it back to normal.
.fit img{
width: 100%;
}
should do it for you. The div's class name is fit, not the image's. Therefore img.fit won't work.
If your image had the class .fit then you could just do
.fit {
width: 100%:
}
If you remove class="fit" from div and add it to img then the effect will be the same for this image as you had for all images before.
You can Go little easier!
Just add width="100%" in <img> tag.
<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img width="100%" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR8g4PCYI2ssAVPKlJmC9q4T_k84PE7zOHqAWultSDb-BbSy5YfK-5P0I1f" alt="Rancid Tomatoes" >
</div>
</body>
</html>

In HTML, how can I get an input box to stretch in IE8?

I have uploaded the following simple HTML code to http://losthobbit.net/temp/anchor.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Anchor Test</title>
</head>
<body>
<div style="width:100%;height:100%">
<input maxlength="250" type="text" name="Text2" id="Text2" style="position: absolute;
top: 13px; left: 265px; right: 15px; height: 20px; text-align: Left">
</div>
</body>
</html>
As you can see, I've specified the left and right, but not the width, in order to get it to stretch.
In Chrome it stretches as one resizes the browser, but this does not work in IE8 or FireFox. Any ideas about how I can fix this?
Thank you
Please note that people are suggesting I use a width percentage... unfortunately it doesn't solve my problem. I want the exact same behaviour that I have in Chrome, which is that of a left and right anchor. This means that the stretching is not a fixed percentage.
Give the <input> a parent element, set your current styles on that and give the <input> element width:100%.
<div style="width:100%;height:100%">
<span style="position: absolute; top: 13px; left: 265px; right: 15px; height: 20px; text-align: Left">
<input maxlength="250" type="text" name="Text2" id="Text2" style="width:100%; height:100%;">
</span>
</div>
Working demo: http://jsbin.com/ayiwa5
You have to specify the percentage width explicitly on the <input type="text" /> for IE and firefox.
See this jsfiddle: http://jsfiddle.net/LKnJT/2/
It is quite quirky with the absolute positioning but it will make the textbox resize with the browser window.
Note: if you remove the style="width:100%;height:100%" from the div it will still resize in Chrome.
[Update]
Try this one: http://jsfiddle.net/LKnJT/5/. Tested in chrome and IE. It keeps the textbox between the left and right specifications.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Anchor Test</title>
</head>
<body>
<div style="position:absolute;left:150px;right:20px;">
<input maxlength="250" type="text" name="Text2" id="Text2" style="text-align:left;width:100%">
</div>
</body>
</html>
How much do you want it to stretch? You can specify width but set its value in terms of percentage:
width: 40%;
UPDATE:
Apply this to the input:
float: right;
width: 80%;
Just make sure to clear float on the parent container.