[Solved]background color overrides background image?

Hello!

I have a very strange problem with CCS design and I couldn’t find an answer for it online: I set the background color of everything to light blue, and when I tried to insert a background image into the wrapper, the background image was overriden by the background color.

        <body>
    	<div class="headerMenu">
        	<div id="wrapper">
            	<div class="logo">
                	<img src="./img/logo_fuchairs.png" />
                </div>
            </div>
        </div>
    </body>
* {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, Sans-serif;
	font-size: 12px;
	background-color: #eff5f9;
}

.headerMenu{
	background-image: url(../img/menu_bg.png);
	height: 38px;
	border-bottom: none;
	padding-left: auto;
	padding-right: auto;
	width: 100%;	
}

#wrapper{
	background-image: url(../img/menu_bg.png);
	margin-left: auto;
	margin-right: auto;
	width: 1000px;
	padding-top: 0px;
	padding-buttom: 0px;	
}

.logo{
	width: 125 px;	
}

.logo img{
	width: 150px;
	height: 38px;	
}

I would like to keep the background color for everything while fixing the problem, also to understand why this happens. Thanks!

/JC

Can we get a live demo?

Is the #wrapper background image the one disappearing?

If you are setting the background color via the shorthand “background” property, be aware that if you use that AFTER you set your background image, it’ll reset everything to their defaults.

http://codepen.io/ryanreese09/pen/XbxJEa

Ultimately, we need a bit more information / a working demo to see the actual cause.

Hi Ryan, thanks for the quick reply. You are right that the #wrapper background image is the one disappearing. We are currently dealing with a bit of server issue so live demo has to wait till a later time

This is everything that I have:

<!doctype html>
<html>
	<head>
    	<title>Fuchairs</title>
        <link rel="stylesheet" type="text/css" href="./css/style.css" />
    </head>
	<body>
    	<div class="headerMenu">
        	<div id="wrapper">
            	<div class="logo">
                	<img src="./img/logo_fuchairs.png" />
                </div>
            </div>
        </div>
    </body>
</html>
@charset "UTF-8";
/* CSS Document */
* {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, Sans-serif;
	font-size: 12px;
        background-color: #eff5f9;
}

.headerMenu{
	background-image: url(../img/menu_bg.png);
	height: 38px;
	border-bottom: none;
	padding-left: auto;
	padding-right: auto;
	width: 100%;	
}

#wrapper{
	background-image: url(../img/menu_bg.png);
	margin-left: auto;
	margin-right: auto;
	width: 1000px;
	padding-top: 0px;
	padding-buttom: 0px;	
}

.logo{
	width: 125 px;	
}

.logo img{
	width: 150px;
	height: 38px;	
}

I just grabbed some images but I’m not seeing any unusual overriding - I just replaced your images.Are you seeing the issue in this demo?

http://codepen.io/ryanreese09/pen/aORzXG?editors=110

Apply the top background-color to the body tag (or wherever you want it), not with the universal selector.

Hi Ryan,

Add “background-color: #eff5f9;” to the universal selector and wrapper background image will disappear.

i.e.

* {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, Sans-serif;
	font-size: 12px;
	background-color: #eff5f9;
}

Sorry that I removed this part from the code while debugging

I thought that perhaps applying the background color to everything will be the best design since theoretically the background color should be everywhere. Is there no way to use it on the universal selector?

You have an error here which, when corrected, will make your code work.

I agree with Ron about the background-color moving as well.

.logo{
	width: 125 px;	
}

Notice the space between 125 and px?

That wasn’t the issue (although I agree you shouldn’t do it.) It’s just silly.

Oh Wow, silly but hard to detect. Thanks a lot Ryan!

By the way, I also notice that if I remove .logo{widith: 125px}, the background image disappears as well. Why does that happen?

Edit: never mind, I figure it out i think. By default .logo has a large width, and placing the image inside .logo that’s not large enough to cover everything will leave some blank space which will be filled with background color…

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.