background image for div , not page

Question

I have been looking at this css demo (http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/) , and love it : however, I want to be able to put this into a div, and not cover the whole page.

Is this possible ? I have been able to put single image into a div using this css code

header {
background: url(/assets/images/landscape-mountains-nature-man.jpg) no-repeat center top fixed;
    -webkit-background-size: contain;
    background-size: contain;
}

but for the life of me I can't get the image slideshow to work in a div

I am not a css guy (as it is plainly obvious) and would appreciate some pointers if someone could help me out ;)

Thanks!

========= update ========

I probably have not been clear enough : I have been able to get a div background working , but what I really want to do is to use the css animations in the slideshow demo in a div.

I have implemented the css from the demo, but it is fullscreen, and I can't work out how to limit it to a div / class , despite working on it for quite some time.

What I don't get is that the css from the demo is

.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;

and my html is

<header id="home">
   .. [snip] ..
   <div class="container">
     <ul class="cb-slideshow">
            <li><span></span><div><h3>page1</h3></div></li>
            <li><span></span><div><h3>page2</h3></div></li>
            <li><span></span><div><h3>page3</h3></div></li>
            <li><span></span><div><h3>page4</h3></div></li>
            <li><span></span><div><h3>page5</h3></div></li>
            <li><span></span><div><h3>page6</h3></div></li>
        </ul>

so why does the css in my code just limit itself to the header, but the css in the animation take over the whole page ?

*I have been able to put single image into a div* a `header` is not a `div` — Leon Adler, Dec 12 '15 at 15:50
@Sagar: I am wanting the
..
to have the background animations of the demo, not the whole page — jmls, Dec 12 '15 at 15:53
@jmls: why don't you give a try to [https://getbootstrap.com/examples/carousel/](https://getbootstrap.com/examples/carousel/) and this is something that will help you! [http://stackoverflow.com/questions/16350902/bootstrap-carousel-full-screen](http://stackoverflow.com/questions/16350902/bootstrap-carousel-full-screen) — Sagar Gulati, Dec 12 '15 at 15:56

score 0 · Answer 1 · answered Dec 12 '15 at 15:55

You can use this

HTML

<div class="header_div">

</div>

CSS

.header_div {
   width: 100%;
   height: 400px;
   background-image: url('http://www.wallpapereast.com/static/cache/85/2f/852fa0958af9bfca3e64fa66aa1ad907.jpg');     
   background-size: cover;
   background-position: center;  
}

score 0 · Answer 2 · answered Dec 12 '15 at 15:59

0

Just make multiple div in the HTML, like so:

<div id = "number1"></div>
<div id = "number2"></div>
<div id = "number3"></div>

then, in the CSS, put:

#number2 {
    background: url(/assets/images/landscape-mountains-nature-man.jpg) no-repeat center top fixed;
    -webkit-background-size: contain;
    background-size: contain;
}

this #number2 can be number 1 or 3, just put content in the other div's hope I helped!

answered Dec 12 '15 at 15:59

FlipFloop

1,233
1
14
25

thanks : I tried this, but didn't get any image until I put height:100% and width:100% into the css - but then that covered the whole page again – jmls Dec 12 '15 at 18:30

score 0 · Answer 3 · answered Dec 12 '15 at 17:16

I recommend that if you're using a div, using jquery to specify to the height of the screen, this will serve to assign the height of the screen and will also work with mobile phones and tablets.

This method is for use with <body>:

Css:

body {
  background: url('http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg') no-repeat fixed;
  background-size: cover;
  background-position: center;
}

Or you can use it in a div adding Jquery like this:

$(function() {
    var height = $(window).height()+"px",
        $element = $('.background-image');

    $element.css('height', height);
});

this is to make your div is full screen.

background image for div , not page

3 Answers3