How Do I Make All Backgrounds Grey without Affecting Images?

[koolx]

I use a global style in my Opera browser that makes backgrounds of all websites grey, which I like. But the problem is that a few elements are not greyed, they're white.Theres a code that makes all backgrounds grey. But it also made many images disappear. That code is: background: #444 !important;

 

Attached is my CSS style. Can someone please suggest a code to add that makes all backgrounds grey without affecting any images?

[dsonesuk]

Don't use shorthand background, it basically will overide all background styling for this and only apply current. Target the specific background styling for example using background-color:

[koolx]

Don't use shorthand background, it basically will overide all background styling for this and only apply current. Target the specific background styling for example using background-color:

Hi, dsonesuk.. I'm a bit of a newbie, I only know basic CSS. Can you please explain what you mean by, 'shorthand background'? Do you mean that I should only use 'background-color' and remove 'background' from the code? If thats what you mean, then I already tried that and it works but I still get some white background.

 

If you can, please add a code for me to use. As I said, I'm a newbie and know basic CSS. I'd appreciate it greatly. Thanks!

[dsonesuk]

Then maybe you should read up on the tutorial at http://www.w3schools.com/css/css_background.asp, which explains all the background properties, such as background-color, background-image, background-postion etc, and how they can be combined altogether under background: before posting.

 

You can test why you are getting the problem you experiencing here

http://www.w3schools.com/css/tryit.asp?filename=trycss_background_shorthand

under

background: #ffffff url("img_tree.png") no-repeat right top;

type

background: red;

the image is cancelled out and disappears, cause you have not set image property, now change to

background-color: red;

you are only changing just the color already set, and not touching any of the other properties, so the background color changes and all the other properties including the image remain.

Edited November 20, 2014 by dsonesuk

[koolx]

Then maybe you should read up on the tutorial at http://www.w3schools.com/css/css_background.asp, which explains all the background properties, such as background-color, background-image, background-postion etc, and how they can be combined altogether under background: before posting.

 

You can test why you are getting the problem you experiencing here

http://www.w3schools.com/css/tryit.asp?filename=trycss_background_shorthand

under

background: #ffffff url("img_tree.png") no-repeat right top;

type

background: red;

the image is cancelled out and disappears, cause you have not set image property, now change to

background-color: red;

you are only changing just the color already set, and not touching any of the other properties, so the background color changes and all the other properties including the image remain.

Hi, dsonesuk. I tried what you suggested, which is adding"background-color #example color !important;" But even though it does a good job of allowing images to be seen,.a few elements still seep through with their whiteness.

 

For example, when I tested that code with the site below, I get some white patches:

http://freedownloads.pw/

 

Do you think it's best at this point to just add all possible elements and then add 'background-color' code to these elements? If so, can you please reply back with all the elements I can add to that code? Thanks.

 

(Just to let you know, I'm using the site I posted above as an example. Please keep this in mind).

[tejasamrute]

To be able to understand better, please attach screen shots of your browser view

[dsonesuk]

Im not to fluff around someone else's site (especially a download site)to identify a problem that has noting to do with your site. Do it yourself use F12 on your web browser and inspect the elements in question using web developer tools, it will tell you what is causing these white patches and you can go about fixing them.

[Lucy]

[...]a problem that has noting to do with your site. [...]

 

I might be misinterpereting this, but I don't think koolx is working on a website - I think they're using a bit of CSS to override the styles for all the websites they visit.

[koolx]

 

II don't think koolx is working on a website - I think they're using a bit of CSS to override the styles for all the websites they visit.

Exactly! Very perceptive. Hope you can still help me, sweetheart.

 

Im not to fluff around someone else's site (especially a download site)to identify a problem that has noting to do with your site. Do it yourself use F12 on your web browser and inspect the elements in question using web developer tools, it will tell you what is causing these white patches and you can go about fixing them.

So far, I cleaned some of the pathces up. But one is giving me an issue. When I inspect the elements, theres this white patch in the online editor on this site. The code is below. I tried to replace the url with: "background: none !important;" but that doesn't work.

 

.cke_top {background: url("http://w3schools.invisionzone.com/public/style_images/master/editor/toolbar_bg.png") repeat-x #E4EBF2 !important;}

 

I also attached a pic to show you. What do you suggest to remove this white patch?

To be able to understand better, please attach screen shots of your browser view

Pic is attached. Please see it and let me know. Thanks, man!