CODEWITHSUNDEEP
htmlcsscolorsbackground
rasmus
rasmus

Reputation: 1

How do I do a website with more than 1 background color?

this is what i got, but that is only one background color that fill 90% of the screen. But i would like to have another color under.

position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 90%;
background-color: #20a2d6;}

You can find an example of what I'd like to get here

Upvotes: 0

Views: 70

Answers (3)

Matteo NNZ
Matteo NNZ

Reputation: 12665

If you want your body being 90% of one color and the remaining 10% of another color, then you should create two containers into your HTML body: to each of it, you will assign a different CSS. To explain you the logic (I let you do the rest about positioning, sizing etc.):

HTML: here you create two separate div containers...

<body>

    <div id="first_section">

    <div/>

    <div id = "second_section">

    <div/>

<body/>

Hence, you will attribute the style properties into your CSS to each of them...

#first_section{
    width: 100%;
    height: 90%;
    background-color: red;
}

#second_section{
    width: 100%;
    height: 10%;
    background-color: blue;
}

I would suggest in particular Bootstrap, which is a nice collection of classes and Javascript functions that will allow your website to be responsive as soon as the browser size changes (from full-screen to tablet or phone, for example).

Upvotes: 0

JasonCG
JasonCG

Reputation: 879

http://www.spelltower.com/ is using HTML section tags for those colored backgrounds. It's not just a single element with multiple background colors. Javascript is used to resize each section as the browser window is resized.

HTML

<div>
    <section id="first_section">First Section</section>
    <section id="second_section">Second Section</section>
    <section id="third_section">Third Section</section>
</div>

CSS

#first_section { background_color: blue; }
#second_section { background_color: red; }
#third_section { background_color: green; }

Javascript

//When the browser window is resized...
$(window).resize(function() {
    // Get the new window height
    var windowHeight = $(window).height();

    //Determine the height we want each section, in this
    //case we don't want it to be less than 600 pixels tall
    var newHeight = windowHeight;
    if(newHeight<600) newHeight = 600;

    $('section').css('height', newHeight);
});

Upvotes: 1

lolcodez
lolcodez

Reputation: 699

If you inspect the source on spelltower.com, you'll note that what you are seeing ins't multiple background colors applied to the whole page. Each of those sections has it's own background color.

Upvotes: 0

Related Questions