0

I’m currently working on a website for educational purposes.

I want all of my pages look like this one. As the background on the sides are made from image but the background for content is grey.

I have 3 problems which i cant resolve :

First one is that I cant get grey background to my first page at all. Second one being that if there isnt enough content to fill the page like here, i cant get the grey background till the footer. Same with sidebars i cant get background color under them.

I tried to solve this using css.

First I set up background to all my body element

background-image:url('http://www.dadi.rtu.lv/image/tikls.svg');

And then i tried to fill the grey background under the content like this

.entry-content {
background-color: #e6e6e6;
}
#sidebar-primary {
    background-color: #e6e6e6;
    }
.widget-area .widget {
background-color: #e6e6e6;
}
.page article.page { background-color: #e6e6e6; }

Searching in google and stackoverflow i know that it should be resolved with using div tags around my content and giving it my background color. But I cant figure it out.

My pages are set up like this (except the first one) :

<div class="grey"><!--this is my new div tag-->
<div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
        </main><!-- #main -->
    </div><!-- #primary -->
</div>

CSS for my new div tag:

.grey {
    background-color: #e6e6e6;
    display: block;
}

My goal is to get my new div tag from my navigation bar till footer with grey background. Im stucked with this for a while so all help will be appreciated!

0

Use this css style to make your background cover the entire page:

body {
    background-image: url('IMAGE URL');
    background-repeat: repeat;
    width:100%
    overflow:hidden;
    float:left
}

Now, style your content's background:

.grey {
    background-color: #e6e6e6;
    display: block;
    float:left;
    overflow:hidden;
    width:500px // You can also set as 100%
}

Not that you should either set a width for your elements, or float it to the left to be able to set it's background.

  • Thanks, this one worked out great. But do you have any ideas how to make that div tag go till it reaches footer ? Because now it has this space between content and footer. I would like to have it grey too. You can see it here (dadi.rtu.lv/studiju-programmas) Here is my CSS for footer (pastebin.com/c0258vT5) – RebelInc Apr 3 '17 at 15:28
  • You want to remove the space between footer and DIV? You should remove margin-bottom from your from your DIV, and margin-top from your footer. Remember to remove these margins for every sub-element standing between these 2 too. – Jack Johansson Apr 3 '17 at 15:44
  • Maybe i'm not getting the message across. I want this page (dadi.rtu.lv/studiju-programmas) look like this (i.imgsafe.org/271e1ddd05.png). I tried to add bottom:30px; to that div tag but it didnt do the job. – RebelInc Apr 3 '17 at 16:07
  • This is because your footer's position is set to absolute. It must be set to relative instead. Remember, if your content's height is less than the screen's height, it will not reach the bottom of the page unless you define a height or a padding-bottom for it. – Jack Johansson Apr 3 '17 at 16:12
  • Ok, i set my footer position to relative and then gave my div tag height: calc(100vh - 30px); But now i can't scroll down. And i have no idea why. – RebelInc Apr 3 '17 at 16:36

Not the answer you're looking for? Browse other questions tagged or ask your own question.