I am looking to achieve a similar effect to this website i found: http://www.august.com.au/
When on this website if you zoom in/or out ctrl +/- the background doesn't change. Only the content zooms.
I want to be able to set a background image for my website and have it so that the background image always fills the screen regardless of the screen resolution or zoom options.
I understand that you can use the width:100% to make it fill the page, however my understanding is that this is applied as the page is loaded and if the user zooms after loading the image will not re-sized.
Does any one have any suggestions on where to start with this one? I have tried search the web for information but wasn't able to find very much.
Also i am guessing this will be achieved using something like JavaScript and not css??
This worked for me in chrome, firefox
.someImage {
width: 7%;
height: 0;
padding-bottom: 7%;
background-image: url('../img/myImage.png');
background-repeat: no-repeat;
position: fixed;
bottom: 5%;
left: 5%;
background-size: 100% 100%;
}
Turns out there is a nice Jquery plugin for this:
http://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/
Seems to work as i expected.
Related
On my new webpage (http://patrick-ott.de/ -- it is getting there ;), I seem to have encountered a problem. At the very end there is a promise for a non black/white-version but it does not show the fully colored image. That is fine, I do not want the background to scale in width (or maybe when the resolution of the display exceeds the one of the image) but I do want to see the full-length version of the background, so essentially you can keep scrolling longer. Any ideas on how to do this smart? Right now the CSS for the background is as simple as this:
.colorbox {
background-image: url(pictures/colorbackground.jpg);
height: 100%;
width: 100%;
position: relative; }
set background-size
background-size: 100% 100%;
Add this to your CSS:
background-repeat: round round;
That should do the trick. But this is a pretty new feature in CSS so it will work if you expect your users to be using IE9+ and other modern browsers.
I'm having a bit of trouble with IE downscaling CSS background images using the background: and background-size: attributes, as below
.llifLogo {
background: url(images/llifmonotagline.png) no-repeat center;
background-size: 550px;
position: absolute;
top: 60px;
width: 100%;
height: 170px;
}
The site is live on http://llif.co.uk. Looks great in other browsers, but IE appears to downscale the image using nearest-neighbour rather than bicubic. I understand that there used to be a hack by using -ms-interpolation-mode: bicubic;, but that this is now deprecated.
Anyone have any ideas how to downscale background images nicely in IE?
I should also add why I want to do a background image rather than just a regular image: it's so that I can use media queries to display a different image when the site is in a narrow viewport such as a mobile device.
Thanks!
The best (and probably the only) way to do this is to resize your .png file.
There's no reason to use 2808x1024 png with file size about 85KB, when you can resize your file to 550x201px and it will have ~15KB and will be nicely rendered. Just use #media queries to switch between pngs with different resolution.
i'm building one site with wordpress+gantry framework, with responsive layout selected, and i have in the left side of the screen one picture above background. this left picture ( some kind of vertical sidebar withouth other content) is positioned absolutely with next code:
div.imgleft{
content: url('http://coszminart.ro/wp-content/uploads/2014/02/laterala.png');
position: absolute;
margin-left: 0px;
margin-top: -1px;
max-height: 1020px;
height: 100%;
max-width: 570px;
background-size: cover;
z-index: 1000 !important;
}
the div.imgleft i inserted above header, in the template index.php
THE PROBLEM: the left image is not showing in iexplore 10, 11, latest mozilla, just in chrome and android phone. If i verify with chrome/firefox inspect tools, the css code is loaded ok. I've read that absolute positioning is cross browsers compatible, why is not working, is something wrong with my code?
![enter image description here][1]
Thanks for any help, sorry for the bad English.
The content property is used with the :before and :after pseudo-elements, to insert generated content.
So use
background-image : url('http://coszminart.ro/wp-content/uploads/2014/02/laterala.png');
instead of content
Here is working fiddle http://jsfiddle.net/krunalp1993/Az5GG/1/
This is a particularly strange request, but the client won't budge.
I've almost got what I need currently with:
#main_content, .slide {position: relative; min-width: 1200px;}
.slide_layer {position: absolute; height: 100%; width: 100%; top:0; left: 0; min-width: 1200px; padding-bottom: 18px;}
.slide_layer img { width: 100%; }
Problem is, if my browser window is longer than it is wide, I end up with empty space below the image. What the client wants is for the image to fill all available height if there is room and create horizontal scrollbars as needed (rather than crop).
The solution I'm thinking of doing is just detecting browser window and stretching the .slide_layer img to fill height via javascript. But this feels crappy and sloppy. Is there a better way?
To make matters worse, backward compatibility is required back to IE7.
Thanks!
This doesn't necessarily help you with the horizontal-overflow request from your client, but you could rebuild your slides to use a background image, instead of an image within it.
You can then use the CSS3 background-size, set to 'cover':
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
This means that the background image will stretch out - whilst maintaining the correct dimensions - to fill the parent. So, unless your slide is exactly the same dimensions as the image, you'll either have a little off the top/bottom, or left/right cut off from view, but it will always stretch to cover the entire background.
This is a CSS3 property, so won't work back to IE7 without a little help. Fortunately, CSS3 PIE can help you out there to get support all the way back to those older versions of Internet Explorer.
the site I am working on has a number of different overlays which are controlled by CSS as follow (with different properties for each but same way):
.box_4, .box_5, .box_6 {
position: fixed;
top: -1900px;
left: 50%;
z-index: 101;
width: 883px;
margin-left: -400px;
}
These properties get applied when I close the overlay.
However on the iPad something strange happens, when I scroll the site just to check it out some of the overlays appear and disappear as soon as I touch the screen again.
Could that be due to the css?
There are many issues with mobile devices and position:fixed;
Instead of positioning them outside the viewport, you better hide/show the boxes.
Some references:
http://www.8164.org/designing-for-the-ipad/
http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/
http://blog.mspace.fm/2009/10/01/iphone-mobile-safari-css-position-fixed/