body{
background-image: URL("someimage.jpg");
background-position: fixed;
}
This makes scrolling in Firefox really slow. Is there a way to achieve a large centered background image with "fixed" attachment, with which scrolling in Firefox works as well as if attachment was set to "scroll".
Thanks for any CSS / JS help!
Try background-attachment: fixed; instead.
Have you tried using a smaller resolution background image? That might make a difference, because the method you are using a valid and good one in my opinion.
You're missing a "background-position:" declaration. That might slow down the rendering process.
The best fix for this firefox behaviour is actually to use a little trick:
position the supposed background image as an img element inside a layer above your content layer
use css to position the content above and both layers exactly at top 0, left 0, the upper left corner of the window
utilize jquery to resize the img to the window width and height
use height 100% for the content and overflow: scroll
Now use css to position both layers absolute on top: 0 and left: 0 and use the z-index to position the content layer visible above the background image layer. By using jQuery you can resize the background image on load (.ready) and on window resize ($(window).resize) to fit the actual screen resolution. The content layer gets an scroll overflow and there you go. This workaround actually fixes any performance issues on firefox 3.x, but requires the use of jQuery.
Related
I stumbled across a solution to a problem I was having with a website layout but wasn't sure if it was standard CSS practice or not. I've tested it on multiple platforms and browsers and it seems to be widely supported.
You can see what I'm talking about on this page.
The website linked to isn't my website but uses the same theme. I'm unable to post a link to my website as I'm working on it in a local environment.
The featured images are inside an element with position: absolute and the images themselves are set to width: 100% and object-fit: cover, and are unpositioned (i.e., static positioning).
The problem was I'm using product images and the object-fit: cover style setting was causing the images to get cut off.
The solution was to simply change the object-fit: cover setting to object-fit: contain which I understand is the default setting. This also centered the image even though the width of the images is less than the containing element.
It is happening because, when you use background-size: cover; it expands the image to cover the width of the div or element. In your case, image is being positioned center center that is why you have some top and bottom portion not visible. The only way I see to make this work is to increase the size of the element respectively with image or else resize the image to fit to the div.
If you want to check how it works. you can do this.
inspect element
change background-size: cover to contain
add css property height: 962px;
However, it is not a good idea.
I would suggest the keep it the way you have it now and adjust the background-position: if you want particular area of the image to be covered. or use the image that fit that div.
Also, the height of the div is being controlled with the content inside so make sure you have control on those content too. Easy way is to set min-height for the parent div with background image.
Let me know if this was helpful.
There are lots of solutions for maintaining aspect ratio when resizing videos based on the width of the parent div. Most of them depend on the fact that "padding-top" and "padding-bottom" are calculated based on width rather than height.
I'm trying to do something similar, but I want to resize my video based on the height of the parent div.
To do this I need to create a div that keeps an aspect ratio regardless of height.
This may be sort of a lame way to do it, but I decided to use an image to do this because I can set the height of the image with the appropriate aspect ratio to 100% and let the height sort itself out.
I am very close to making this work. As of now, I have been able to make the inner div do exactly what I want it to do, except that it will not redraw on window resize. However, if I resize the window then reload, it works. Any ideas?
Here's the demo
(it's not a codepen issue I've done it locally as well)
Good thought using an image and height: 100%. That definitely will get the box to the same aspect ratio as the image, but doesn't reflow the box on window resize for whatever reason.
Here's a demo with slightly cleaner CSS and the Javascript hack to fix the reflowing on window resize.
Full Page Demo
Code
In the demo, I use a 16px by 9px data uri image to set the aspect ratio, preventing a needless HTTP request. If you need a different ratio image, use this site to convert your image to a data uri: http://dataurl.net/#dataurlmaker
I managed to solve the reflowing issue with very basic jQuery. On $(window).resize(), I toggle a class on the body that makes the ratio images go from text-align: left to text-align: justify which tricks the browser into reflowing the box.
Browser Support
Works in Chrome, Safari, Mobile Safari, Firefox, and IE9+. The resizing is quite smooth overall, but Safari stutters a bit.
IE6/7 don't support display: inline-block so the box is 100% width and the correct height. (not a bad fallback!)
IE8 sizes the box's height correctly, but the width is only as wide as the original image (16px). The only way I found around this is using the HTML5Boilerplate style IE conditional tags to just set the embed parent to display: block like in this demo
CSS Only
If you have to have a CSS only solution, setting an animation on the ratio image to toggle a small amount of padding works in Chrome, Safari and Firefox. However, this is continually forcing the browser to re-render the page layout, which is grossly inefficient compared to only rendering the page layout on window resize.
.Ratio { animation: myfirst 1s infinite; }
#keyframes myfirst {
from { padding-top: 1px; }
to { padding-bottom: 1px; }
}
Hope that helps!
I'm building a website with a 960px design, but the designer has also requested that the page have a full-width background photo across it. He has supplied a 2000px image for this.
However, trickily, part of the photo is integral to the navigation of the page, so the image needs to be centred. So I want the left and right edges to overflow out of the viewport. I've tried to do this using CSS, but have failed.
I could do a javascript version to adjust the left margin based on the viewport when the document loads and the window is adjusted, but I expect it may perform badly, particularly on the adjustment. A lot of the target audience of the site have some serious legacy hardware, so will be using slow computers running IE6. Is there a good CSS way of doing this which would perform better?
UPDATE: Sorry, I wasn't very clear in terms of the "full-width" thing. The content of the site is all restricted to a 960px column, except this particular image, which should be the full-width of the browser window, even if it is greater than 960px. Using background-position is the method which I've already tried, but if I size the particular div to 2000px wide, then I haven't been able to center the div, whereas if I set it to 100% the background-position:center doesn't seem to work
One way you could do this is with background-position: center top;, put the 2000px image as a background to a 960px div like this:
DEMO
As far as I'm aware this is supported on IE6+
Just use background positioning.
body {
background: url(blah.jpg) center top no-repeat;
}
Try something like this on the image:
position: absolute;
left:50%;
margin-left:-1000px; /* half the width of the image */
However, if part of the image is going to be used for navigation, and it has a fixed 2000px width, i see a lot of tears in your future.
Consider dividing the image into layers that can be manipulated individually.
EDIT: As mentioned by Michael this approach is not good.
I have made a little gallery (http://www.kongeboa.dk/billeder/3/Coco/)
If you refresh, and choose to view one of the other thumbnails below the actualy image, you will see that the image resizes randomly...
I have a width on the image tag set to 100%
I am sure, that all the images has a size of 460px to fill the width of the design.
When all thumbnails have been viewed, the big image shows in the correct size (460px)
The problem happens in Safari and Chrome. OSX and Windows.
I have no idea why this happens, and i dont know how to debug it...
In short: remove float: left; from the '.image' style.
Since the '.image' style makes the div containing the image float left, the 100% is relative to the size of a div which sizes to fit the image, so you'll probably get variable results in different browsers. If you remove the float: left; from the '.image' style, it'll fill 100% of the width, and the image will in turn fit 100% of its width, and everything should be grand.
You should remove float: left from .image.
It's some kind of WebKit bug from some combination of width="100%", the shrink-wrapping behaviour of float: left, and image caching.
Live Demo - (check it in Chrome, you'll see the image is full width)
If you know they've all got a width of 460px why not set width="460"? As far as I can recall percentages for img.width are not part of the HTML spec.
If you want to make sure the image always fills its container, then what you want is the CSS style width:100%.
I give it a try...
Remove width="100%" from the img-tag and remove width:100%; from the .img class. Not sure if that solution would work for you?
I want to build a fixed width website which is 960px wide and aligned to the left. However, I want to use a background which is wider than 960px and that fills the space to the right if the user has a screen wider than 960px.
This is easy using a background image:
body {background:url(myreallywidebgimage.png) 0 0 no-repeat}
#wrapper {width:960px;}
But can I do it where the background is an SVG, without a horizontal scroll bar appearing?
The only thing I can think of that would turn off the horizontal scrollbar is to do something like as follows:
#wrapper {width:960px; overflow-x:hidden}
Edit: Upon further reflection I decided it was best to see if Google offered up an other possible suggestions and I came across this: http://helephant.com/2009/08/svg-images-as-css-backgrounds/. The above solution will only work if you assign the background to that div element. You can, however try assigning overflow-x:hidden to the body itself to see if that solves the problem as well. Hopefully these suggestions help.
The background will scroll only if your SVG image has pixel dimensions which exceeds that of the browser window. If you set the image to have 100% width and 100% height, the background should not scroll.
Take a look at this web site. They're essentially doing what you want. They have an SVG gradient as the background. As you resize the browser, the gradient adjusts to fill the entire window.
http://emacsformacosx.com/
They also have a lot of other SVG on the page, but the background gradient is all you need.