I have a webpage, where I am wanting to layer 3 images accordingly to act as a backgound so content can be placed on top. The images shouldn't move when scrolling, so fixed position wouldn't work.
Below is the sequential order they should appear from back to front (1-3)
img - sky.jpg which I set as the background image in the html.
img - backDrop.png which is set above the sky.jpg.
img - BtmRight.png which I want to position above all images and bottom right.
Both images (backDrop.png, BtmRight.png)are set with absolute positioning and z-index to determine order.
I cant get BtmRight.png image to appear bottom right above other images. I want the bottom right image to stay in place when you scroll the page. I would also like the content to appear over all the images.
Below is my HTML/CSS, Is there something I'm missing?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
html {
height: 100%;
margin: 0;
padding: 0;
margin-top:100px;
background: url(sky.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#imgBack {
width: 100%;
margin-top:100px;
position:absolute;
z-index:20;
border:#0FF thin solid;
}
#imgBtmRight {
position:absolute;
z-index:50;
bottom:0;
right:0;
}
</style>
<body>
<img id="imgBtmRight" src="BtmRight.png" width="413" height="283" />
<img id="imgBack" src="backDrop.png" />
</body>
</html>
Any light on the subject, or assistance would be greatly appreciated. Thanks
It's probably a good idea to stack your DOM elements in the right order (as well as closing that div):
body
Backdrop
BtmRight
Content
The natural 'stacking' is bottom to top - think of each element (image, div, etc.) as a piece of paper. As you move down the HTML document, you add pieces of paper to the stack. The papers sit on top of each other, unless you change the z-indexing explicitly - but it's best to get them in the right order to begin with, if you can.
Edit:
Seems to be working:
Example using linked images
The only things I changed were the image sources and positioning on the body tag. Unless there's something else you've missed out of the code you should have no problem.
ANOTHER Edit:
If you want the bottom-right image to stay in place, use position: fixed on that image rather than position: absolute.
YET ANOTHER Edit:
If you want the content to go over the top of the bottom-right image, you just need to add a wrapper for your content and use z-indexing:
Example
Related
So, I have a website I'm making for school. I'm trying to add an image in CSS so I can add style's to them, but it won't show. The linking is absolutely fine since when I type any letters in the div I'm using for the image, it shows up in the parameters of the text! This is confusing, so i'll show you:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HELLO</title>
</head>
<body>
<div class="fullImg">
<!-- if I say something like 'HI' in this div, part of the image shows up, but not without it! -->
</div>
</body>
<style type="text/css">
.fullImg {
background-image: url('img.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 100%;
}
</style>
</html>
Without any content your div has a height of 0, therefore no background image is visible. You’ll need to do something to ensure the div has a nonzero height. There are a variety of ways to do it, including setting height: 100vh or min-height: 400px. Setting height: 100% is ineffective if the containing element has zero height.
You should place stylings in the head element of the page
You have to put the following CSS style rule before .fullImg
html, body {
height: 100%;
}
I have some HTML/CSS that I came up with, I have centered the page and attempted to get an image either side (or behind it) of the centered page but I'm not sure how.
Sorry for the bad explanation, here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/images/background.png")
}
#wrap {
width: 700px;
margin: 0 auto;
}
hr.one {
margin-top: 5px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<title>ItzJavaCraft | Home</title>
<div id="wrap">
<h1 align="center">ItzJavaCraft</h1>
<hr class="one">
<p>More coming soon...</p>
</div>
</body>
</html>
I want to be able to get the background.png to the left, and the right of the page.
P.S: Sorry of I have done anything incorrect here, I am new.
Any help would be great!
Thanks,
—ItzJavaCraft
Here is a way to get one image the fullwidth and height of the screen in the background.
body {
background: url("http://placehold.it/400x300/ff66cc/ffffff&text=icon1") no-repeat center center fixed;
background-size: cover;
}
#wrap {
width: 700px;
margin: 0 auto;
}
hr.one {
margin-top: 5px;
margin-bottom: 5px;
}
<title>ItzJavaCraft | Home</title>
<div id="wrap">
<h1 align="center">ItzJavaCraft</h1>
<hr class="one">
<p>More coming soon...</p>
</div>
There's one simple error causing the background to not display: the relative URL should not start with "/" (unless, of course, you want to use an absolute path and are using a system where / refers to your root directory). Additionally, you'll need to use the background-size or background-repeat property to make the image fill up the entire page.
If you want your "wrap" element to remain white, you can just add a background-color to that element (adjusting the size of the element as necessary to get the coverage you're looking for).
The background-image property sets one or more background images for an element. The background of an element is the total size of the element, including padding and border (but not the margin). By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
Tip: Always set a background-color to be used if the image is
unavailable..If you want to provide a position in a background image,
you can use some properties like:
Property:
background-position
Also, you can use a shorthand for that like jack blank code, but if this is hard to use for you, you can make it for separate like:
Full background image to your page:
background-position: cover;
Or if you want to change the position, you can use center, left, right, and top
For example:
background-position: center top;
or
background-position: left center;
or
background-position: top center;
etc.
You can learn about this property with more examples here:
http://www.w3schools.com/cssref/pr_background-image.asp
I am using an image (in an <img> tag) as a background. I want it to always be the furthest back object. But my paragraph isn't showing up because it is covered up by the image.
I know it has something to do with the z-index, but I can't get it working.
HTML
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>2013 YourFantasyFootball</title>
<link rel="stylesheet" type="text/css" href="css/css_reset.css" />
<link rel="stylesheet" type="text/css" href="css/mystyles.css" />
</head>
<body>
<img src="images/final2.gif" class="stretch" alt="" />
<p>This is the first paragraph in the body of your new HTML file!</p>
asdfas
</body>
</html>
CSS
body {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}
.stretch {
width:100%;
height:100%;
z-index:-1;
}
p {
color:red;
}
It seems like the image should be fixed, not the body.
body,html {
height: 100%;
}
.stretch {
width:100%;
height:100%;
position: fixed;
top:0;
left:0;
z-index:-1;
}
http://jsfiddle.net/xYqsT/
The paragraph or content in front if it needs to have position: relative, otherwise anything with a z-index takes precedence.
You can do this in pure CSS, yes even for ancient browsers. This should cover IE5.5+:
body {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
background-image:url('images/final2.gif');
background-size:cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/final2.gif',sizingMethod='scale');
}
The filter is for IE8-. Taken from here, and original spec found here.
EDIT
Aspect ratio not preserved using the filter ... very true, it does not scale preserving ratio the same way that background-size:cover; does. This is a very good article, though, about different methods to use:
http://css-tricks.com/perfect-full-page-background-image/
They provide multiple CSS-only, as well as jQuery, methods. One is bound to provide what you want.
I can't recommend highly enough using backstretch.js. I've used it for a lot of projects as there is no real solution to preserving aspect ratio of an image in CSS. If you're only supporting IE9+ then by all means, PlantTheIdea's answer is the best. But for anyone that is coming here and needs to preserve aspect ration for IE8- and if they need to use an <img> instead of background-image then use this great little plugin.
You can use it as a total background with just one line:
$.backstretch('https://img.jpg');
Or you can set it as the background on any element:
$("#demo").backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");
You can also pass multiple images into the function and other parameters to create slideshows etc.
DEMO
you need to set the image as a background-image
body {
width: 100%;
height: 100%;
background: url('images/final2.gif') repeat;
}
you can use background-size to size the image appropriately (stretching it to 100%)
You might want to pop all your page content inside an element (or several elements), and give them a z-index higher than your background <img>.
E.g.
HTML
<body>
<img src="images/final2.gif" class="stretch" alt="" />
<main>
<p>This is the first paragraph in the body of your new HTML file!</p>
<!-- All page content goes in here. -->
</main>
</body>
</html>
CSS
main {
position:relative;/* So that it behaves as if it were position:static, but still gets a z-index */
z-index: 1;
}
How can i make an image to appear in the center of a webpage the image should be floating so that it will be in ther center vertically as well as horizontally .. there a re lot of snippets but none of them is complete so its not f any use to me :( I have only one jpg in the webpage nothing else
this is what i tried, this aligns it center horizontally but not centering it vertically
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title> Welcome </title>
<style type="text/css">
.centeredImage
{
vertical-align: middle;
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}
</style>
</head>
<body>
<p class="centeredImage">
<img src="mypic.jpg" alt="welcome " width ="1024" height = " 565" >
</p>
-T
This is a very tricky situation that's been discussed here more times than I can imagine.
Some would say use javascript to measure the window and move the image manually.
But if you don't know JS and really want to use vertical-align, try this: http://www.vanseodesign.com/css/vertical-centering/
HTML:
<img src="mypic.jpg" alt="Welcome" class="centered" />
CSS:
.centered {
width: 1024px; height: 565px;
position: absolute;
left: 50%; top: 50%;
margin-left: -512px; /* 1024 / 2 */
margin-top: -283px; /* 565 / 2 */
}
Example: http://jsfiddle.net/mtvyp/
Just for clarity's sake: I removed the <p> tags for centering, as they have no semantic value (i.e., they are not describing a paragraph).
Instead, we're using absolute positioning to put the picture at the halfway point of the window (its container). That, however, puts the top-left corner at that position. To actually center it, we use the defined dimensions of the picture and re-position it using negative margins of half the original size.
Hope that helps.
I'm trying to fix an image to the bottom of the document for a HTML page.
My strategy roughly involves a setting the CSS height of the html node to 100%, and setting the background-position of the background-image to bottom.
This works for pages with a document shorter than the viewport size, but for documents with a length greater than the viewport size, the background is positioned in the middle of the page.
Without knowing whether the document will be longer than the viewport or not, how can I fix the background at the end of the document?
I've managed to get it working as required in Firefox only with the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html dir="ltr" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
height:100%;
}
.wrapper {
background: #eaeaea url(ufford-logo.jpg) scroll repeat-x bottom center;
min-height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<p style="height: 2000px;">test</p>
</div>
</body>
</html>
The inline style on the p tag simulates a long document.
This works for me in Firefox 3.5, IE8/7c, Chrome 2. Doesn't work in Opera 10b but I would expect it to work in the stable version (9.6).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html dir="ltr" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height: 100%;
min-height: 100%;
}
.wrapper {
background: #eaeaea url(http://sstatic.net/so/img/so/logo.png) scroll repeat-x bottom center;
min-height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<p style="height: 2000px;">test</p>
</div>
</body>
</html>
I think what you're trying to achieve is very similar to this layout, though in your case you would just stick your image into the footer element (or have it as a background on the footer). If you have a more complex page layout you may be able to adapt the code, or you could try this approach using javascript.
If you want to stick something to the bottom of the visible window, you can do so using CSS. This will work on render (and on window resize).
#specialBackground {
background-image: url(bg.png);
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100px;
z-index: -1;
position: absolute;
bottom: 0;
}
This will place the image where you want it - you will need to change the background-image and the height appropriate to your image. The z-index places the division behind other content, but it doesn't hurt to define the division earlier in your document too (you can define it anywhere and the position will be unchanged).
To keep the division at the bottom of the viewport when the visitor scrolls the page, you'll need to use JavaScript. Example below:
window.onscroll = function() {
document.getElementById("specialBackground").style.bottom =
(document.body.scrollTop * -1) + "px";
};
Hope this helps.
EDIT: I don't know if I made this clear - but you don't use your "wrapper" division to do this - you add another empty division, which get's placed behind the wrapper because of the CSS rules. So you'd have this on your page:
<div id="specialBackground"> </div>
<div id="wrapper">
...