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/
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 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 am trying to display images within a table cell with css. This is what I have:
HTML:
<td class="activity-status status_not_started">Not Started</td>
CSS:
td.activity-status {
font: 0/0 a !important;
color: transparent !important;
width: 80px !important;
padding: 0 !important;
}
td.status_major_issues:after {
content: url(/sites/ih/Style%20Library/org-ih/img/status_major_issues.png) !important;
}
In the browser, when I visit
http://myspsite/sites/ih/Style%20Library/org-ih/img/status_major_issues.png
The image is shown just as expected.
However, in the web page after the css is applied the image appears broken.
The path to the page is:
http://myspsite/sites/ih/46/Pages/status.aspx
The path to the css file is:
http://myspsite/sites/ih/Style%20Library/ih-status/css/style.css
Anybody an idea what could be going on?
Thanks!
Eric
Your css is probably in a separate directory thus the path to the content should be like
content: url('../sites...')
You have to move up one directory, because the path is taken from where the css file is, not where the scripts of the page are.
I have rails 3.2.9 and I want to put a background image. my image is found in the folder: public/images and I put it also in the folder: assets/images.
ul {
height: 200px;
width: 350px;
border: solid 1px blue;
margin: 0 auto;
padding: 0px;
background-image: url('/images/todo.png');
}
but there is no backgound image.
please help.
I have to put:
background-position: center;
so my code is:
background: url(/assets/rsz_todo.png) no-repeat;
background-position: center;
and my image is found in assets/images
A simple way to check (before you edit your css) is to enter the path in the browser. This way your are sure what the path should be.
Your app/assets/images folder maps to:
http://domain/assets/
So if you have a app/assets/images/logo.png you should be able to retrieve that in your browser like:
http://domain/assets/logo.png
Then, in your CSS you should be able to refer to your logo.png like:
// app/stylesheets/application.css
body {
background: url(/assets/logo.png) no-repeat;
}
Also have a look at the Rails asset Pipeline:
http://guides.rubyonrails.org/asset_pipeline.html
In case this helps anyone finding this...Rails provides helper methods for referencing an asset in your CSS or SASS file:
background-image: image-url("rails.png")
Turns into...
background-image: url(/assets/rails.png);
Why don't you try just :
background: url(image.png)
The asset-pipeline is made up for simplicity.
If you put your image in assets/images then when calling that image you should use
background-image:url("/assets/image.png");
or you could try
background:url("/assets/image.png");
And sometimes i have found using background rather than background image works better, but that is just personal experience
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);