Background stretch with content in divs + tables - html

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'); }

Related

CENTERED HTML content box with a width and height limit?

I need what is listed as the question. It needs to function on its own and does not have any CSS tags for divs.
I have a website with a centered pane that I'm working on, but the text aligns to the box, when I set a limit on the width of it, it goes to that paragraph width but automatically goes to the left of the 900PX content radius. Here's an example of what I'm talking about;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<p style="width:850px;"><font color="#000000">
<font face="calibri"><p align="center">BEEP</p>
<body>
</body>
</html>
For html W3C standard validation you have to write your code within body tag like this:
this will be your perfect code:
Untitled Document
<body>
<p style="text-align:center; width:850px; color:#000000; font-family:calibri;">BEEP</p>
</body>
</html>
SOLVED.
<div align="center"><div style="width:600px;">

CSS background elements on both sides of the screen

I want to achieve this: two decoration elements (sort of waves) on both sides of the screen. Here's what I've got so far. If more elegant solution is possible (like styling with CSS only body element), then please advise.
Below solution would be fine, if both < img > elements would not be visible.
You can check this in action.
Here's the working FIDDLE.
Can you help?
<!doctype html>
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="styles/style.css" >
<style type="text/css">
.background_left {
background-image:url("http://www.destadesign.com/destacms/images/background_border_left.png");
background-repeat:repeat-y;
background-position:left;
position:absolute;
left:0;
}
.background_right {
background-image:url("http://www.destadesign.com/destacms/images/background_border_right.png");
background-repeat:repeat-y;
background-position:right;
position:absolute;
right:0;
}
.background_left, .background_right {
height:100%;
}
</style>
</head>
<body>
<div class="background_left">
<img src="http://www.destadesign.com/destacms/images/background_border_left.png">
</div>
<div class="background_right">
<img src="http://www.destadesign.com/destacms/images/background_border_right.png">
</div>
<div class="content" style="height:500px;"> <!-- content -->
</div>
</body>
</html>
Just do it like this:
body {
background:url("http://www.destadesign.com/destacms/images/background_border_left.png") left repeat-y,url("http://www.destadesign.com/destacms/images/background_border_right.png") right repeat-y;
}
This CSS adds two background images to body, positions them right or left respectively, and sets the repeat-y, so it doesn't fill the screen.
JSFiddle Demo

fix a div/button/link to a background image

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/

Print Preview White Border around image in IE and Firefox

Firefox and IE display the border around image while doing print preview. It is a simple page with two div each div contains one image width of 400px and the container div is 800px. I do not want the white border in between the two images which I am getting while doing print preview. Is there anything I am doing wrong here?? (in chrome it does not display the white border.)
I have tried this code also for print css but no luck..
<style type="text/css" media="print">
.test{float:none;display:inline; border:none;}
img{border:0;}
</style>
The code is:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="print">
.test{float:left; display:inline; border:none;}
</style>
</head>
<body>
<div style="width:800px;margin:0px auto;">
<div class="test" style="float:left;width:400px;">
<img src="1334300111712.jpg">
</div>
<div class="test" style="float:left;width:400px;">
<img src="1334300115318.jpg">
</div>
</div>
</body>
</html>
Try adding this CSS:
img { border: 0; }

How do I get rid of useless scroll space on css

Okay so this is my first html/css/javascript website. I am not sure what's going wrong basicly I used css to make the background image fit, then I tried to add an image link using
<div id="project_button" style="position:relative; top: 1000px; left: 1000px" >
the result being 1000 pixels of scroll room on the horizontal scroll bar.
There are similar results when I try to edit the location with
margin-left:1000px
margin-top: 1000px
Except it will be the vertical scroll bar that has extra room.
<html>
<head>
<title>Home Page</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Imagetoolbar" content="no">
<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.images) {
var button1_up = new Image();
button1_up.src = "project1.gif";
var button1_over= new Image();
button1_over.src = "project2.gif";
}
function over_button(){
if (document.images) {
document["buttonOne"].src = button1_over.src
}
}
function up_button() {
if (document.images) {
document["buttonOne"].src = button1_up.src
}
}
//-->
</SCRIPT>
<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%;}
</style>
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute;
padding-right:800px;
margin-right:-800px;}
#project_button {position:static;}
</style>
<![endif]-->
</head>
<body>
<div id="page1" style='position: relative'>
<div id="bg"><img src="WebBacking.jpg" width="100%" height="100%" alt="">
</div>
<div id="project_button" style="position:relative; top: 1000; left: 1000" >
<a href="projects.html" onMouseOver="over_button()"
onMouseOut="up_button()">
<img src="project1.gif" alt="click me"
width="1800" height="200" name="buttonOne"
border=0>
</a>
</div>
</div>
</body>
</html>
This is the rest of my code. Any help is appreciated.
btw when I scroll vertically or horizontally the background still fits but because the image's location is static it moves when scrolling. I should also mention that when i set
top: 0; left:0;
the scroll bar is removed. this also goes for top-margin.
If you don't want a scroll bar at all in certain elements add overflow:hidden to the css. this way everything outside the element will be clipped, and no scroll bars are visible.
Also try overflow:auto. It shows scroll bar when the content overflows only.