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
How to solve the problem that the URL field affects the overall height? Please help thank you
body,html {
height:100%
}
When there is a display address bar
.bg {
min-height:100%
background-size: cover;
background-image: url(xxx.png);
}
When you scroll down, the background will be blank when the address bar is hidden
.bg {
min-height:100%
background-size: cover;
background-image: url(xxx.png);
}
My solution is to change it to min-height:100vh, but a piece of material will appear when sliding up, and the whole thing is not
smooth.
.bg {
min-height:100vh
background-size: cover;
background-image: url(xxx.png);
}
Use background-attachment property,
It will attach the background to your position.
Try like this:
.bg {
min-height:100%
background-size: cover;
background-image: url(xxx.png);
background-attachment: fixed;
}
Let me know your result.
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 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 would like to make a landing page with an full screen image. Like this: http://startbootstrap.com/templates/stylish-portfolio/
I can figure out the rest of the stuff below it, but how do I go about making the image cover the whole screen?
it is background for the header tag
if you go to line 153 to 163 in stylish_portfolio.css
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
background: url(../img/bg.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;}
the backgorund-size is the trick to keep it covering all the screen W3C
---edit
height and width should be 100% so the picture would fit the whole screen on any media.
You should take a big size image. then
you html will look like
<html>
<head>
<title>Landing Page</title>
</head>
<body>
<div class="landingbg"> </div>
</body>
</html>
then css will be
.landingbg{
background: url("img/bg.jpg") no-repeat scroll center center / cover rgba(0, 0, 0, 0);
display: block;
height: 100%;
position: relative;
width: 100%;
}
try this and tell me if there is any issue
You probably need a large HD image for background.
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;
}
For more detail: http://css-tricks.com/perfect-full-page-background-image/
Have JQuery function to get width and height of the end-user screen.
var jQueryWidth = $( window ).width();
var jQueryHeight = $( window ).height();
Once you have this, set your HTML image width and height attributes.
<img src="yourImage.jpg" alt="Alternate text" height="<jQueryWidth>" width="<jQueryHeight>">