HTML Image Sits On Top Of Other Controls - html

I want to have my background image span the entire page. This works as it should, with the exception of it sits on top of any other control/element I may add to the page. What do I alter in order for me to be able to have an image as a background spanning the entire page as well as add text/images on top of it? This is my current syntax:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html {height:100%;}
body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1;}
</style>
<center>
<div>
<font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font>
</div>
</center>
</head>
<body>
<div id="bg"><img src="C:\KittyKat.jpg" width="100%" height="100%" alt="1stDay" />
<font size="30" color="red">Pic 1</font><br>
<img src="C:\1jpg" alt="" style="width:450px;height:500px;">
</body>
</html>

I used demo images for test it. Here is working code:
Just add z-index: -1; to #bg.
html {height:100%;}
body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%;z-index:-1; height:100%;}
#content {position:relative; z-index:10;}
<center>
<div>
<font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font>
</div>
</center>
<body>
<div id="bg">
<img src="https://www2.palomar.edu/pages/testwritingstrategies/files/2015/02/online-test-fotolia_60995176.jpg" width="100%" height="100%" alt="1stDay" />
</div>
<font size="30" color="red">Pic 1</font><br>
<img src="http://authentic-scandinavia.com/system/images/tours/photos/155/thumbnail.jpg?1370424008" alt="" style="width:450px;height:500px;">

Instead of putting the image as a element, have you tried setting the background-image property of the div? That should provide the effect you're looking for. Add the following rule to the CSS File.
#bg {
background-image: url("C:\KittyKat.jpg");
width:100vw;
height:100vh;
}

I would use z-index. It allows you to change the order of elements. So an element with z-index: 1; would appear in front of an element with z-index: 0;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html {height:100%;}
body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#backgroundImage{z-index: -1;}
#content {position:relative; z-index:1;}
</style>
<center>
<div>
<font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font>
</div>
</center>
</head>
<body>
<div id="bg"><img src="C:\KittyKat.jpg" id="backgroundImage" width="100%" height="100%" alt="1stDay" />
<font size="30" color="red">Pic 1</font><br>
<img src="C:\1jpg" alt="" style="width:450px;height:500px;">
</body>
</html>

Make the image as background of the div using css
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html {height:100%;}
body {height:100%; margin:0; padding:0;}
#bg {
position:fixed;
width:100vw;
height:100vh;
background: url('C:\KittyKat.jpg');
background-size: cover;
}
#content {position:relative; z-index:1;}
</style>
<center>
<div>
<font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font>
</div>
</center>
</head>
<body>
<div id="bg"></div>
<font size="30" color="red">Pic 1</font><br>
<img src="C:\1jpg" alt="" style="width:450px;height:500px;">
</body>
</html>

Related

HTML beginner, about image size

I want to create a simple div header to start my website and i have two pics logo.png and grey.jpg as background to my div. My logo wants to have the same height as the header, but to be left and to have something like 10% of the width.
The problem is that is that the logo doesnt seem to stay in size.It exceeds the height of the header if i put body size in auto.
<html>
<head>
<title>Museum page</title>
<meta charset="UTF-8">
<meta name="keywords" content="Home Museum">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
width:auto;
height:auto;
padding-left: 10%;
padding-right:10%;
text-align:center;
}
div#header{
height:10%;
width:100%;
background-image: url("images/grey.jpg"); text-align:center;}
nav{background-color:#d8d8d8;}
footer{background-color:white;clear:both;}
</style>
</head>
<body>
<div id="header">
<img src="images/logo.png" alt="Smiley face" style="float:left;width:15%;height:100%;">
<h1> Giorgos Angelousis life story </h1>
AM:2969 <br>Exercise-1a<br><br>
</div>
<footer>
TOP
</footer>
</body>
</html>
I want the logo to be the same height as the div , head.
Just remove the width:15% from <img src="images/logo.png" alt="Smiley face" style="float:left;width:15%;height:100%;">.
I've created a JSFiddle for you :)
HTML:
<div class="flex">
<div>
<img src="images/logo.png" alt="Smiley face" style="width:50px;height:100px;">
</div>
<div class="middle">
<h1> Giorgos Angelousis life story </h1>
</div>
<div>
<div>
AM:2969
</div>
<div>
Exercise-1a
</div>
</div>
</div>
CSS:
.flex{
display: flex;
align-items: center;
}
.middle{
padding-left:10px;
padding-right:10px;
}
Just remove height:100% from your <img> tag. So it will automatically get the height of header div. Here's sample snippet.
<html>
<head>
<title>Museum page</title>
<meta charset="UTF-8">
<meta name="keywords" content="Home Museum">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
width:auto;
height:auto;
padding-left: 10%;
padding-right:10%;
text-align:center;
}
div#header{
height:10%;
width:100%;
background-image: url("images/grey.jpg"); text-align:center;}
nav{background-color:#d8d8d8;}
footer{background-color:white;clear:both;}
</style>
</head>
<body>
<div id="header">
<img src="test-img.jpg" alt="Smiley face" style="float:left;width:15%;">
<h1> Giorgos Angelousis life story </h1>
AM:2969 <br>Exercise-1a<br><br>
</div>
<footer>
TOP
</footer>
</body>
</html>

Background stretch with content in divs + tables

I want to place a stretched background image that covers the entire window and content in divs and tables.
This code works fine:
<!doctype html>
<html>
<head>
<title>Background to fit screen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Imagetoolbar" content="no">
<style type="text/css">
/* pushes the page to the full capacity of the viewing area */
html {height:100%;}
body {height:100%; margin:0; padding:0;}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
/* places the content ontop of the background image */
#content {position:relative; z-index:1;}
</style>
</head>
<body>
<div id="bg"><img src="../images/background.jpg" width="100%" height="100%" alt=""></div>
<div id="content">
<table>
<tr>
<td>
<img src="images/1.jpg">
</td>
<td>
<img src="images/2.jpg">
</td>
</tr>
</table>
</div>
</body>
</html>
The problem is the spacing between images in the cells of the table!
It's pretty bad once you have a very big table with tons of images.
Please help!
For your table div, you can rework it and add background-size: 100% 100%;
<div id ="bg" style="background-image: url(../image/background.jpg); background-size: 100% 100%;">
<table>
<!--table stuff-->
</table>
</div>
Obviously you'd want to pull out my inline css into your css file, but this gives you the general idea. With your IE 6 version, since it doesn't support CSS3, you may want to just use a background color instead.
give your table width 100% and give the style to the table
#content { background-image:url('image.jpg'); }

Center floating DIVs

Im trying to center 3 floating DIVs. It works if I give the parent DIV display:table; and the child DIVs display:cell; which will then act like a table. Is there another way ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Center Div</title>
<style type="text/css">
#container
{
text-align:center;
margin:0 auto;
display:table;
}
#container div
{
float:left;
padding:5px;
display:cell;
}
</style>
</head>
<body>
<div id="container">
<div style="background-color:yellow">Text 1</div>
<div style="background-color:lightgreen">Text 2</div>
<div style="background-color:lightblue">Text 3</div>
</div>
</body>
</html>
I think if you define the width, display: block, margin 0px auto, position:relative it should work.
Try this,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Center Div</title>
<style type="text/css">
#container
{
text-align:center;
margin:0 auto;
width:200px;
}
#container div
{
float:left;
padding:5px;
display:cell;
}
</style>
</head>
<body>
<div id="container">
<div style="background-color:yellow">Text 1</div>
<div style="background-color:lightgreen">Text 2</div>
<div style="background-color:lightblue">Text 3</div>
</div>
</body>
</html>
You need to assign width to the parent div like this :
#container
{
text-align:center;
margin:0 auto;
width:150px;
}
My Fiddle
Any reason why you don't want to use a table?
It might solve the purpose. Tables are not all that evil as they are made out to be ;)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Center Div</title>
<style type="text/css">
#container
{
text-align:center;
margin:0 auto;
}
#container td
{
padding:5px;
}
</style>
</head>
<body>
<div id="container">
<table cellpadding="0" cellspacing="0" style="margin-left:auto;margin-right:auto;">
<tr>
<td style="background-color:yellow">Text 1</td>
<td style="background-color:lightgreen">Text 2</td>
<td style="background-color:lightblue">Text 3</td>
</tr>
</table>
</div>
</body>
</html>

IE 8 creates Empty Text Node for img tag

When i try to add a <img> tag, IE8 automatically add a 'Empty Text Node' after the image tag.
HTML :-
<html>
<head>
<title>Railway Services</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="img/icon.png" />
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="header">
<div id="wrapper">
<div class="logo">
<img src="img/logo.png"/>
</div>
</div>
</div>
<div id="page" class="homePage">
<div id="wrapper">
<h1>Home Page</h1>
</div>
</div>
<div id="footer">
<div id="wrapper">
<p class="copyRight">Copyright©2012 Railway Services. All rights reserved</p>
</div>
</div>
</body>
</html>
styles.css :-
#CHARSET "ISO-8859-1";
body{
margin:0px;
padding:0px;
font-size:12px;
color:#123456;
font-family:verdana,_sans,arial;
text-align:center;
}
#wrapper{
width:98%;
margin:0 auto;
}
#page{
float:left;
width:100%;
}
p{
margin:0px;
padding:0px;
}
/**********************HEADER*********************/
#header{
float:left;
width:100%;
}
.logo{
float:left;
width:20%;
height:150px;
cursor:pointer;
}
.logo img{
width:100%;
height:100%;
}
/************************HEADER END***************/
/************************FOOTER*******************/
#footer{
float:left;
width:100%;
}
/***********************FOOTER END****************/
See this image
In the above image you can see the IE generates Empty Text Node after the <img> tag.
I can't found why IE generate empty text node.Can anybody help me..?
IE shows this to any elements in the page that has a blank space between tags. This may not cause any problem.
The only consideration is when your content is inline and it adds a space between the elements. In this case, all you have to do is eliminate the blank space between the tags.
There is a line break and some whitespace for indentation after the image tag, which leads to creating an empty text node.
If you write your code like that:
<div class="logo"><img src="img/logo.png"/></div>
you will not have the empty text node any more.
Since it's really IE specific, I think it's just a bug of the parser.

CSS issue in IE7

I have simple web page and that banner contains three images. I want to expand the banner when different resolutions.my solution is working on Firefox and Chrome but not IE7.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#left{width:338px; height:103px; float:left; background-image:url('image/banner_left.jpg'); background-repeat:no-repeat; margin:0px; padding:0px;}
.middle{float:left; background-image:url('image/banner_middle.jpg'); background-repeat:repeat-x; margin:0px; padding:0px; }
#right{width:620px; height:103px; float:right; background-image:url('image/banner_right.jpg'); background-repeat:no-repeat;margin:0px; padding:0px; }
</style>
</head>
<body style="margin:0px; padding:0px;">
<form id="form1" runat="server">
<div id="container" class="middle" style="float:left;">
<div id="left"></div>
<div id="middle" class="middle"></div>
<div id="right"></div>
<div id="content" style="clear:both; float:left;"></div>
</div>
</form>
</body>
</html>
any idea?
thanks in advance!
Try to set width value in .middle in percents.
Using your example and assuming you want any content under the banner this is one way you can do it:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body{
margin:0px;
padding:0px;
}
#banner{
background:url('image/banner_middle.jpg') ;
background-repeat:repeat-x;
}
#left{
width:338px;
height:103px;
float:left;
background-image:url('image/banner_left.jpg');
background-repeat:no-repeat;
}
#right{
width:620px;
height:103px;
float:right;
background-image:url('image/banner_right.jpg');
background-repeat:no-repeat;
}
.clearFloat{
clear:both;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="banner">
<div id="left"></div>
<div id="right"></div>
<div class="clearFloat"></div>
</div>
<div id="content">
Any content goes here
</div>
</form>
</body>
</html>