0

I have been reading forums all night & still can't figure this one out.

I want to have one of my divs as the background for everything else in my site. I also want it to start from a particular spot, i.e. it doesn't take up the whole page.

This div (class the_background) is a child of my container div which is a child of the body, as follows:

head tag(Usual stuff in here)closing head tag

<body>
<div class="container">
<div class="header">
    <img src="images/open-access/header.png">
</div>
<br/>
<div class="signout">
    login name | <a href="#">signout</a>
</div>
<br/>

<div class="menu">
  <ul>  
    <li><a href="#">Bunch of links etc.</a></li>        
  </ul>
  <div class="under_menu">
  </div>
</div>

<div class="welcome">
        Welcome, name!
</div>
    <div class="the_background"></div>

etc.

The following is the code for my external stylesheet:

.container {margin:0 2em;
        text-align: center;
        position: relative;}

(bunch of code, and then:)

.under_menu{background-color: rgb(141, 0, 212);
width:auto;
height: 1em;
padding-bottom: 0;}

.the_background{background-color: yellow;
            background-image: url('images/bg.png');
    width: auto;
    height: 100%;
    background-size: cover;
    z-index: -10;
    position: absolute;
    left: 0;}

(bunch more code, etc.)

What I eventually want (as I can't post images) is for the background image to begin at the bottom of the under_menu div, to occupy the same width as it too, and to continue for the rest of the length of the page. At the moment, the under_menu div is perfect- it goes across the whole page but for a small margin at each side (of 50%) and is a nice slim height of 1em.

This code as I've currently copied it gives me nothing. Why on earth is that so???!!! I have been playing with this ALL day, and managed to get either the yellow fallback colour or the background image to display at certain times, but I cannot for the life of me control its width or height. I have tinkered with EVERY relevant property that I can identify! If someone could please help me I would be all kinds of grateful. If someone could also please explain why the code I have pasted there doesn't work, that would be great too.

Thank you very very much in advance!!!

p.s. yes I have been triple checking spelling & syntax etc. :/

user3024648
  • 1

1 Answers1

0

This one is tough without a good jsfiddle that includes your images. Could you please set that up for us?

In the meantime, try this CSS:

.the_background {
    background: yellow url('images/bg.png') 50% 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    position: absolute;
    left: 0;
    top: 1em
}

Result: http://jsfiddle.net/jJxCs/

Mark Simpson
  • 2,344
  • 2
  • 23
  • 31
  • Thanks Mark. I've discovered this jsfiddle thing and think that if you go to http://jsfiddle.net/9pHTJ/1/ you will see my attempt at code. I played around with it again and now I've made it even worse and I don't know how to fix it :( All the boxes except the profile box are now pushed down somehow. Also the website itself looks weird in the jsfiddle box. Instead of keeping things aligned and having a longer length to scroll across, the buttons in the navigation bar have been squashed up on top of each other and the boxes were kind of on top of each other too. Is this because of my code? – user3024648 Nov 24 '13 at 06:36