I have this in my HTML everything works except the background-image: 'images/Header.jpg';
Instead I see the grey color in the header but not the image.. I tried removing the grey color but still dont see the image...
#outerWrapper #header {
border-bottom: solid 1px #628152;
font-size: 18px;
font-weight: bold;
line-height: 15px;
height: 115px;
background-color: Grey;
background-image: url('images/Header.jpg');
How can I make this work.. please help.. thanks
What is the path of your CSS file and the path of the image?
You must take in account that, when using url() in CSS, the path is relative to CSS file, not to the requested page.
Imagine you have the following files:
/website/index.html
/website/templates/main.css
/website/images/header.jpg
than the CSS must be:
.style{background-image:url(../images/header.jpg);} /* Noticed "../"? */
Have a look at your page with Firebug for Firefox. You may not be loading the image properly. You will also be able to play with the css on the fly if that's your issue.
Try changing the url to '/images/Header.jpg'
Sure you need the ' char? And maybe it is case sensitive and you have a mistake in the url..
Maybe background-image:url(images/header.jpg);
Related
I am designing my theme for my website, and have no other CSS files in my folder besides template.css.
.header-wrap,
.nav-wrap,
.slideshow-wrap,
.body-wrap,
.sub-footer-wrap,
.footer-wrap {float: left; width: 100%; clear: both;}
.header,
.nav,
.slideshow,
.body,
.sub-footer,
.footer { width: 960px; margin: 0 auto;}
.header-wrap { height: 118px; background: url('files/img/background/bg-header.png')
repeat-x; border-bottom: 1px solid #6A6A6C}
.nav-wrap { height: 38px; background: url('files/img/background/bg-nav.png') repeat-x;
border-top: 1px solid #D9D9DB; border-bottom: 1px solid #B8B8BA}
.body-wrap { background: #F4EDDB url('files/img/background/bg-body.png') repeat-x;}
I don't believe that the issue is relating to that but there must be something else doing this to my webpage:
The red lines show the whitespace that is being generated for some unknown reason. I have been looking at this for a while and have not been able to find the source. I was wondering if anyone has had an issue like this before? Or someone that might be able to point me in the right direction to fix the matter. I have also tried multiple browsers and have the same issue. I have also made sure that it wasnt just an administration issue. It keeps happening no matter what. I am using Google Chrome currently.
--EDIT--
Here is my jsfiddle for those of you who asked (it still does it on there too) this has the full html
http://jsfiddle.net/RCMh7/
Add this to your css.
body { margin: 0px; padding:0px}
Or google "reset.css" and add it into your theme, the Eric Meyer one is fairly popular.
http://www.cssreset.com/
you should put margin-top:0 and margin-left:0 on this divs.
can you show on jsfiddle for us? or a link page?
Use the firebug for firefox tool to check that CSS issue . It might be occurring just due to some background image or CSS file. For all CSS linked to that theme check that theme's .info file also.
Although As per my experience you will able to get exact source of CSS by using firebug .
It may be some background kind of image or CSS effect.
I've been patient with this, it is..
aside{
width: 300px;
margin: 0 10px 10px 0;
padding: 5px;
background-image:url ("images/simple_dashed_#2X.png");
position:relative;
float: right;
height: 800px;
border: solid #002222;
color: #bab1b1;
text-align:center;
}
the images folder is in the same folder as the .html file. I did also try (".../images/simple_dashed_#2X.png") I have also checked and rechecked the name of the picture it's correct capitalization and all. It just shows nothing.
It sounds from your overall level of confusion over the problem that you are not using your Chrome developer tools properly.
You can use the Inspector to determine beyond a shadow of a doubt if the image is not loading, is simply off screen, etc.
Please watch this video where JavaScript's Batman, Paul Irish, explains:
http://www.youtube.com/watch?v=O3W1yuq-ZlE
I guarantee you will be able to solve the problem on your own after watching this video for about 20 minutes.
Image references are relative to the CSS file, not your HTML document. Can you adjust your image path accodingly?
So, if your files are laid out like:
/
page.html
/assets
/CSS
styles.css
/images
simple_dashed_#2X.png
your style should be:
background-image:url ("../../images/simple_dashed_#2X.png");
Replace
background-image:url ("images/simple_dashed_#2X.png");
with
background-image:url("images/simple_dashed_#2X.png");
Get out the space after url, and it should work again.
Js fiddle-> http://jsfiddle.net/niteshp27/XMUmq/
I have this simple fiddle
Here's a screenshot from Chrome Canary:
What am trying to do is adding the following code
.player .controls button.play {
width: 40px !important;
height: 40px !important;
border-radius: 100% !important;
background-color: rgba(23,35,34,.75) !important;
}
but that doesn't work for, any help will be thankful.
Cheers
It has border-radius and background-color. but you can change it. here is the class:
.player .rounded-box {
background: rgba(23,35,34,.75);
border-radius: .5em;
}
note: this is in iframe so, you need to have the style sheet file.
Well after searching I've found the following:
No it can’t.
The iframe in Page A is just a container element which links to the page in iframe B. Thus iframe B will only adhere to the CSS included within its page. There is no way to override this, unless of course they share the same stylesheet.
If we could override the CSS then we’d notice more customized Adsense Ads floating about on the web.
So no luck, thanks for your time.
I'm, styling a hyperlink which has an own class.
.myLink
{
display:block;
padding: 4px 9px;
margin: 0px 6px;
}
.myLink:hover
{
background-color: #E4E4E4;
padding: 4px 9px;
margin: 0px 6px;
color:#000;
}
For the removing, I have this:
.myLink, .myLink:active, .myLink:visited
{
color:#000;
text-decoration:none;
}
In IE everything is working fine, but in Firefox my link gets underlined WHILE clicking on it.
I thought, if I definde the ":active" part, it's going to work, but it isn't.
Help please.
This sounds less like a CSS issue but more like browser preferences/overrides. I'd try to add !important to the text-decoration attribute, but actually looking for the reason would be the even better solution. Best solution would be checking the origin of the style using a tool (IE's developer tools or Firefox' Firebug).
If your are using a CMS or something with pre defined CSS files, it might be a browser specific CSS file causing this, as they will override the main CSS file. Even if you are not using a CMS or something with browser specific CSS files try Firebug in Firefox, this will tell you where in the CSS file the style is coming from and what CSS file is generating it.
www.getfirebug.com
Either use !important or make sure your ".myLink, .myLink:active, .myLink:visited" rules are below in order
I've been sitting here for about minutes trying to figure out why my css background is not showing up on my wordpress blog. All of the other css code works in the style sheet. I can't figure out what's wrong.
Here is the code.
body {
background-image:url('http:/www.itsnotch.com/images/itsnotchbg.jpg');
background-color: #000;
background-repeat:repeat-y;
background-position:top center;
font-family: Arial, sans-serif;
}
It shows up in all other browsers EXCEPT internet explorer.
The url to the background image is wrong: it's missing a / after http:
You're missing a / in your URL. It should be
background-image:url('http://www.itsnotch.com/images/itsnotchbg.jpg');
and not
background-image:url('http:/www.itsnotch.com/images/itsnotchbg.jpg');
Well, you've declared a background-color and a background-image . You need to choose one. By default browsers use the last declaration. So in this case it would be your background-color showing and not your image.
Are you just seeing a black background for this?
try
background-image: url(http://www.itsnotch.com/images/itsnotchbg.jpg);