I cannot set a color background for my body

1
votes

I have an image as my background and its showing through all of the elements on my webpage. seeing as though i cant change the background on each of the elements on my webpage i want to just have a white square that will go over the background image so that the image isnt bleeding through and blocking all the text.

i have tried reseting. html, body { background-color: solid black; } and ive tried to just set the background without the image but that didnt seem to work either.

<div class="container">
    <div class="introtext">
        <p>Welcome To My Website!</p>
    </div>

    <div class="row">
        <div class="column">
            <head>first post</head>
        </div>

        <div class="column">
            <head>second post</head>
        </div>

        <div class="column">
            <head>third post</head>
        </div>
    </div>
</div>
<footer>
<div class=footermaindiv>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Social Links</a></li>
<li><a href="#">Advertise</a></li>
</div>
</footer>

i need to be able to set a white background over the image that i have set for the current background. for some reason i cant set the background-color for anything on my webpage.

3
htmlcss
Can you upload the CSS? – Michael Bianconi
Have you tried setting the HTML background to the image and the restricting the size of the body to proportions that you want (and setting background color to white)? – Michael Bianconi
html, body { background-color: solid black; } is invalid syntax. Try e.g. html, body { background-color: black; } – j08691

3 Answers

1
votes

Try this css :

body
{
   background-color: black;
}

Your code body { background-color: solid black; } won't work.

0
votes

You can't have an image background and a color background on the body at the same time. Ok, so technically you can, but the image will overwrite the color.

What you need is a background color on your containers, such as your divs and footer. You should be able to put a color on your highest level container and it'll propagate to all it's children by the fact your containers are already transparent and able to show your background image.

You already have a container and footermaindiv class, so just add background-colors to them to get this to work.

Also, you don't need to specify the solid descriptor, as that's only for borders. By default, a background color will be solid. You have to do special things to make it a gradient or anything other than solid. Just specify the color and that's it.

0
votes

I added in a style sheet to your html page and was able to change the background colors. Here's the code

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
  background-color: black;
  text-align: center;
  color: blue;
  font-family: Arial, Helvetica, sans-serif;
}
.container{
    background:green;
}
.column{
    background:white;
}
</style>
</head>
<body>

<div class="container">
    <div class="introtext">
        <p>Welcome To My Website!</p>
    </div>

    <div class="row">
        <div class="column">
            <head>first post</head>
        </div>

        <div class="column">
            <head>second post</head>
        </div>

        <div class="column">
            <head>third post</head>
        </div>
    </div>
</div>
<footer>
<div class=footermaindiv>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Social Links</a></li>
<li><a href="#">Advertise</a></li>
</div>
</footer>
</body>
</html>

You can add your own CSS for whatever IDs you wish.