I have a background image for a site that looks fine in firefox,chrome, and safari. IE however, the image shows up on the top of the page. what am i missing?
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -999; /* Ensure div tag stays behind content; -999 might work, too. */
opacity:.09;
filter:alpha(opacity=9);
}
.stretch {
width:100%;
height:100%;
}
html:
<div id='background'><img src='<?php echo $bg;?>' class='stretch'></div>
//rest of page//
where $bg is path to a image.
Just use PHP in an inline style:
<div id="background" style="background-image:url(<?php echo $bg; ?>);">
I think you want to achieve a full page background this will helpful for you.
http://css-tricks.com/perfect-full-page-background-image/
Good luck!
Related
I have setup streched background on the homepage of https://picup.it through the class
<div class="bg-background">
Which is defined as below:
.bg-background {
height: 100%;
}
.bg-background:after{
background: url({% static "images/picup-bg-01.jpg" %}) no-repeat;
background-size: 100%;
content: "";
opacity: 0.6;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
};
However, it looks slight different on localhost. In production (picup.it) background image is stretched to the screen size - you can observer that after scrolling down a div with panel is going out of the background image.
On localhost however, background image covers full div and goes below the scrolling - until the place where div ends.
Why? Same with Chromium and Firefox.
add a background image to your body and fix that image
body
{
background: #fff url(/static/images/picup-bg-01.jpg) no-repeat fixed;
}
try this syntax instead
.bg-background {
background:url({% static "images/picup-bg-01.jpg" %}) center no-repeat;
height:565px; /* just pick a random height */
width:100%;
position:absolute;
opacity: 0.6;
background-size:100%;
z-index: -1;
}
It may also due to you didnt specify a height, thus it scaled differently.
second explanation, upon inspecting your html dom struture you did.
<body>
<div class='bg-background'>
<!--- html content -->
</div>
</body>
should be this instead
<body>
<div class='bg-background'>
</div>
<div id='body-content'>
<!-- html content -->
</div>
</body>
Do you have any browser extension? It might be CSS code is being injected into the page.
Second idea:
You could try changing your code into:
background-image: url('images/picup-bg-01.jpg');
for one, and keep:
background-size: 100%;
content: "";
opacity: 0.6;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
EDIT:
If you use the Tryit Editor from the w3schools website, you'll see that your CSS code appears exactly as it does on your website (with the unstretched height), whereas using background-image in the same editor does provide you with the expected 100% height size.
EDIT #2:
Actually, it's not exactly what I said while writing EDIT #1. If I use your style code for the body of the page in the editor I get what you currently have on your website. If I use it in a div, however, it is properly scaled.
The code I provided seems to be working on both scenarios, though.
I've a web page that is built the body tag in the CSS is currently set to:
body {
background: url(../images/bg_fence.png) bottom repeat-x;
}
URL: http://s361608839.websitehome.co.uk/careForAll/www/index.html
Right now, it shows a picture of a fence at the bottom of the page.
Instead of using a background in body to do this, how else can I do this?
Create a div:
<div class="fence"></div>
Then add the CSS:
<style>
div.fence {
background: url(../images/bg_fence.png) repeat-x;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 17px;
}
</style>
You can use a div which spans the width of the entire page and comes last in your document flow. It would either have to be a div with overflow: hidden and a large image, or with a background image on the div instead of the body.
Try changing the position:absolute to position:fixed for <div class="fence"></div>.
I've got the following situation:
<html>
<head>
<title>
Title
</title>
<style type="text/css">
#wrapper {
width: 100%;
}
#thingy {
position: absolute;
top: 20px;
background-image: url("bg.png");
width: 100%;
height: 4px;
}
</style>
</head>
<body>
<div id="wrapper">
<img src="test.png" alt=""/>
<div id="thingy"> </div>
</div>
</body>
</html>
test.png is the same image, bg.png is a 1x4 background image.
The problem is: The element #thingy is displayed in front of the image, so a line goes right through the image. This should not happen, #thingy should be displayed behind the image. Playing with z-index doesn't do anything...
Any hints?
Thanks,
Jost
EDIT: Some more details:
The goal is to get a header banner (test.png above), which has a horizontal line under it. The line must span the entire width of the header area (thus width: 100%), the banner must remain centered.
Declaring position: relative on the image and giving it a z-index corrects the behavior. See below:
#thingy {
position: absolute;
top: 50px;
background-image: url("bg.png");
width: 100%;
height: 4px;
z-index: 1;
}
#wrapper img {
position: relative;
z-index: 2500;
}
Apply a z-index and set the position to the image:
#wrapper img {
z-index: 100;
position: relative;
}
#thingy {
z-index: 99;
}
for sure "thingy" is displayed in front of the image, because it has the position absolute.
z-index can not help in this case, because the image is positioned static and z-index has no influence to it.
I have no idea what you try to achieve, but when you position the image also absolute, then the z-index will work.
EDIT: To the edits to your question it is now a bit clearer what you want. Why don't you put the background-image you have in the moment in thingy ans background-image of your wrapper? If needed positioned to with background-position. Then you center your image in the Wrapper and you are done. You need the "thingy" div for nothing in your case.
i think you are looking for this;
http://jsfiddle.net/mtariq/xmYpq/
I asked a question about this that was specific to my code and people were really helpful, so I picked the answer that was more susccessful, even though I did not solve my problem.
I am trying to get a large css background just like livingsocial has.
I have an image that is 1400 x 1050
My current resolution is: 1280 X 1024
My image keeps getting cut off from the bottom
Question(s):
Whats the best way to display large image backgrounds using css?
Do I need to have same background image in 4 different resolution and then use the image that best fits the current resolution user is using (is there some script for it)?
Do I need just one big image that I keep scaling using css
How are others tackling this problem?
I'm interested in knowing what is the best way to do this so that it works fine in all resolutions out of the three options above.
CSS3 Solution
You could use background-origin and background-size in CSS3, but it's not supported by IE8 and lower.
PHP Solution
You could GD2 to scale the image specific to the users browser, this solution would also involve JavaScript.
Living Social Way
They're inserting an image with the <img/> tag and positioning it fixed.
<style type="text/css">
#background {
z-index: -1; /* put it under everything*/
position: fixed; /* make it stay in the same place, regardless of scrolling */
top: 0;
left: 0;
overflow: hidden; /* clip the image */
width: 100%; /* fill the full width of browser */
min-height: 950px; /* show at least this much of the image */
}
#background img {
width: 100%;
}
</style>
<body>
<div id="background"><img /></div>
<div id="content"><!-- Your Content Here --></div>
</body>
Living Social has some more code applied to their <img/> tag, but it seems sort of redundant, perhaps it's for better cross-browser support, I didn't show it here.
I am not aware of a CSS method that will achieve crossbrowser background.. that actually works in lower ie versions.
However there are some jquery plugins out there, like this one:
http://srobbin.com/blog/jquery-plugins/jquery-backstretch/
Try specifying the img width and height, then if it's cut on the sides center the image. Otherwise, your image will be cut off depending on the screen size; Or stretched out, if you set the size of it to match the screen size.
Google: css autosize background image
http://css-tricks.com/3458-perfect-full-page-background-image/
I decided to answer this question again, given the different set of requirements, both are valid; however, this one specifically addresses if you DON'T want the image to be cut off at the bottom.
DEMO: http://wecodesign.com/demos/stackoverflow-7082174.htm
<style type="text/css">
#background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
#contentContainer {
position: relative;
width: 500px;
height: 500px;
}
#theContent {
/* this is all pretty much just to make it look good, nothing important in here */
position: absolute;
top: 200px;
left: 200px;
background: #FFF;
width: 80px;
height: 80px;
opacity: 0.7;
border-radius: 6px;
padding: 10px;
}
</style>
<div id="contentContainer">
<img id="background" src="stackoverflow-7082174.jpg" alt="Pretty Background" />
<div id="theContent">This is the content</div>
</div>
I just stripped the code from living social and thought it would be handy if I put it here:
<div id="landing-page-container">
<div id="background-container">
<div>
<img alt="background" id="background" src="files/background.jpg">
</div>
</div>
</div>
<div class="container"></div>
and here is your css:
html {width: 100%; height: 100%}
body {width: 100%; height: 100%}
body, #landing-page-container {width: 100%; height: 100%; background-color: black; z-index: 1}
#background-container {width: 100%; height: 100%; position: absolute}
#background {width: 100%; height: auto; z-index: -100}
and of course you need to supply your background.jpg
Working Demo: http://jsbin.com/opokev/54
I'm working on having this image as the background image and also have a header as well, however, as the demo shows my header is cutting onto the image.
How can I correct this so that first the header draws and then the background body image draws. I still want to maintain the quality of the image as is without scaling it.
Here you go http://jsbin.com/opokev/64/
just changed top: 0 to top: 85px and it works.
Try using background-position.
background-position: 0px 85px;
Could do the trick :)
Or you could try just using this:
#background img {
width: 100%;
height: 100%;
position: absolute;
top: 85px;
left: 0;
z-index: -1;
}
I can't see any difference in these to backgrounds (thinking about scaling):
http://jsbin.com/opokev/54
http://jsbin.com/ijoyiy/2
Then again, I'm 2min away from sleeping and I haven't got my glasses on ;)
Remove the img tag and use background-image for the div#background. Then, set background-position to center 85px.
Combined CSS:
div#background
{
background:url('http://i52.tinypic.com/33xd1yu.jpg') no-repeat center 85px;
width:100%;
height:100%;
}
This will shift the background image down 85px.