I'm looking for a way to set an image to the 100% height of the browser window (with a small padding at the bottom), centred on the page.
I've set up an example in codepen, which works great in Chrome and Safari, but not Firefox, where the image shows at full size. What am I missing?
http://cdpn.io/sHJhl
.photo-bkg also needs its height set:
.photo-bkg { height: 100%; }
Here's a working fork of your pen.
Related
A Firefox change broke some of my background/border images. See this issue for more details: CSS - New Firefox-release doesn't show Border-Image anymore. When I fixed this issue by adding border-style: solid my text now displays a white/gray background behind it. Any idea why this might be happening. See my image on Chrome (how it is supposed to look) and then on Firefox.
Chrome:
Firefox:
Here is the jsfiddle link: http://jsfiddle.net/nirodhasoftware/offuhxao/1/
You need to draw a background too.
From pseudo or from element itself :2 examples to tune to your needs.
pseudo:
background:#5099D6;
background-clip:padding-box;
element:
background:url(http://www.rwe-uk.com/static/ichat_with_css3/speech_bubble_left_2.png) center / 300% 150%;
background-clip:content-box;
I'm having a problem on a website with Safari 7 (on OSX).
The website address is:
<Edit: Address not valid anymore. Sorry.>
If you click on vertical newsletter button, on the right edge of the content box, an overlay will pop-up.
This overlay looks good on most browser, but there is a problem with safari.
The overlay content is an absolutely positioned box of fixed width. It contains a div with the class "bg", which is a div with CSS position set to fixed and CSS top, right, bottom left set to 0.
The desired (and normally obtained) effect, is that this bg box sizes up to the width and height of the viewport. In safari, it just behaves as if it had it's position set to "absolute" - it just sizes up to the width and height of the container div.
Is this a known issue with Safari? Is there a bug filed? An update?
I could probably fix that by rewriting small parts of the HTML, CSS and JavaScript (if someone has an easier solution, you're welcome to share it!) but I'd like to understand what's happening at first.
I'm not sure what's going on with that positioning thing, but here was my approach to get the same result across the browsers:
#overlays .overlay { /* line 1081 */
...
width: 100%;
height:100%;
...
}
#overlays .overlay .content.text { /* line 1185 */
...
margin:0 auto;
...
}
You could use Z-index but Z-index is not reliable with position:fixed, as shown in this fiddle: http://jsfiddle.net/mZMkE/2/ use translateZ transformation instead.
transform:translateZ(1px);
on your page elements.
EDIT: In your code, Add this css:
.bla, .projects, .contact {
-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
}
and then remove z-index refs from those elements and .intro.
Also You can try in other browsers as well
It seems -moz-mask-image is not supported in Firefox.
I am attempting a foreground gradient. I can't use an image as i need the text to be selectable. Does anyone have any ideas for Firefox?
This version works in chrome and safari
css:
-webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.16, rgba(0,0,0,0)), color-stop(0.52, rgba(0,0,0,.5)), color-stop(0.77, rgba(0,0,0,1)));
-moz-mask: -moz-gradient(linear, left bottom, left top, color-stop(0.16, rgba(0,0,0,0)), color-stop(0.52, rgba(0,0,0,.5)), color-stop(0.77, rgba(0,0,0,1)));
According to MDN, you can just use mask for Firefox, as of Firefox 3.5:
https://developer.mozilla.org/en/CSS/mask
However, mask requires an SVG image to act as the mask. You might be able to base-64 encode your SVG image into your stylesheet, or you can use an SVG image file.
I have div and span elements with PNG-24 background images. The background image is pixel sharp, however, they appear blurry in IE8 despite the browser's zoom being set at 100% and text at medium size.
Strangely, when I scroll down and back up, the background images appear sharp again.
This is how it appears:
After scrolling down and back up, this is how it appears:
Even in this case, its a bit blurry. This does not occur in IE6, IE7 or IE9.
I had the same problem - PNG-24 images look fine in Firefox but very blurry in IE8. The solution, in IE8 go to Tools > Internet Options > Advanced Tab. In the tree, under the Multimedia deselect Enable Automatic Image Resizing. This should fix the problem.
.classid img {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */
zoom: 1;
}
I have a long image that is currently serving as a navigation system for a site in development. You can see it here. This navigation system will eventually be split into smaller sections, but I imagine I may well see the same issues that I am seeing now.
The image is 1920px wide and the idea is that, however wide the user's browser window (up to 1920px), the navigation image (branch) will always extend off the screen. The leaves at the center of the navigation system should always be centred on the page to match the logo above.
The navigation DIV currently has the following CSS:
#nav {
position: absolute;
top: 210px;
left: 50%;
margin-left: -960px;
}
The body has a min-width of 900px.
There are two issues I am having with this setup:
As you will see when you visit the page, the width of the browser page is being set by the right edge of the long image for the navigation system, when I would like it to be set to 100% when the width of the browser window is greater than 900px, and to 900px (with horizontal scrollbars) when the width of the browser window is less than 900px.
The navigation system isn't respecting the min-width of the body, i.e. it continues to move to the left even when the width of the browser window is less than 900px, whereas the rest of the page content doesn't.
Could someone help with these issues?
Thanks,
Nick
What I would do is
Cut out the middle part of the image (the one with the actual content).
Take out a slice from the line background that can be repeated infinitely. Like so:
Put the middle part of the image into a div that is 100% wide and has
background-image: url(/path/to/slice.png);
background-repeat: repeat-x;
that will give you an infinitely resizable navigation area, without needlessly expanding the page.