CODEWITHSUNDEEP
htmlcssbackground
Michele Hermes
Michele Hermes

Reputation: 1

How to make content background white

I am new to programming and have a basic question. I have a background image on my web page, but I want the content area to have a white background. I see this very commonly on the web but being new I cannot seem to figure out how to do it. I have a #wrapper div that centers my content and a css rule to show the image, just can't get the content area background to be white. Help for this newbie is appreciated!

Upvotes: 0

Views: 11746

Answers (3)

Maen
Maen

Reputation: 10698

Assuming a structure like this :

<body>
    <div id="wrapper">
        <section id="content">            <!-- Or div or whatever -->
            Lorem ipsum dolor sit amet
        </section>
    </div>
</body>

You should apply a background-color to #wrapper :

body{
   background-image: url("your_url");
}

#wrapper{
   background-color:white;
}

Check this fiddle for a working example.

Upvotes: 1

Savas Vedova
Savas Vedova

Reputation: 5692

There are several ways to achieve this. You can either set the styles of your HTML tags (div, span, p etc...) by using the style attribute as in the example:

<div style="background-color: white;"></div>

or either define your styles inside the <head></head> tag as follows:

<html>
    <head>
        <style>
             .your_class { background-color: #ffffff; }
        </style>
    </head>
    <body>
        <div class="your_class"></div>
    </body>
</html>

or either use the link tag to put your CSS code inside a file and link to it as:

<head>
   <link rel="stylesheet" type="text/css" href="your_file.css">
</head>

Or sometimes you will need to set your style dynamically. Then javascript enters into the picture:

<html>
    <head>
        <script>
            function changeBg(id, color) {
                document.getElementById(id).style.bgColor = color;
            }
        </script>
    </head>
    <body onload="changeBg('myDiv', 'white');">
        <div id="myDiv"></div>
    </body>
</html>

You should read more on HTML and CSS to understand how it works. There are plenty of tutorials on the web.

Upvotes: 3

ophintor
ophintor

Reputation: 180

Put your content inside a div and specify background:#fff; for that div in your CSS.

Upvotes: 0

Related Questions