How to make the background image fill the offscreen when I apply a background-position transform animation trough jquery?
As you can see,when the animation ends,the div is filled with white.
.firstpage{
background-image: url('bcb.png');
min-height: 100vh;
min-width: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
$(".firstpage").animate({
'background-position-y': '200px',
});
The bcb.png image has a width of 2720px and a height of 1880px,so it's larger than my 100vh(1920x1080 resolution)
I've uploaded a quick video on YT just in case my question wasn't clear.
https://www.youtube.com/watch?v=5BSX2r8f5s4&feature=youtu.be
I have a website (g-floors.eu) and I want to make the background (in css I have defined a bg-image for the content) also responsive. Unfortunately I really don't have any idea on how to do this except for one thing that I can think of but it's quite a workaround. Creating multiple images and then using css screen size to change the images but I wanna know if there is a more practical way in order to achieve this.
Basically what I wanna achieve is that the image (with the watermark 'G') automatically resizes without displaying less of the image. If it's possible of course
link: g-floors.eu
Code I have so far (content part)
#content {
background-image: url('../images/bg.png');
background-repeat: no-repeat;
position: relative;
width: 85%;
height: 610px;
margin-left: auto;
margin-right: auto;
}
If you want the same image to scale based on the size of the browser window:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
Do not set width, height, or margins.
EDIT:
The previous line about not setting width, height or margin refers to OP's original question about scaling with the window size. In other use cases, you may want to set width/height/margins if necessary.
by this code your background image go center and fix it size whatever your div size change , good for small , big , normal sizes , best for all , i use it for my projects where my background size or div size can change
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
Try this :
background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
CSS:
background-size: 100%;
That should do the trick! :)
Here is sass mixin for responsive background image that I use. It works for any block element. Of course the same can work in plain CSS you will just have to calculate padding manually.
#mixin responsive-bg-image($image-width, $image-height) {
background-size: 100%;
height: 0;
padding-bottom: percentage($image-height / $image-width);
display: block;
}
.my-element {
background: url("images/my-image.png") no-repeat;
// substitute for your image dimensions
#include responsive-bg-image(204, 81);
}
Example http://jsfiddle.net/XbEdW/1/
This is an easy one =)
body {
background-image: url(http://domains.com/photo.jpeg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
Take a look at the jsFiddle demo
Here is the best way i got.
#content {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:cover;
}
Check on the w3schools
More Available options
background-size: auto|length|cover|contain|initial|inherit;
#container {
background-image: url("../images/layout/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100vh;
margin: 3px auto 0;
position: relative;
}
I used
#content {
width: 100%;
height: 500px;
background-size: cover;
background-position: center top;
}
which worked really well.
Responsive website by add padding into bottom image height/width x 100 = padding-bottom %:
http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/
More complicated method:
http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
Try to resize background eq Firefox Ctrl + M to see magic nice script i think best one:
http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content
You can use this. I have tested and its working 100% correct:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100%;
background-position:center;
You can test your website with responsiveness at this Screen Size Simulator:
http://www.infobyip.com/testwebsiteresolution.php
Clear Your cache each time you make changes and i would prefer to use Firefox to test it.
If you want to use an Image form other site/URL and not like:
background-image:url('../images/bg.png');
//This structure is to use the image from your own hosted server.
Then use like this:
background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;
Enjoy :)
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#res_img {
background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg");
width: 100%;
height: 500px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
border: 1px solid red;
}
#media screen and (min-width:300px) and (max-width:500px) {
#res_img {
width: 100%;
height: 200px;
}
}
</style>
<div id="res_img">
</div>
If you want the entire image to show irrespective of the aspect ratio, then try this:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;
This will show the entire image no matter what the screen size.
background:url("img/content-bg.jpg") no-repeat;
background-position:center;
background-size:cover;
or
background-size:100%;
Just two lines of code, it works.
#content {
background-image: url('../images/bg.png');
background-size: cover;
}
Adaptive for square ratio with jQuery
var Height = $(window).height();
var Width = $(window).width();
var HW = Width/Height;
if(HW<1){
$(".background").css("background-size","auto 100%");
}
else if(HW>1){
$(".background").css("background-size","100% auto");
}
background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;
the position property can be used to align top bottom and center as per your need and background-size can be used for center crop(cover) or full image(contain or 100%)
I think, the best way to do it is this:
body {
font-family: Arial,Verdana,sans-serif;
background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}
In this way there's no need to do nothing more and it's quite simple.
At least, it works for me.
I hope it helps.
Try using background-size but using TWO ARGUMENTS One for the width and the other one for the height
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size: 100% 100%; // Here the first argument will be the width
// and the second will be the height.
background-position:center;
I want my background image to become responsive inside a div. It has a parallax effect when scrolled. I already tried to customize the background in the media queries but no hope it only adjust the height and doesn't contain the whole page when in mobile devices width. Can someone give me a clue to solve this? Im new to html and css.
html code for div:
<div class="parallax"></div>
css code:
.parallax {
height: 502px;
background-image: url(../img/back2.png);
background-attachment: fixed;
background-position: -70px 80px;
background-repeat: no-repeat;
background-size: cover;
}
#media screen and (min-width: 270px) and (max-width: 320px){
.parallax {
max-height: 300px;
background-image: url(../img/back2.png);
background-attachment: fixed;
background-position: -70px 40px;
background-repeat: no-repeat;
background-size: cover;
}
}
You should use property: background-size:100% auto;
If the width property is set to 100%, the image will be responsive and scale up and down.
please see this link for more info: w3schools
I have a webpage that have some large images inside some divs that cover the background of the page. I however get some strange issue with the page on viewing the page on Android pad where the page is viewed in portrait (looks ok on landscape viewing). The page get a blue (same color as background) on the right hand part of the screen next to the scrollbar (see images below). It might look to me like the page initially gets scaled wrong and then when you pinch zoom out you can see the blue are. Like the images did not get drawn all the way or something.
In the head of the page I have put the following tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
The I have defined some divs to place the images:
<div class="homebg_top">...</div>
I have 4 of those divs with different background inside of them.
Then in the following in the css (for the above specific div):
.homebg_top {
background: url(../images/bg_home_top.jpg) no-repeat center top;
width: 100%;
height: 807px;
margin: 0;
padding: 0;
}
The picture below is the page when in landscape mode:
The picture below is when it is in portrait mode
(note the blue background issue next to scrollbar):
Example :
https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
.homebg_top {
width: 100%;
height: 807px;
margin: 0;
padding: 0;
background: url(../images/bg_home_top.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
you can try thisone:
.homebg_top{
background: url(http://media02.hongkiat.com/oversized-background-image-design/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://media02.hongkiat.com/oversized-background-image-design/bg.jpg', sizingMethod='scale')";
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.http://media02.hongkiat.com/oversized-background-image-design/bg.jpg', sizingMethod='scale');
}
you can see this page http://www.hongkiat.com/blog/oversized-background-image-design/
Try this:
.homebg_top {
background: url(../images/bg_home_top.jpg) no-repeat center top /cover;
}
I am trying to create a sort of parallax effect, I what the section after "ABOUT" containing two different div with image to scroll faster than the rest of the page. I want that whole div to scroll faster so that it looks like the first drawn picture is being wiped up but the similar picture.
Test site: http://www.onepixelroom.com/AQUODI/ (the section just after "ABOUT")
Example, scroll down (a lot, yes, it's annoying :) this site to see the footballer guys change color, I want to do this with both my images: http://www.tridentpp.com/
HTML:
<div id="quote-selector-div">
<div id="quote-images">
<div class="quote-selector-div-img"></div><div class="quote-selector-div-blue"></div>
</div>
</div>
CSS:
#quote-selector-div {
height: 800px;
position:relative;
overflow:hidden;
}
#quote-images {
height: 800px;
position:relative;
}
.quote-selector-div-img{
height: 400px;
background: url(../img/living-room-blue.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow:hidden;
position:relative;
}
.quote-selector-div-blue {
background: url(../img/living-room.jpg) no-repeat center center fixed;
height: 400px;
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
}
the page is using parallax.js, but it only works on background picture, I would like that same effect on a whole div, or a better solution.
You can use this jQuery plugin that might help you: https://github.com/davecranwell/jQuery-scroll-parallax
EDIT
Try this. You can use the setScrollSpeed() to assign specific scroll speeds to elements. The speed is the multiplier for the normal scroll speed.
var boostedElements = [];
function setScrollSpeed(element,speed){
boostedElements.push({element:element,lastpos:element.scrollTop,boost:speed});
element.onscroll = boostedScroll;
}
function boostedScroll(){
var boosted;
for(var i in boostedElements) if(boostedElements[i].element == this){
boosted = boostedElements[i];
break;
}
if(boosted == undefined) return;
var distance = boosted.element.scrollTop - boosted.lastpos;
boosted.element.scrollTop = boosted.lastpos + (distance * boosted.boost);
boosted.lastpos = boosted.element.scrollTop;
}