So currently, I have two styles.
.wrapper-style1
{
background-image:url(../images/river.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
color: #eee;
color: rgba(255,255,255,0.75);
}
.wrapper-style1 .title
{
background-image:url(../images/river.jpg);
color: #fff;
}
My problem is for some reason the colours don't seem to match within the background.
The wrapper-style1 is fine, but wrapper-style1 .title seems to be darker =S
Any advice?
Site is: www.s1magazine.co.uk
The 'ABOUT S1' background should be same colour as the background below it.
I made a screenshot and copied the part from about s1 and copied it above the other part. And it is exactly the same image. So you need to adjust the background position
background-position: top center;
Related
I work on PrimeFaces and I am trying to edit css properties of components. while working on growl, I am trying to change closing icon color but I just can't. I tried a lot and a lot and still couldn't figure out.
You can see at the top-right corner, Its background color yellow which I set it that but I cant change icon color. Its always that blue. Here are my codes about growl;
.ui-growl{
position:fixed;
top:20%;
left:38%;
width: 23%;
}
.ui-growl .ui-state-highlight{
background: #d2524f;
border: #d2524f;
}
.ui-growl-message{
float: left;
font-size: 15px;
margin: 2% 0 0 22%;
}
.ui-growl .ui-growl-icon-close{
background-color:yellow;
}
The closing icon is drawn with background-image attribute via the following CSS selector:
.ui-state-highlight .ui-icon {
background-image: url("/showcase/javax.faces.resource/images/ui-icons_ffffff_256x240.png.xhtml?ln=primefaces-omega");
}
Changing the color attribute will have no effect. To change the icon color you have to modify the image url. This answer gives some hints on that topic.
Tested with PrimeFaces ShowCase.
I want an element with a class to always have the same background color. Depending on weather it has an additional class its background image will change.
This works fine however having to have separate rules for the different background properties is a little messy:
.class {
background-color: grey;
background-image: url("image1.jpg");
background-repeat: no-repeat;
background-position: right center;
}
.class.additional {
background-image: url("image2.jpg");
}
This works but ive had to repeat 'grey' which isnt ideal for maintaining the code long term:
.class {
background: grey url("image1.jpg") no-repeat right center;
}
.class.additional {
background: grey url("image2.jpg") no-repeat right center;
}
Is there a way I have write all the background properties on one line, but not repeat the background color for both styles?
You can specify the shorthand in the first rule and override just background-image in the second:
.class {
background: grey url("image1.jpg") no-repeat right center;
}
.class.additional {
background-image: url("image2.jpg");
}
i have this css class
.site-title .logoimage {
background: url(~/Images/orderedList0.png) center right;
color:red;
display: block;
height: 84px;
width: 264px;
}
it is working and the prove is the color red, if i change it to green, the test becomes green and so on.
but i can't add the background of the image, i dont konw why.
the image is in the Images folder.
~/Images/orderedList0.png is not a valid URL. the tilde ~ is an Asp.Net construct that represents the site "root". It is not a concept which is "understandable" by your browser when parsing the CSS.
Try /Images/orderedList0.png
You need to change the URL in background: url(~/Images/orderedList0.png) center right;
I've seen a number of questions and answers about changing the background color of the default Twitter Bootstrap Primary Navbar, but they seem to deal with the top-most layer (the navbar-inner class), masking a number of other colors and options underneath.
I'm looking to create a transparent navbar, and after adding "background-color:transparent;" to each layer I can find, I still have a stock white bar across the top of my screen. Currently my app.css has these few lines:
.navbar-inner{
background-color:transparent;
}
.navbar-inner container{
background-color:transparent;
}
.navbar{
background-color:transparent;
}
#nav-main{
background-color:transparent;
}
#banner{
background-color:transparent;
}
I'm running out of guesses here, and my scatter-shot method seems to be failing me. Is there a rule I just haven't seen (and modified) yet, or am I going about this the wrong way altogether?
The problem is they are using an image on the background. So by setting the background-color, you are only setting the color behind the image. Try something along these lines:
.navbar-inner{
background:transparent !important;
}
.navbar-inner container{
background:transparent !important;
}
.navbar{
background:transparent !important;
}
#nav-main{
background:transparent !important;
}
#banner{
background:transparent !important;
}
Got this result in Bootstrap 3 using:
body { background: transparent }
I'm trying to take away a white border that is appearing from behind an image on my sidebar. I can't figure out what is causing the white border. I thought it was the padding, and then I thought it was the border. If you visit our home page (http://noahsdad.com/) and look on the side bar under the "new normal" picture you will see a "Reece's Rainbow" image. I'm trying to remove that white around the image. I pasted in the code below, but it's not doing anything. Any thoughts as to what I'm doing wrong?
Thanks.
#text-23 { background: none}
the reason it's not working is the background: none is never getting to the img which has the background set on it (backgrounds don't cascade down they exist in the element and you can have multiple elements layered on top of each other much like a painting. Which has the effect of the background cascading)
#text-23 img { background: none; }
that should resolve your problems. I am assuming that when you call the class textwidget you still want it to append the white background, just not for this instance. So if you set the above it will cascade properly with the correct specificity while leaving the rest of your page alone.
This can also be done by
#text-23 .textwidget img { background: none; }
but that level of specificity is not required. However if you try to just do:
.textwidget img { background: none; }
this will override all of the instances where the background is set on an image in the textwidget container.
You have added the white border yourself by setting the following in line 884 of style.css:
.textwidget img {
background: #fff;
padding: 5px;
max-width: 290px;
}
Simply remove the background declaration. If you only want to remove this instance of a white border, add the following rule:
#text-23 .textwidget img {
background: none;
}
This seems to be the conflicting CSS class.
.textwidget img {
background: white;
padding: 5px;
max-width: 290px;
}
If you want to debug css you should really look into Firebug(a plugin for Firefox) or Opera and use builtin dragonfly
These allow you to rightclick on your HTML page and inspect it.
Go to your style.css file and search for .textwidget img and change the background-color property to none. It is currently set to #FFFFFF which is the hex color code for white and is resulting in the white border or background (precisely).
.textwidget img {
background-color: none;
}