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;
}
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>
How can I add a linear radiant to a background image with a specified height?
Codepen
<div class="bg-img"></div>
<h1>This should not be covered</h1>
html, body {
width: 100%;
height: 100%;
}
.bg-img {
width: 100%;
height: 60%; # works with 100%, but not anything less
background: url('http://unsplash.it/1200x800') center center no-repeat;
background-size: cover;
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
opacity: .6;
}
}
add position:relative to .bg-img so absolute pseudo refers to it for coordonates and positioning.
.bg-img {
width: 100%;
height: 60%; # works with 100%, but not anything less
background: url('http://unsplash.it/1200x800') center center no-repeat;
background-size: cover;
position:relative;
https://codepen.io/gc-nomade/pen/ZXKdbv
html,
body {
width: 100%;
height: 100%;
}
.bg-img {
width: 100%;
height: 60%;
background: url("http://unsplash.it/1200x800") center center no-repeat;
background-size: cover;
position: relative;
}
.bg-img:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right, #002f4b, #dc4225);
opacity: .6;
}
<div class="bg-img"></div>
<h1>This should not be covered</h1>
Other option is to use rgba() colors and set both gradient and image as background images
html, body {
width: 100%;
height: 100%;
}
.bg-img {
width: 100%;
height: 60%;
background:linear-gradient(to bottom right, rgba(0,47,75,0.6), rgba(220,66,37,0.6)), url("http://unsplash.it/1200x800") center center no-repeat;
background-size: cover;
}
<div class="bg-img"></div>
<h1>This should not be covered</h1>
Re this site:
http://www.jenniferharper-deacon.com/
I have added background images using the following css:
#pl_areauzza45k .pl-area-wrap {
background-image: url("http://www.jenniferharper-deacon.com/wp-content/uploads/2015/01/WHEAT-FIELD.jpg");
right: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
However they seem to be pixelated on my phone. Any help on how to solve this would be very appreciates.
The reason is the image is getting shrunk.
Try this:
#pl_areauzza45k .pl-area-wrap {
background-image: url("http://www.jenniferharper-deacon.com/wp-content/uploads/2015/01/WHEAT-FIELD.jpg");
right: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 100%;
background-attachment: fixed;
}
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.
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.