I'm trying to make a full screen responsive slideshow with Orbit ( foundation 5 ). I have problem with the background image, it's still fixed .
My code:
<ul class="example-orbit" data-orbit>
<li class="slide slide1"></li>
<li class="slide slide2"></li>
</ul>
html,body {
width: 100%;
height: 100%;
}
ul , li {
margin: 0;
padding: 0;
}
.orbit-container {
width: 100%;
height: 100%;
}
.orbit-container ul,.orbit-container .orbit-slides-container>* {
height: 100%;
}
.slide {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
}
.slide1 {
background: url('image-url') no-repeat;
}
.slide2 {
background: url('image-url') no-repeat;
}
How can i fix it ?
DEMO
Thanks.
add background-size to the class where you set the backgrounds:
.slide1, .slide2 {
background-size:100%;
}
Adding
.orbit-container .slide {
background-size: contain;
}
via the firebug console seemed to make it responsive.
Related
I am working on front end and I have attached a background image on the login page. I want to show 100% width and height of the screen to that image but with my codding there is a vertical bar which I want to remove. CSS code of my file is given below
.Public_background {
background-image: url("public_Background.jpg");
margin-left: auto;
margin-right: auto;
/*background-color: aliceblue;*/
background-position: right top;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
/* height:100%; */
height: 100vh;
position: relative;
max-width: 100%;
max-height: 100%;
}
This is the method I use for this propose
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;
}
I took it from here.
example
if you are using full screen div you can add this code to your div styling
.Public_background {
overflow:hidden;
}
Here is a working fiddle the scroll is because of gutter margin -:
body{
margin: 0;
}
.container{
width: 100vw;
height: 100vh;
}
.Public_background {
background-image: url("https://picsum.photos/600/300");
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
<div class="container">
<img class="Public_background">
</div>
I have a problem with display property on mobile. Display: none doesn't work at all. I'm using SASS. This is my code:
main {
display: none;
}
#media(min-width: $mobile-breakpoint) {
main {
height: 800px;
display: flex;
background-color: inherit;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
background-image: url("./images/main.jpg");
}
}
Use display: none within the mobile breakpoint.
Example:
#media(min-width: $mobile-breakpoint) {
main {
height: 800px;
display: none;
background-color: inherit;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
background-image: url("./images/main.jpg");
}
}
On the homepage of http://www.jeroenvanderwaal.com i'm trying to get the background image to cover the whole screen. I am unable to find out why it isn't covering but leaving an empty space at the bottom. The code so far:
.page-id-4 #main {
background-image: url(http://www.jeroenvanderwaal.com/wp-content/uploads/2015/03/achtergrond2.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 60px;
padding-bottom: 0px;
}
I only want the background on this page, hence the .page-id-4 . Is there any way to make it cover the whole screen?
Here you go, just set the background in a html tag
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;
}
If you prefer not to have all your sub pages to show the homepage background, you can do this:
html {
height: 100%;
}
body {
min-height: 100%;
}
body.home {
background: url(/wp-content/uploads/2015/03/achtergrond2.jpg) no-repeat center center fixed;
background-size: cover;
}
You can safely drop all the prefix, no problem for any modern browser.
Method 1
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;
}
Method 2(Using CSS)
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
Method 3(Also CSS)
<div id="bg">
<img src="images/bg.jpg" alt="">
</div>
#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%;
}
Method 4(JQuery)
<img src="images/bg.jpg" id="bg" alt="">
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
$(window).load(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(resizeBg).trigger("resize");
});
Refer https://css-tricks.com/perfect-full-page-background-image/
It has loads of tricks for fullscreen background.
The simplest answer, and it works everytime:
html, body {
overflow: auto;
}
.logo {
background-image: url(https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif);
background-size: 100%;
}
#media(max-width:767px) {
.logo {
background-image: url(https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif);
background-size: 50%;
background-repeat: no-repeat;
}
}
<div class="logo"> </div>
I can't work out why this doesn't work - any ideas why the image doesn't render?
HTML:
<div class="logo"> </div>
CSS:
.logo {
background-image: url(../img/logo_white.png);
background-size: 100%;}
#media(max-width:767px) {
.logo {
background-image: url(../img/logo_white.png);
background-size: 50%;
background-repeat: no-repeat;}
}
Any help greatly appreciated
Try this...
#media screen and (max-width:767px)
First of all, you syntax was wrong. Secondly, at least in the code you provided, your div was zero size. See how it works:
.logo {
display: block;
width: 99%;
height: 400px;
border: solid 1px red;
background-image: url('http://phandroid.s3.amazonaws.com/wp-content/uploads/2014/10/mountains.jpg');
background-size: 100%;
}
#media only screen and (max-width: 767px) {
.logo {
background-size: 50%;
background-repeat: no-repeat;
}
}
<div class="logo"></div>
But is it that you want for responsive design? Probably you misunderstood the meaning of background-size: 50%; property?
Uhm mate, heres a simple one: give your wrapper some height.
.logo {
background-image: url(https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif);
background-size: 100%;
width: 100%;
height: 100px;
}
#media(max-width:767px) {
.logo {
background-image: url(https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif);
background-size: 50%;
background-repeat: no-repeat;
}
}
<div class="logo"> </div>
I am trying to setup a fluid template that I can use for responsive design viewports too. However now when I try to resize my browser window it does not scale and on my iphone i just see the top left part of my header graphic. I have a main wrapper background and a header animated gif that are both the same width of 1200px. Any help would be greatly appreciated.
viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
css
body {
background-color: #B28D66;
margin: 0 auto;
}
#Wrapper {
max-width:1200px;
width:95%;
background-image: url(../img/background_main.jpg);
background-repeat: no-repeat scroll;
background-position: center top;
height: 2200px;
position: relative;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#Wrapper #Banner {
width: 100%;
height: 350px;
background-image: url(../img/animated-gif-header.gif);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#Wrapper #Content {
width: 75%;
margin: 0 auto;
}
#Wrapper #MainNav {
background-image: url(../img/nav_bar.png);
width: 100%;
height: 75px;
margin-top: -20px;
}
#Wrapper #MainNav ul {
margin-right: 100px;
}
#Wrapper #MainNav ul li {
float: right;
margin-top: 15px;
padding-right: 21px;
try using the background-size property in the following manner:
background-size:100% auto;
or use the below if you want to have its height covering the whole page height
background-size:auto 100%;
background-size: cover;
works just fine for me.
background-image: url('');
background: no-repeat center center cover;
This usually works fine.