CODEWITHSUNDEEP
javascriptjquerycss
GotSeriesTyrion
GotSeriesTyrion

Reputation: 15

Body Background image cannot full screen

I have a problem with body background images I tried anything to make it full screen the images but I couldn't fix it. Can you please help me out? Here is the code.

var body = $('body');
var backgrounds = ['url(images/3.jpg)', 'url(images/4.jpg)', 'url(images/5.jpg)'];
var current = 0;

function nextBackground() {
  body.css('background', backgrounds[current = ++current % backgrounds.length]);
  setTimeout(nextBackground, 5000);
}
setTimeout(nextBackground, 5000);
body.css('background', backgrounds[0]);
@charset "utf-8";
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, em, img, strong, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
}
ol, ul html, body {
  height: 100%;
  width: 100%;
  font: normal 12px/1.3 "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
  color: #DDDDDD;
  background-size: 100% 100%;
}
body {
  height: 100%;
  width: 100%;
  -webkit-transition: background 0.8s;
  -moz-transition: background 0.8s;
  -o-transition: background 0.8s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Upvotes: 0

Views: 83

Answers (3)

Alex
Alex

Reputation: 21

This is how you can make the background image cover the entire parent element:

background-repeat:no-repeat;
background-size:cover;
background-position:center;

And remove background-size: 100% rule.

Upvotes: 1

Axel Amthor
Axel Amthor

Reputation: 11096

In your code, just delete the second "100%" in background-size, add a no-repeat and a !important to the single body rule:

....
-o-transition: background 0.8s;
background-size: 100% !important;
background-repeat: no-repeat !important;

Demo here

Upvotes: 0

waki
waki

Reputation: 1258

Demo

  $(function(){
    var body = $('body');
    var backgrounds = ['url(http://www.hdwallpapers.in/walls/2015_christmas_new_year-wide.jpg)', 'url(http://www.hdwallpapers.in/walls/happy_new_year_2015-wide.jpg)', 'url(http://www.hdwallpapers.in/walls/regina_cassandra_latest-wide.jpg)'];
    var current = 0;
    function updateBackground() {
        body.css('background-image', backgrounds[current = ++current % backgrounds.length]);
        setTimeout(function() { updateBackground() }, 5000);
    }
    updateBackground();
  });

Upvotes: 0

Related Questions