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.
Related
I'm taking a course on Udemy and I've followed what it shows in the lesson and even asked in discord but haven't received a solution.
The background image I used from the web using a image URL works, but when I try to link an image saved on the same folder as the CSS and HTML files nothing happens. All I get is a blank white background instead of an image. I'll be adding screenshots.
https://imgur.com/gallery/C4468Kb
body {
background-image: url(starwars.jpg);
background-size: auto;
}
h2 {
color: red;
text-align: center;
border: 5px solid purple;
cursor: crosshair;
}
p {
color: pink;
}
p {
color: green;
}
li {
list-style: none;
display: inline-block;
}
Try background-image: url('starwars.jpg');
Check the file path for the image and make sure it reflects what is being written in your url() css. Right now you are showing that image is located in the root directory of your project. If the image is not in the root directory, say for example it's in a folder called "images" in your root, then the url should read url('images/starwars.jpg').
It would be good practice to put any image you want to use in your site in a folder named "images" inside your root directory anyway. Try that, and see if it works.
So just to clarify: create a new folder inside the root folder of your project. It should be on the same hierarchical level as your index.html file. Take the image, where ever it is, and place it inside that new images folder. Change your css to say
background-image: url('images/starwars.jpg');
I am trying to create a simple landing page and my css backrgound-image is not loading.
This is the code I'm using
landing_container {
display: inline-block;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.6);
background: url("http://www.livingwatersshop.com/blog/wp-content/uploads/2016/09/Landing-Page-Background.jpg") 50%;
background-size: cover;
}
I tried local path, folder with relative path, with a ', with a ", but nothing loads.
When I check in the live editor here: http://scratchpad.io/selfish-education-2788
I can see the background no problem (I put in the full url) but when I upload to my website it still won't load.
I've tried chrome and firefox, deleted caching.
This is the link to the website: http://www.livingwatersshop.com/landy/index.html
Thanks in advance,
Maayan
<landing_container> is a very bad custom tag. However, I see your problem that you are not shared here in your question, the problem is that your CSS files start with a <style> tag. That's totally wrong!
You have:
<style>
landing_container {
......
}
</style>
Just remove <style> and </style> from the CSS files. That tags are only to include CSS inside an HTML file.
When you remove that, your code will run perfectly.
Edit:
I attach an image to demonstrate that if you remove that tags the background will show:
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.
How can i add a image background to my website?
body {
margin: 0;
background: url(background.png);
background-size: 1440px 800px;
background-repeat:no-repeatdisplay: compact;
font: 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
I did that much but nothing shows up on my page. I'm a CSS beginner.
Updated:
body {
margin: 0;
background-image: url(.../img/background.jpg);
background-size: 1440px 800px;
background-repeat:no-repeat;
display: compact;
font: 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
Put the background url in quotes.
It should be background: url('background.png');
See here for working demo.
You also have an issue with the background-repeat line missing a semicolon in between two statements. If your background is really tiny you won't see it because of that issue.
Just to update on the solution, among the other issues, the background file was being refrenced with .../background.jpg when it should have been ../background.jpg (2 dots, not 3).
isn't the problem the following line is incorrect as the statement for background-repeat isn't closed before the next statement for display...
background-repeat:no-repeatdisplay: compact;
Shouldn't this be
background-repeat:no-repeat;
display: compact;
adding or removing quotes (in my experience) makes no difference if the URL is correct. Is the path to the image correct? If you give a relative path to a resource in a CSS it's relative to the CSS file, not the file including the CSS.
Is your image on the same folder/directory as your css file? If so, your image url is correct. Otherwise, it's not.
If by any chance your folder structure is like so...
webpage
-index.html
-css
- - style.css
- images
- - background.png
then to reference the image on your css file you should use the following path:
../images/background.png
So that would be background: url('../images/background.png');
The logic is simple: Go up one folder by typing "../" (as many times as you need). Go down one folder by specifying the folder you wish to go down to.
Adding background image on html, body or a wrapper element to achieve background image will cause problems with padding. Check this ticket https://github.com/twitter/bootstrap/issues/3169 on github. ShaunR's comment and also one of the creators response to this. The given solution in created ticket doesn't solve the problem, but it at least gets things going if you aren't using responsive features.
Assuming that you are using container without responsive features, and have a width of 960px, and want to achieve 10px padding, you set:
.container {
min-width: 940px;
padding: 10px;
}
If you add the following you can set the background colour or image
(your css)
html {
background-image: url('http://yoursite/i/tile.jpg');
background-repeat: repeat;
}
.body {
background-color: transparent;
}
This is because BS applies a css rule for background colour and also for the .container class.
And if you can't repeat the background image (for esthetic reasons),
then this handy JQuery plugin will stretch the background image to
fit the window.
Backstretch
http://srobbin.com/jquery-plugins/backstretch/
Works great...
~Cheers!
body {
background-image: url(your image link);
background-position: center center;
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
background-color: #464646;
}
For more modularity and in case you have many background images that you want to incorporate wherever you want you can for each image create a class :
.background-image1
{
background: url(image1.jpg);
}
.background-image2
{
background: url(image2.jpg);
}
and then insert the image wherever you want by adding a div
<div class='background-image1'>
<div class="page-header text-center", style='margin: 20px 0 0px;'>
<h1>blabaaboabaon</h1>
</div>
</div>
The problem can also be the ordering of your style sheet imports.
I had to move my custom style sheet import below the bootstrap import.