I just had a quick question in regards to an issue I am trying to solve. I made my top navigation menu's background color transparent and for some reason there is some white background or something behind it so the image does not show through.
The website is http://jobspark.ca/. If someone can figure out what is causing this that would be great. Thank you
in site.css you having the css for body like this.this is why you having background color as white and margin top as 80px...you can this two code as u want to change...if you remove the margin-top css you having nav to the top...
body {
background-attachment: scroll;
background-color: #ffffff;
background-image: none;
background-position: left top;
background-repeat: repeat;
background-size: auto auto;
color: #000000;
}
body {
margin-top: 80px;
}
Related
In Genesis framework, I can't figure out how to add content directly over background image (without the white body text box). The website is www.vacounseling.com. Please help!
CSS code:
body.home { background-image: url("https://www.vacounseling.com/wp-
content/uploads/2016/08/DSCN4252-6.jpg");}
body {background-color: #fff;
background-repeat: no-repeat;
background-position: center top;
background-attachment: scroll;
color:#222;
margin:0;
padding:0;
opacity: 1;}
If I understand correctly then as Dylan mentioned above you want to add the CSS of
.content .entry {
background-color: transparent;
}
I have the below code and I'm trying to add an attribute to center the background but it's not working.
Existing Code:
<div class="av-section-color-overlay" style="opacity: 1; background-color: #000000; background-image: url(http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg); background-repeat: repeat;"></div>
Existing CSS:
opacity: 1;
background-color: #000;
background-image: url("http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg");
background-repeat: repeat;
}
The CSS I tried to add is:
.av-section-color-overlay {
background-position: center center !important;
}
The website is http://andytraph.com/ and I'm trying to center the full-screen Avatar image
I would suggest not repeating the background, but letter-boxing it in the container, which looks way better. Center works:
{
opacity: 1;
background-color: #000000;
background-image: url(http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
There are a few competing problems here:
There is no content inside the element you are working with, so the background image is getting clipped as a result.
The background image is very large, so it is difficult to see the desired centering without either 1) setting the DIV element to a relatively larger height / width, or setting the background-size CSS property.
The concepts of background-repeat: repeat and background-position: center constitute competing desires. You can't really both center an image, and tile it indefinitely in both directions.
So in light of the above, if you apply a few further style modifications, you get your desired behavior with what you specified: background-position: center. (If you want to center in both directions, you don't need to expressly state it twice -- it is implied that you want to use it in both directions if there is only a single value.)
Something like:
.av-section-color-overlay {
background-color: #000;
background-image: url("http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg");
background-repeat: no-repeat;
background-size: 100px;
background-position: center;
height: 200px;
width: 200px;
}
and:
<div class="av-section-color-overlay"></div>
Example: https://jsfiddle.net/7mpqfd22/2/
I have text links that I am trying to use a background image with on rollover (link.gif is transparent, linkhover.gif is the rollover image).
The code I have below is working except the positioning is not.
.navlink {
background:transparent url('graphics/link.gif') center top no-repeat;
height:70px;}
.navlink:hover {
background-image: url('graphics/linkhover.gif');}
Try making the background take up the full size, like this
.navlink {
background: url('graphics/link.gif');
height:70px;
}
.navlink:hover {
background: url('graphics/linkhover.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
}
Demo
If you have a parent element around .navlink, then you can just put height:100% and remove height:70px; and it will stay proportional. If you want to disregard proportion and just have it fill the parent you can put both height:100% and width:100%
EDIT
Since I found out the navlinks are all <a>: you can't have background-attachment: fixed because it makes the parent's background change instead of the navlink's (for what reason I don't know)
Updated code
.navlink {
text-align:center;
background: url('graphics/link.gif');
background-repeat: no-repeat; /* This applies to :hover as well */
background-position: center; /* This applies to :hover as well */
text-decoration: none; /* To remove the underline */
}
.navlink:hover {
background: url('graphics/linkhover.gif');
}
Updated demo based on the structure of your site which you provided in the comments
Next time when writing your question you should include the relevant HTML, that would have made it much easier to help you with the problem
EDIT 2
After some playing I believe I got your site the way you want it using this:
.navlink {
padding-top:30px;
text-align:center;
background: url('graphics/link.gif');
text-decoration: none;
}
.navlink:hover {
background: url('graphics/linkhover.gif');
background-position: center -55px;
background-repeat:repeat-y;/*This is optional, taking it out makes it repeat*/
text-decoration: none;
}
You should make a sprite, put the images next to each other in one file and adjust the background-position on :hover. The CSS should be like this:
.navlink {
background-image: url('image');
background-position: top left;
}
.navlink:hover {
background-position: top right;
}
You can achieve a cool effect when adding an CSS3 transition.
The image will then slide to the rollover state!
I have a rollover top menu. Im trying to get it so my background image (17px x 13px) appears on hover in the center. I've tried all the background css attributes and nothing seems to work. Am I going about this the wrong way?
Here is my CSS:
#navlist a:hover
{
color: #fff;
background-color: #b2b85c;
text-decoration: none;
background-image: url(Images/pointer.jpg);
background-position: center bottom;
background-attachment: fixed;
}
Here is a link to the page.
http://kerrydean.ca/Grey%20River/greyRiverTemplate2.html
By navigation I assume you mean the top menu.
Try adding background-repeat: no-repeat; to your CSS rule for #navlist a:hover
My website (http://www.webbuddies.co.za) works perfectly, but when viewed at 1280x1024 resolution, there's a bit of white visible at the bottom of the page that I'd like to get rid of.
The background is a gradient image and rather than recreating the image, I want to just change the color of the background to match the bottom of the gradient. Can this be done?
Here's my CSS:
body {
background: transparent url("Images/Background.png") repeat-x;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
If I change transparent to a color, the image disappears... any ideas?
Thanks in advance!
You can just use the background-color attribute in your CSS, setting the color to the bottom color of your image. For example:
background-color:#00ff00;
simply set an additional background-color like this:
body {
background-image:url("Images/Background.png");
background-repeat:repeat-x;
background-color:#999999; /* << inset your gray here */
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}