I'm trying to get a nice fullscreen image background for my website. It's working fine in almost every browser I tested in (browsershots.org), but in Chrome on my Android tablet it's not working as expected. As you can see there's a lot of white in the background, where it should be all image.
Link : http://test.socie.nl
CSS :
body {
background: url(../../images/background/image1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Unexpected result :
It appears to be a four year old bug that the Android/Chrome team are ignoring:
https://code.google.com/p/android/issues/detail?id=3301
http://productforums.google.com/forum/#!topic/chrome/l6BF3W0rymo
I've tried every solution I could find mentioned in those links and other places; all fail on Android 4.3 Chrome 30. All fail even worse on Android 2.3 native browser.
The one I am going with is:
.body{
background:#fff url(background.jpg) no-repeat fixed center;
background-size:cover;
}
(I.e. that CSS moved out of body into a class called "body"), and then in the HTML I have:
<body>
<div class="body">
...
<div class="ftpush"></div><!--Part of keeping the footer at the bottom of window-->
</div><!--end of "body"-->
<div class="footer"></div>
</body>
</html>
(BTW, the technique you can see there, to keep the footer at the bottom of the window, does not appear to be causing the problem, as in my first set of experiments I'd stripped that out.)
Aside: I was surprised to see Firefox for Android also misbehaves with background-size:cover. Are they sharing the same rendering engine?!
There is update to the method posted above (as published here).
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Though the issue in the original question still persists despite the update. What worked for me was adding full width and height to the html CSS in addition to the above:
html {
width: 100%;
height: 100%
}
Solved by adding the following:
html {
height:100%;
min-height:100%;
}
body {
min-height:100%;
}
Instead of a background image, try using an <img> instead:
HTML :
<img src="imagepath" id="your-id" />
CSS :
#your-id{
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: -999;
}
Actually ALL I needed if your using html tag is to add:
height: 100%;
...with the caveat that still the image will resize a bit when you scroll the menu bar out of view, but I think all of other answers also have that issue.
Related
I am using Selenium to test the functionality of web page. A Valve appears open or closed by loading the appropriate PNG file . I need to check if valve is open or closed by checking if right PNG file is loaded
How to do that with Selenium . The Xpath remains the same when either of images are loaded
Here is code behind code for that element
Blockquote
<div comp_type="CustomizedComponent" show_function="loadCustomizedComponent" class="server_binding textCenter" style="position: absolute; left: 521px; top: 26px; width: 84px; height: 50px; text-align: center; background-size: 84px 51px; transform: rotate(0deg); background-image: url("img/DD6E3CB1.png"); z-index: 15; background-repeat: no-repeat;" range="129" address="3" type="1" length="1" on_text="" off_text="" id="157235533478328" show_param="157235533478328" degree="0" tag_id="Private Tag" on_image="img/10F9F7E8.png" off_image="img/DD6E3CB1.png" mode="false">
'
Blockquote
Thanks
Try this
string backgroundImg = Driver.FindElement(By.Id("157235533478328")).GetCssValue("background-image");
if (backgroundImg.Contains("DD6E3CB1.png"))
{
//Off image
}
else
{
//On image
}
I'm updating an older html page with CSS, which I've just started getting into. The new version looks good, but there are huge empty spaces now at the bottom and right of the page when the user scrolls.
The nature of the page is several different content boxes, all of which have graphical backgrounds.
The old method I was using was to use a large table to organize the layout and give the table one large, solid background image. A colleague pointed out this was too old-school and suggested I try learning divs and css.
The newer version I produced broke each box up into separate divs and images and positioned them absolutely, but there was no way to keep the content centered if the browser window was resized.
I redid the whole page again, this time using relative positioning and one main container div that I could center. Everything looks good and stays centered, but now I'm getting big blank spaces on the bottom and right sides because of the positioning.
I've seen some people say they've fixed this by using a negative margin, but it doesn't seem to be having any effect on my page (unless I'm putting it in the wrong spot).
I need to know if there's a specific way to fix this that I don't know about or if I'm just going about the whole page completely the wrong way. How can I get my elements lined up correctly, centered, and with no extra scroll space? Should I just go back to using a table?
Here's a simplified version of the page with the content taken out (just the layout):
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style type="text/css">
body
{
background-color: black;
margin-bottom: -2000px;
}
div.main
{
width: 1100px;
margin-left: auto;
margin-right: auto;
margin-bottom: -2000px;
}
div.logo
{
position: relative;
left: 40px;
top: 60px;
z-index: 1;
}
div.window1
{
position: relative;
left: 320px;
top: -555px;
z-index: 1;
}
div.window2
{
position: relative;
left: 320px;
top: -580px;
z-index: 1;
}
div.window3
{
position: relative;
left: 680px;
top: -1250px;
z-index: 2;
}
div.window4
{
position: relative;
left: 25px;
top: -1570px;
z-index: 1;
}
</style>
<div class="main">
<div class="logo">
<img src="images/logo8.png">
</div>
<div class="window1">
<img src="images/window1_fullsize.png">
</div>
<div class="window2">
<img src="images/window2_fullsize.png">
</div>
<div class="window3">
<img src="images/window3_fullsize.png">
</div>
<div class="window4">
<img src="images/window4_fullsize.png">
</div>
</div>
</html>
You could use "em" or "%" values for top and left.
But the best be to handle this using JS.
Hope this helps.
I fixed this some time ago. I eventually did go back to using a table for the layout (which I understand is frowned upon) combined with a little bit of relative positioning, but I made sure everything was done with css and was w3 compliant:
http://www.burningfreak.com
The inherent problem, I think, is the way I designed my older pages, visually. They were highly graphical and usually made up of one contiguous background image, with a lot of art making up the section borders, etc. The general layouts tended to be unusual shapes, and I would then over-lay text and content on top on that. Unfortunately, it's very difficult to get looking right if the sections are separated.
I've since designed newer pages using only divs and css and it seems to work well, although it's a bit trickier to get working. The key, I think, is to come up with a look and style that I know is going to work using that technique from the start.
I use MVC4 and minifying my CSS files, but a div tag that have a background image isn't showing the image in release mode. When I inspect the page with firebug, it says "Failed to load image..."
It works in debug mode, but not in release mode.
What is wrong with my div background images?
The physical path on my project is "\Content\themes\default\images\" and the CSS looks like this:
.headerlogo {
background-image: url('images/logo.png');
background-repeat: no-repeat;
background-size: auto auto;
height: 28px;
width: 127px;
margin-top: 25px;
}
I tested the following:
background-image: url("themes/default/minified/images/logo.png");
It works, but if you create a sample MVC4 internet application and look at it's CSS, the image address is:
url(images/ui-bg_flat_0_aaaaaa_40x100.png)
Why doesn't this work for me?
Here is the css code I am using:
#wrapper{
position:relative;
width:950px;
margin-left:auto;
margin-right:auto
}
#content {
text-align: left;
padding: 0px 25px 0px 25px;
margin-left: auto;
margin-right: auto;
position: absolute;
left: 50%;
/*half of width of element*/
margin-left: -450px;
height: auto;
}
And this is the site: http://projectstratos.com/31-01-11/
Please ignore the social icons and the height issues.
To see what I mean make your browser smaller and bigger. The text moves to the right while the background image stays centered. How can I fix this?
I don't believe there's an actual 'fix' for the problem you're presenting.
When you say that the text 'moves to the right' in reality- the text is not moving at all.
Your background image is just trying to maintain itself in the center of the horizontal axis- which you're changing.
For example.. If you got Bungie's website http://www.bungie.net/Projects/Reach/default.aspx and you perform the same action. You'll get the same 'effect' that you are. The only difference is that the background of the text in their website isn't a part of the background image.
Here's what you need to do in order to 'fix' you're problem.
Separate the background (planet, space, etc..) from the logo, purple box etc.
Keep the space, planet, etc.. in the same spot as the background image that's there now.
Take the purple box and put it in it's own div that wraps around all your content
You're code will look similar to this:
<body>
<div id="purpleboxbackgroundimage">
<div id="contentandtext">
<h1>jhkljhlkjhlkj</h1>
</div>
</div>
</body>
I hope this helps.
I have some text rotated 270 degrees, which I would like to apply the -moz-box-shadow/box-shadow/-webkit-box-shadow CSS propert to. Unfortunately, the browsers all render the box shadow as if the text block element has not been rotated (i.e the shadow position is 90 degrees away from where it should be as if in standard left-to-right rendering)
Is there a way to overcome this problem?
This works for me. Can you post your code so we can see what you're doing? (For example one thing you could be doing is setting your transform - rotate on a span element but setting your box-shadow on a container div.)
Here is some webkit code that works:
#RRottatte{ -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(270deg);
width: 100px;
height: 100px;
top: 300px;
left: 200px;
-webkit-box-shadow: 6px 6px 0px red;
}
</style>
</head>
<body>
<div id="RRottatte">My Rotated Text</div></body>
</html>
You are probably applying the box shadow to a parent container (which is not rotated), you must apply it to the container which has the transform, i.e:
http://jsfiddle.net/QK9wG/