Can't view embedded .jpg in html/php website - html

I have a php/html website on my home server that has several embedded .jpg images in the style.css file I can view the website fine from the computer that is running the server but when I try to access it from another computer on my network I can't see the images I get a red x inside of a little box.
Any ideas?
Thanks,
#wrapper {
width:400px;
height:600px;
background-color:#3CF;
margin:0 auto;
background-image:url(wrapper.jpg);
background-repeat:no-repeat;
}
#registerwrapper {
width:400px;
height:600px;
margin:0 auto;
background-image:url(register.jpg);
background-repeat:no-repeat;
}

try using an absolute path to the images. As it stands you're storing the images in the same location as you are storing your CSS

Related

Large space under my slick.js slider

I'm trying to implement a slider for a website that's meant to have deconstructed background images with super imposed text. However, loading the text into the slider creates a big white space, which I'm looking to get rid of. The HTML says its an issue in the .slick-track style.
here's a js fiddle link: https://jsfiddle.net/bwu778/7dyhgzgf/
css:
#container1{
position: relative;
}
#image{
position:absolute;
}
#text1{
z-index:100;
position:absolute;
color:#4D2E82;
left:22%;
font-weight:bold;
margin-top:12%;
padding-bottom: 2em;
}
#text2{
z-index:99;
position:absolute;
background-color: #FFFFFF;
color:#4D2E82;
left:25%;
margin-top:20%;
}
Thanks!
I pasted your fiddle into my localserver and got a white space as well. Upon further inspection, it seems there are numerous issues. To name a few things to check:
make sure you install the slick-theme.css locally since your link
reference is listed as such <link rel="stylesheet" type="text/css"
href="slick/slick-theme.css"/>
The initializer function on their website is erroneous
The encoding messages are on their end, which they are probably aware
of because utf-8 is sprinkled liberally in one document
use the actual jquery cdn files or add the http to the ones from
their website in case you copied them directly
Not sure how imperative it is for you to continue with Slick but judging from the syntax and the 645 open issues, I recommend perusing the closed issues for some answers

pie.htc not fixing css3 issues

I have the PIE.HTC in the root directory and trying to make rounded corners work in Internet Explorer
This is my CSS
#credits-earned
{
border-style:solid;
border-width:2px;
border-color:#EDEDED;
width:170px;
height:60px;
margin-bottom:10px;
font-weight: bold;
border-radius:8px;
behavior: url (PIE.htc);
}
The HTML this is trying to take effect on is:
<div id="credits-earned">
You need to earn X<br> more credits today to avoid losing credits
</div>
However the rounded corners are not working in IE.
Any help be appreciated.
when including a resource in a external css file the URL is relative to the css file.
if you want to include something from a different directory you could use a relative path (example behavior:url('../PIE.htc')) or use a absolute path (example behavior:url('/PIE.htc'))
for more on path's in stylesheets - Using relative URL in CSS file, what location is it relative to?
Apart from the proper path for pie.htc to work, give:
#credits-earned
{ position: relative;
}

Overlay HTML5 canvas over image

I want to have an image which is uploaded from my database and on top of it the exact same size in the same position is a HTML5 canvas.
Most of the solutions I have found I have been using JQuery/JavaScript, however I want a similar solution if possible just using CSS3 as the images are being outputted from a database and there can be more than one image on the page and each image will have a canvas.
How can I achieve this?
Yes.
You can do this entirely in CSS, but you will have to add some specific HTML plumbing for each image.
If you ever get tired of the extra plumbing, javascript could do most of the plumbing for you.
Here is a Fiddle of the CSS-only version:
http://jsfiddle.net/m1erickson/g3sTL/
The HTML:
<div class="outsideWrapper">
<div class="insideWrapper">
<img src="house-icon.jpg" class="coveredImage">
<canvas class="coveringCanvas"></canvas>
</div>
</div>
Of course, in your version, you would replace the image src with your dynamic database call to fetch the image.
The CSS:
.outsideWrapper{
width:256px; height:256px;
margin:20px 60px;
border:1px solid blue;}
.insideWrapper{
width:100%; height:100%;
position:relative;}
.coveredImage{
width:100%; height:100%;
position:absolute; top:0px; left:0px;
}
.coveringCanvas{
width:100%; height:100%;
position:absolute; top:0px; left:0px;
background-color: rgba(255,0,0,.1);
}
Possible duplicate.
Depending on how many images are in the database, you could have a separate canvas id for each with the name of the image file (e.g. canvas #foo { background:url(foo.jpg) }). I would load this in a separate stylesheet. :)
It would probably be easier to maintain a Javascript solution though if your database is dynamic. A few lines of javascript would be sufficient, instead of constantly updating a stylesheet with new names. Less error typo prone as well.

why is the background image not showing here?

okay, i have no idea why this isn't working at all. it seems like my code is the way it should be, can someone show me why my background image isn't showing correctly?
http://imgur.com/V6X4u
body {
font-family:arial;
font-size:14px;
background-image:url('worn_dots.png');
background-repeat:repeat;
}
For some reason, when I replace the URL with a web address, the background shows, but like this it doesn't.
Your Background image is forbidden see this, its working
DEMO
EDITED:
According to your screen shot your css is inside in css folder, so path your image in css like this:
background-image:url(../worn_dots.png)
As your image is present at root folder and css is prenst in css folder, so use ../ to relate your image in css
you should call the like mentioned below code:-
body {
font-family:arial;
font-size:14px;
background:url('http://i.imgur.com/RECGP.png') repeat 0 0;
}
Its working fine now check :- http://jsfiddle.net/hWvCK/2/
Your CSS is invalid:
http://i.imgur.com/RECGP.png
body {
font-family:arial;
font-size:14px;
background-image:url('http://i.imgur.com/RECGP.png');
background-repeat:repeat;
}
just remove the out of place url:
body {
font-family:arial;
font-size:14px;
background-image:url('http://i.imgur.com/RECGP.png');
background-repeat:repeat;
}
Also the image you are using is being blocked when requested with certain refer headers.
The image itself can be accessed fine: http://i.imgur.com/RECGP.png
On JSBin the image is not blocked: http://jsbin.com/ixibot
Yet as part of a JSFiddle page it is blocked: http://fiddle.jshell.net/hWvCK/2/show/
Seems this is not only confined to JSFiddle ( http://forumserver.twoplustwo.com/55/about-forums/imgur-being-blocked-1184548/index2.html#postcount32237568 )

flash file on an image in html

I am trying to place a flash file on an image at a specific location. how can i do this?
i tried something like this
<img src="images/logo.jpg"/> <object classid="homelogo"><embed src="images/logo.swf"></embed><object>
bit it did not work. how can i overlap a flash file on top on an image at a specific location?
Thanks.
One way of trying this,
div#logo {position:absolute; left:100px; top:300px; z-index:2; width:100px; height:100px; background-image: url('images/logo.jpg');}
Add your flash component to div.