Develop Reference

How to change the height of the HTML5 canvas sketchpad?

I use the Responsive Sketchpad - demo and Github. The only thing I changed is add background image, so I added this CSS:
.canvas {
background-color: transparent;
background-size: cover;
background-image: url(example.jpg);
}
But my problem is with height. What is the proper way to set the height of that canvas box and keep background image responsive? For example how align the height of canvas box (with background image) to the height of right box (with buttons) in demo?

add a element in css and it will surly works:
.canvas {
background-color: transparent;
background-size: cover;
background-image: url(example.jpg);
height : 100% / 100vh;
}
make height component

How to resize background image with CSS/JS

I have fullscreen website with background-image: no-repeat and background-size: cover style on it. I want to make animation that the background image will resize in 10 second to the right side of the page to 350px width and 175px height. It's even possible to do it?
body {
background-image: url(/image.png);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
position: fixed;
}
I saw some webkit animation but there was problem with the background-size: cover style, so the animation doesn't work.
I tried :
$(function(){
$('body').one("mouseover", function() {
$('body').addClass('hover');
});
});
But it will resize the image instantly and move it to the right, I want to resize them linear.
Thank you very much guys! :-)

You could add something like this to your css:
body {
background-position: center center;
transition: background-size 10s ease-in-out, background-position 10s ease-in-out;
}
body.hover {
background-size: 350px 170px;
background-position: right center;
}
https://codepen.io/anon/pen/oPbqPm
The problem with this, is however, that it won't animate the sizing.

I would suggest you don't set the image as background. Instead, position the image behind all other elements using position and z-index properties. Once set, you can add the animation. For more details on using z-index and position attributes see the link below and "try it yourself" example:-
https://www.w3schools.com/cssref/pr_pos_z-index.aspenter link description here
You can then use css animation for resizing of the imgae.
TO learn how to add animation see this link:-
https://www.w3schools.com/css/css3_animations.asp

Setting background size (of image) for a "scrolling" page

So i'm having the trouble that if I have a "long" webpage (where you make your window as big as you can but still need to scroll) the image doesn't "behave" correctly.
I thought that setting the background-size property to cover would do this but is the image isn't big enough (Which would have to be pretty big) I just get white space once I scroll down the page a little bit. Is there a property that would, say, set the height of the background to 100% then properly scale the image so it has the correct width proportional to the original height?
My solution as of now is having a background color that the image "eases" into, just to make it look smooth.

Try to use
html,body {
background: url(yourImg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Or if image isn't big enough, use a background color as well`
background: #6DB3F2 url('yourImg.jpg');

Try using background-size: 100% 100%; property.
But that will stretch your image.
If you want to add background to the full webpage then you can add background-image:(''); property to body.
e.g.
body{
background-image:url('http://backgrounds-free.com/highresolution/l_086.png');
background-repeat:none;
background-size: 100% 100%;
}

Background-attachment: fixed not working in jquery mobile phonegap

How can I set a background image which is not scrolling along with the content. I'm using jquery mobile and phonegap. I try to use background-attachment: fixed but the image is not going in fullscreen.
<div data-role="page" class="background">
</div>
My css:
.background {
background-image: url(../images/bg.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment:scroll;
background-size: 100% 100%;
}

I had to tackle this problem, the work around (as far as I am aware it hasn't changed in iOS7) is to create a separate div (call it the "background" div), set its position to fixed and insert your desired background image inside this div.
Set the z-index of this div so that it sits underneath the rest of your content.
iOS webview will respect fixed positioned divs but not background-attachment: fixed;
Set the background once, inside the <body> of your html file(s) but outside your subsequent pages.
Here's how I did it and it worked really well.
<div class="background"><img src="img/Background_Dark.png" width="100%"/></div>
and the css
.background {
position: fixed;
top: 0%;
left: 0%;
min-width: 100%;
z-index: -10000;
}

First, you need to cut out half of the CSS. Start with this:
.background {
background-image: url(../images/bg.png);
background-attachment: fixed;
background-repeat: no-repeat;
}
Notice that I changed background-attachment: scroll; to background-attachment: fixed;. The default value of background-attachment is scroll, so you don't need to include it anyway, but that does the opposite of what you are trying to do.
Second, can you upload the bg.png to imgur or some other site so that we can have a better example of what you're trying to do? And also fill in your div with some sample content of similar length to your actual content? Since this is a div and not the body of your website, the div is collapsed unless there is content inside, and the div will grow to fill the content.
This means if you set background-size: 100% 100%; you will be stretching the image as far as the content of the div; which isn't what you want. You only want the background image to fill the viewport. Setting background-attachment: fixed; accomplishes this.

You can use iscroll plugin.
Page in jquery mobile executed by java script source code and in some of the elements changing in css not works.

Center background image and add background-color above

I used this post Stretch and scale a CSS image in the background - with CSS only to figure out how to stretch my background image to fit the size. I'm using background-size: cover;
But I'm afraid, that's not quiet what I need. I can't figure out (a nice way) how to do it:
Assume that I have an image with an really wide resolution like 3840px x 1024px
Requirements:
The Image is centered
Viewport width < 1280px: Fixed width of 1280px, horizontal scrollable
Viewport width >= 1280px: no horizontal scrolling, show more of the background image
If the content of the site is really long (above the 1024px) I want to add a color above the image like light blue, if the upper part of the image is sky so it seems like the bg-color is part of the image.
Current implementation (which sucks):
The image is cut into 3 even pieces. The middle part is the background of the content section. If the screen increases in width, 2 divs left and right of the middle part will be shown, they have the left and the right part of the image as background). The size (height and width) of this side divs is calculated with js everytime the windows is resized. The offset of the background images works in Chrome but in Firefox there is a issue with the left div.
The code for this is:
var PageWidth = 1280;
var SideImageWidth = 1280;
function calculateImageSet(){
var bodyWidth = $('body').width();
var fillerSize = Math.floor((bodyWidth - PageWidth)/2);
if(bodyWidth < PageWidth){
$('#fillerLeft').hide();
$('#fillerRight').hide();
}
else{
var imageOffset = SideImageWidth - fillerSize;
var mainHeight = $('#main').outerHeight();
$('#fillerLeft').width(fillerSize).height(mainHeight).show();
# Doesn't seem to work
if($.browser.mozilla){
$('#fillerLeft').css('background-position', '-'+imageOffset+'px 0px');
}
$('#fillerRight').width(fillerSize).height(mainHeight).show();
}
}
Is there a nice way to do this? Without js?
If you didn't understand any of the requirements, please ask.
Thank you
Edit:
I've got a (nearly working) approach:
#main{
background-color: #d4eaff;
background-image: url('forest-wide.jpg');
background-repeat: no-repeat;
background-size: auto 1280px;
background-position: center top;
min-width: 1280px;
}
If the content is not higher than 1024px this is nice, but when it is over 1024px it adds the blue to the bottom so I have to change the background-position to center bottom at this point.

well bro if what you are trying is to get a fully stretched background image i guess this would help you out .... purely CSS based works in Safari 3+,Chrome Whatever+,IE 9+,Opera 10+,
Firefox 3.6+
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;
}