I am a newbie. I'm finding it hard to add background image to a box element. I've tried resetting the code, moving it to a new folder, resizing the image and changing the class but nothing works. The image doesn't show in the box When I inspect the element on Chrome, it says error file not found.
This is the CSS below
.static-width{
width: 300px;
height: 300px;
background-color: #606060;
background-image: url(Images\millylogo.jpg);
background-repeat: no-repeat;
background-position: center;
}
I think your path is not wright. You must to put the right path (absolute or relative) into the property. You should create a repository with your project and put all your files into it.
A good documentation here
Related
I just trying to solve the problem.
CSS:
.default-img > img {
height: 100px;
width: 100%;
background: url('bg.png');
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
border: 10px solid black;
}
I have a white "Border" (Inner Border?) in the Image tag and i cant remove it.
The Black Border is set manually to show you the Problem and the Red Content is the included image.
How can i remove the white inner border from img tag
Open up a image editing software. Re-crop / re-save your source image
being rendering from 'background: url('bg.png');' background
property. So, the 'bg.png'.
Another thing you can do if you don't want to do above. Nest another
<div> around your initial .default-img <div> and set the
heights and widths to crop out the white. Make sure to set property
overflow:hidden;
In some rarer cases a white line or (outline) can be induced around
elements as a browser quirk. Test your element across browsers (and
maybe even devices too) to target if it's something browser
specific. Then target that browser and remove. ie. outline { none; }
Hope this helps, g'luck!
The img creates that border when you have a background but not a source.
To solve this issue move that background to a div :)
is it possible that that white border exists in the image itself, not in css? view the file on the black background and check.
Looks like you are showing two images there at 100%, both the source image and the background image. Do you need the background image? Could that cause the white line?
So I just started out with the Ionic Framework. And I am trying to add a background image. But when I run the application in the browser, I don't see the image. In my console I get a 404 error. I believe my path is correct. I followed this tutorial after I was not sure if my css was correct. Which is basically the same as I have got. So does anybody know what the problem is exactly?
Part of my html code is the following:
<div class="logo"></div>
And my css is the following:
.logo{
background-image: url('../img/logo.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 80%;
height: 246px;
margin: auto;
z-index: 2;
position: relative;
}
Some problems can occur with just using 'background' in CSS, especially when the container doesn't have any other contents.
Try the following:
Adding display: block; with a Width and Height set, this can override any inherited display settings.
Reduce the amount of CSS to troubleshoot, sometimes you've just missing a small part, that has moved or hidden the actual container
IF all else fails, do it step by step on JSFIDDLE and when it continues to work as required, try copying it over. This also helps you learn
I am having a problem displaying the following image on the webpage. I think it's a coordinates issue.
I think if i twitch the -397px -85px i should be able to display the image. However, even after twitching it i was not able to get it displayed. Can someone please help me out here.
image icon
The code, found from firebug.
There seems to be a problem with the image you have posted. Especially relating to the dimensions and placement of individual sprites.
See the snippet below on how the background-position plays with this images sprite:
i.phone {
display: inline-block;
background-image: url(http://i.stack.imgur.com/kyVhA.png);
background-position: -63px -3px;
height: 52px; width: 51px;
}
i.phone:hover {
background-position: -70px -77px;
}
<i class="phone"></i>
Here is sample fiddle for you
#test {
background: url('http://i.stack.imgur.com/kyVhA.png') 0 0 no-repeat;
height:100px;
width:100px;
}
Demo Fiddle
As MR green mentioned you coordinates are out of range
also note that local host point and try giving the relative path to the image.
Try this...
i.phone
{
float:left;
height:56px;
vertical-align:middle;
width:56px;
background:url(http://i.stack.imgur.com/kyVhA.png) -65px -75px no-repeat;
}
The url you provided for the image is:
http://localhost/WEBSITE/images/img-sprite2.png
Which is mentioning localhost. So, I am sure that your code will work in localhost but not on actual website. Try to use relative path instead of absolute path.
And also, the image you provided has dimensions 126px X 133px and you are pointing the coordinates outside of the image i.e 397px X 85px as shown in your post.
If you have provided excerpt image from your actual image then let me know.
[Note]: Also tell the designer to provide images in scaled layout fashion. It seems, the images are provided in hurry placing not exactly below or side of an icon. I hope you understood my point.
are you sure are you assigning the path is correct ?? if yes then give height and width on that element where you want to display the images and also display:block try this
try add: display: block;
if element is not a block element then height and width are ignored
I have a problem which has me stumped. I have it simplified down to this. The relevant (only) CSS style is:
#segment1,
#segment2 {
width: 16.6667%;
height: 100%;
float: left;
background-image: url(../XYZ-TEST/1alt.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top left;
}
and the relevant test HTML is:
<div id="segment1">Segment one</div>
<div id="segment2">Segment two</div>
So you think you'd get two identical divs side by side, with the same background image - except when it is rendered, the background image ONLY appears on the first occurring . The problem appears to be on the rendering, not the code. If I put the HTML for segment2 first, that one gets the background image and the other one doesn't. Other CSS seems fine, just the background image fails. The path to the background image is fine.
It looks like a problem within CSS with defining multiple background images, but I can't find any other problem like it mentioned on the web. Tested in both Chrome and FF. I've ruled out a stray semi-colon or similar, because both are defined simultaneously. Can you see anything I've missed ?
Remove background-attachment:fixed from css. It should solve your issue.
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/256/
#segment1, #segment2 {
width: 16.6667%;
height: 100%;
float: left;
background-image: url(http://www-mtl.mit.edu/img/bg_01.gif);
background-repeat: no-repeat;
background-position: top left;
}
Explanation: If a background-image is specified, the background-attachment CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
So, I have this:
.cmon
{
background-repeat: repeat-x;
background-image: url("line2.png");
position:absolute;
bottom:0px;
}
What it should do, is put the image (line in this case) on the bottom of the page, from what I understand, and repeat it. It does put it on the bottom, but doesn't repeat, anybody knows what's my problem?
This is how it looks like when the code is on:
http://goolag.pw/temptest.html
Also, in the menu (top right corner) the image doesn't even show up, nor does is it on the bottom.
I will be more than happy if anybody knows whats the problem.
(sorry if links are not allowed here, there are no commercials on the web, it's really just to show what's the problem)
To position background images you should use the background-position property:
.cmon {
background-repeat: repeat-x;
background-image: url("line2.png");
background-position: bottom;
}
The background-position CSS property sets the initial position, relative to the background position layer defined by background-origin for each defined background image.
You'll need to ensure your element has some height and width, however, as background images are not content and do not affect the size of the element.
So first, your problem is not only about CSS but HTML too. You have to attach your attribute .cmon on another tag like <span>, <p>or even <div>.
<div class="cmon"></div>
Then for your CSS :
.cmon {
background-repeat: repeat-x;
background-image: url("line2.png");
position: absolute;
bottom: 0px;
left: 0px; right: 0px; // For having a full width bar
z-index: 999999; // Will be always visible, even when the menu is showed up
height: 4px; // attribute the height of your image
}
Hope this help you.
Ps : Don't forget to use HTML5 !