I would like to be able to change my webpage background image according to the screen resolution the user uses so:
if screen resolution is greater than or equal to 1200*600 then background = mybackground.jpg no-repeat or else. How can I do this?
Pure CSS approaches that work very well are discussed here. Two techniques are examined in particular and I personally prefer the second as it not CSS3 dependent, which suits my own needs better.
If most/all of your traffic has a CSS3 capable browser, the first method is quicker and cleaner to implement (copy/pasted by Mr. Zoidberg in another answer here for convenience, though I'd visit the source for further background on why it works).
An alternative method to CSS is to use the JavaScript library jQuery to detect resolution changes and adjust the image size accordingly. This article covers the jQuery technique and provides a live demo.
Supersized is a dedicated JavaScript library designed for static full screen images as well as full sized slideshows.
A good tip for full-screen images is to scale them with a correct ratio beforehand. I normally aim for a size of 1500x1000 when using supersized.js or 1680x1050 for other methods, setting the jpg quality for photographs to between 60-80% resulting in a file size in the region of 100kb or less if possible without compromising quality too much.
Delete your "body background image code" then paste this code:
html {
background: url(../img/background.jpg) no-repeat center center fixed #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Hi heres a javascript version which changes the background image src according to screen resolution. You have to have the different images saved in the right size.
<html>
<head>
<title>Javascript Change Div Background Image</title>
<style type="text/css">
body {
margin:0;
width:100%;
height:100%;
}
#div1 {
background-image:url('sky.jpg');
width:100%
height:100%
}
p {
font-family:Verdana;
font-weight:bold;
font-size:11px;
}
</style>
<script language="javascript" type="text/javascript">
function changeDivImage()
{
//change the image path to a string
var imgPath = new String();
imgPath = document.getElementById("div1").style.backgroundImage;
//get screen res of customer
var custHeight=screen.height;
var custWidth=screen.width;
//if their screen width is less than or equal to 640 then use the 640 pic url
if (custWidth <= 640)
{
document.getElementById("div1").style.backgroundImage = "url(640x480.jpg)";
}
else if (custWidth <= 800)
{
document.getElementById("div1").style.backgroundImage = "url(800x600.jpg)";
}
else if (custWidth <= 1024)
{
document.getElementById("div1").style.backgroundImage = "url(1024x768.jpg)";
}
else if (custWidth <= 1280)
{
document.getElementById("div1").style.backgroundImage = "url(1280x960.jpg)";
}
else if (custWidth <= 1600)
{
document.getElementById("div1").style.backgroundImage = "url(1600x1200.jpg)";
}
else {
document.getElementById("div1").style.backgroundImage = "url(graffiti.jpg)";
}
/*if(imgPath == "url(sky.jpg)" || imgPath == "")
{
document.getElementById("div1").style.backgroundImage = "url(graffiti.jpg)";
}
else
{
document.getElementById("div1").style.backgroundImage = "url(sky.jpg)";
}*/
}
</script>
</head>
<body onload="changeDivImage()">
<div id="div1">
<p>This Javascript Example will change the background image of<br />HTML Div Tag onload using javascript screen resolution.</p>
<p>paragraph</p>
</div>
<br/>
</body>
</html>
I know it's too old question but thought to answer, it might will help someone. If you see twitter, you will find something very tricky but pure css approach to achieve this.
<div class="background"><img src="home-bg.png" /></div>
Applied CSS
.background {
background: none repeat scroll 0 0 #FFFFFF;
height: 200%;
left: -50%;
position: fixed;
width: 200%;}
.background img{
bottom: 0;
display: block;
left: 0;
margin: auto;
min-height: 50%;
min-width: 50%;
right: 0;
top: 0;}
This background images fits to all size. even portrait view of ipad. it always adjust the image in center. if you zoom out; image will remain the same.
Set body css to :
body {
background: url(../img/background.jpg) no-repeat center center fixed #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I've had this same issue but have now found the resolution for it.
The trick is to create a wallpaper image of 1920*1200.
When you then apply this wallpaper to the different machines, Windows 7 automatically resizes for best fit.
Hope this helps you all
Put into css file:
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; }
URL images/bg.jpg is your background image
Related
I am using mPDF(v7.0) to create a PDF from my HTML. I want to create a PDF that contains an image, within a div (.container-sizing). I have to be able to have the ability to position the image within .container-sizing using CSS and zoom and flip the image.
I have tried the below:
CSS
.container-sizing {
overflow: hidden;
position: relative;
width:600px;
height:430px;
}
.img {
max-height: 100%;
position: absolute;
top: -100px;
left: -100px;
right: 0;
bottom: 0;
margin: auto;
transform:scale(1, -1);
}
HTML
<div class='container-sizing'>
<img src='images/my-image.jpg' alt='' class='img'/>
</div>
This doesn't work as it ignores overflow:hidden on the containing div - which is pretty essential when positioning the image. Instead, I tried styling the image as a background image, which works great but then I have run into problems with transform: scale(1, -1). Despite mPDF's documentation saying that this is supported, it doesn't seem to work when applied to a background image.
CSS:
.container-sizing {
width:600px;
height:430px;
overflow: hidden;
}
.img {
background-image: url('images/my-image.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width:600px;
height:430px;
transform:scale(1, -1) ;
}
HTML:
<div class='container-sizing'>
<div class='img'></div>
</div>
Does anyone have any ideas how I can get this working to produce a pdf that shows the image how it is declared in the css?
Thank you!
After spending ages trying to figure this out, I ended up dropping mPDF and using domPDF instead as this supports the overflow: hidden property I needed. Just posting in case anyone else runs into a similar issue!
I need to make CSS3's background-size properly work in IE8. There are a lot of javascript libraries out there but they extend the options "cover" and "contain" rather than a px value. As I'm using an image sprite I need to set the background size in pixels.
Here is a demo of my code. The sprite image is 600px 400px but ive set the background size to be 300px x 200px so that is looks crisp on high density displays.
<a class="one">Link one</a>
<a class="two">Link two</a>
a {
overflow: hidden;
text-indent: -9999px;
display: block;
width: 58px;
height: 58px;
background: url("https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/373_sprites/angry_birds.png");
background-size: 300px 200px;
} a.one {
background-position: 0 0;
}
a.two {
background-position: 0 -56px;
}
http://jsfiddle.net/rr2obdss/4/
Can I extend support to IE8 without having to create and maintain a 2nd image sprite?
Depending on the specific case, which you don't really explain in much detail, a workaround with pseudo elements may work?
Just add a pseudo element of the specified size and have it have the sprite as background?
With the right combination of position absolute/relative and z-index this could work.
If you provide more information of what exactly you are trying to achieve I will be able to provide better help.
Edit:
Okay, so I got a solution now. Kind of as expected: looks quite dirty.
But that's what you get when you want to do fancy stuff in IE8 :-P
a {
overflow: hidden;
text-indent: -9999px;
display: block;
width: 58px;
height: 58px;
position: relative;
}
a:before {
content: "";
background: url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/373_sprites/angry_birds.png);
zoom: .5;
text-indent: 0;
overflow: hidden;
width: 600px;
height: 400px;
position: absolute;
left: 0;
top: 0;
}
a.one:before {
background-position: 0 0;
}
a.two:before {
background-position: 0 -112px;
}
The downside of this is, that you would have to calculate the zoom factor instead of just writing down the dimensions you want to have. Also background-position would then be in relation to the full-size background.
Is anything unclear with what I am doing in above code?
The only thing you can do is to :
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='image.gif',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='image.gif',
sizingMethod='scale')";
But this can cause issues if you use sprite image.
According to caniuse.com, this polyfill may help.
Hope this helps...
-- Lance
I can't seem to get my background to stay fitted to my browser when I resize the window. Please help!
Here are the images to show you what is going on: View images
The first image is how it should be fitted, the second is when I stretch it horizontally and the third is when I stretch is vertically (sorry, not sure why it uploaded my images twice)
Here is my code I am using:
body {
background: url('images/bkg-img.png');
repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The problem is that background-size: cover covers the background positioning area (see W3C page), which is, in some cases, the calculated height of the body. Not always as high as the window!
The simplest solution I've found is also put a
html {height:100%}
in the stylesheet. But you might have to experiment a bit with your setup to get it to work the way you want. I'm pretty sure it varies across browsers and depends on whether you're using standards or quirks mode.
There are lot's ways to do this, if you set the image as background-image of body it is not going to shrink or expand it is going to be stay same this is the expected behaviour.
You can use sth. like this for this:
<div id="bg">
<img src="images/bg.jpg" alt="">
</div>
And style of them:
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
To be able to put your content above of the background image put your content inside another div like:
<div class="pagewrap">
<p>Content</p>
</div>
And class of it:
.pagewrap {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
}
View demo or other techniques, about z-index.
Fixed image
If you don't need the bg image to scroll with the page, you can still apply the bg image to the body tag if you set background-attachment: fixed;
body {
background: url('images/bkg-img.png') no-repeat 0 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
jQuery
If the bg image does need to scroll with the page, it might be worthwhile to apply some JavaScript or jQuery code, in the interest of keeping the HTML and CSS relatively simple.
function stretchBg(width, height, contain) {
var pageWidth = $(document).width();
var pageHeight = $(document).height();
if ((pageWidth / pageHeight) > (width / height) == !!contain)
$('body').css({backgroundSize: 'auto ' + pageHeight + 'px'});
else
$('body').css({backgroundSize: pageWidth + 'px auto'});
}
$(document).ready(function(){ stretchBg(640, 480); }); // Page load
$(window).resize(function(){ stretchBg(640, 480); }); // Browser resize
JSFiddle Demo (and standalone version of the demo)
To preserve the aspect ratio, the native width and height of the image are passed to the above function, along with an optional third parameter for whether the bg image should cover or contain the page (the default is cover).
Alternately, here's a more-advanced demo (and standalone version) that automatically detects the native resolution of the bg image currently applied to the body tag. Below is an example of using it:
$(document).ready(function(){
FullBodyBackground.init({contain: false});
});
Ok, so here's my problem.
For a client I'm using a lightbox (in this case slimbox2)
I've modified it's contents so that if the images are larger than the screensize,
the image max width/height is the screensize itself.
So in other words: if image > screensize => image == screensize
I'm using css3 background-size property for most browsers wich works just fine.
And for IE5.5+ I'm using the filter: AlphaImageLoader.
All this is good, but when I hover on the image I should get a next and previous button.
This does not work in IE7- It seems the buttons stay under the background image because
it has the css filter: AlphaImageLoader on it. Is there any way to make
the buttons visible?
Here's a piece of my code (JQUERY MERGED WITH PHP):
$bgsize = preload.width +'px '+preload.height +'px';
$(image).css({backgroundImage: "url(" + activeURL + ")",
visibility: "hidden",
display: "block",
'background-size':$bgsize,
'-webkit-background-size':$bgsize,
'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+ activeURL+'\',sizingMethod=\'scale\')',
'-ms-filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+ activeURL+'\',sizingMethod=\'scale\'
Here's the css:
#lbImage {
position: absolute;
left: 0;
top: 0;
background-repeat: no-repeat;
}
#lbPrevLink, #lbNextLink {
display: block;
position: absolute;
top: 0;
right:-10px;
width: 50%;
outline: none;
}
#lbPrevLink {
left: 0;
}
#lbPrevLink:hover {
background: url(prevlabel.jpg) no-repeat 0 15%;
}
#lbNextLink {
right: 0;
z-index:20000;
}
#lbNextLink:hover {
background: transparent url(nextlabel.jpg) no-repeat 100% 15%;
}
PS: tried the most common solutions like z-index, positioning relative/absolute, etc..
AlphaImageLoader puts an image between the object background and content, so everything underneath is obscured. Use a background-size shim or a pure CSS lightbox as an alternative.
I have an image with this markup
<img src="wedding_00.jpg" width="900" height="600" />
And I am using CSS to downsize it to 600px width, like so:
img {
max-width:600px;
height:auto;
}
Can anyone explain why this method works in Compatibility mode, but not in standard mode? Is there a way I can modify my CSS so that it will work in standard mode?
I realize that if I strip out the
width="900" height="600"
that it solves the problem, but that is not an option I have.
I'm not sure of the root cause but if you add
width: auto;
then it works.
set width:inherit for ie8
img {
width:inherit; //for ie8
max-width: 100%;
height: auto;
}
Wow, saved me a lot of time there!
i had a similar problem with an image in position: absolute where width was magically taking max-width value. Its weird because it doesn't do that when the image wasn't in position: absolute.
width: auto;
max-width: 200px;
height: auto;
max-height: 200px;
works great in IE8!
Wow, what a pain IE always seems to be. Although there is an accepted answer, I found that it did not solve my problem.
After much search I found that the way to fix it is to remove the height and width attributes from the images in question. An explanation can be found here: Scaling Images in IE8 with CSS max-width
The code is as follows:
CSS:
.entry img {
max-width:615px
height:auto;
}
SCRIPT
var imgs, i, w;
var imgs = document.getElementsByTagName( 'img' );
for( i = 0; i < imgs.length; i++ ) {
w = imgs[i].getAttribute( 'width' );
if ( 615 < w ) {
imgs[i].removeAttribute( 'width' );
imgs[i].removeAttribute( 'height' );
}
}
Now I tend to use jQuery as much as possible, to solve this I used a few different functions to target IE8 and make my life easier. I also found that the solution almost worked, but not quite. I toyed around with it until I was able to achieve the results I was looking for. My solution is as follows:
JQUERY:
var maxWidth = 500;
function badBrowser(){
if($.browser.msie && parseInt($.browser.version) <= 8){
return true;
}
return false;
}
if(badBrowser()){
$('img').each(function(){
var height = $(this).height();
var width = $(this).width();
if (width > maxWidth) {
var ratio = (maxWidth /width)
$(this).css({
"width":maxWidth,
"height":(ratio*height)
});
$(this).removeAttr('width');
$(this).removeAttr('height');
}else{
$("#cropimage").css({
"width":width,
"height":height
});
}
});
}
I use this to target a specific image load function, but it could be added to any document ready or window load function as well.
My solution for this issue was:
<!--[if IE 8]>
<style>
a.link img{
max-height:500px ;
width:auto !important;
max-width:400px;
height:auto !important;
width:1px;
}
</style>
<![endif]-->
max-width of images just work fine on IE8 when it's directly wrapper (div) has width.
Example:
The image in this example is 700px;
The web's width is 900px;
<div class="wrapper1"><div class="wrapper2"><img style="max-width: 100%;" src="abc.jpg" alt="Abc" /></div></div>
if you style:
.wrapper1 { width: 50%; float: left; } // this column's width is 450px max;
The image still 700px and make the layout broken.
Solution:
.wrapper1 { width: 50%; float: left; } // this column's width is 450px max;
.wrapper2 { width 100%; float: left; } // if it has border or padding, width will smaller 100%
The the image will fit the column (image = 450px) when resize window smaller, image will smaller based on wrapper2's width.
Regards,
Cuong Sky