i have div take css class
.headbg01
{
background-image: url(../images/header_background01.jpg);
border-left: #cccccc 1px solid;
background-color: #ffffff;
width: 920px;
background-repeat: no-repeat;
height: 160px;
border-right: #cccccc 1px solid;
}
its working great in ie
the problem is the bg image doesn't appear properly in firefox
here is the ie div view
alt text http://img341.imageshack.us/img341/3595/35520026.jpg
and here is the firefox div view
alt text http://img641.imageshack.us/img641/950/31289427.jpg
i don't know whats wrong is it the height or what?
please i need some help
You may need to supply the background-position, try this:
.headbg01
{
background: #fff url(../images/header_background01.jpg) no-repeat top left;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
width: 920px;
height: 160px;
}
try declerating a strict doctype that should do the job
It appears that one browser is stretching the height/width to fill the div without keeping the image's height/width ratio, whereas the other is using the image's dimensions to scale it properly.
Make sure your image and your div have the same dimensions, minus the 2 extra pixels for the left and right border.
EDIT:
After closer inspection, it appears that the top of the second image is being cut off. Try specifying background-position: top left;.
Related
I would like to draw a border around an image with no visible gap between the image and the border.
img{
display: block;
border: 1px solid black;
}
<img src="https://files.catbox.moe/r099uw.png">
Result of above snippet in Chrome (Version 84):
There is a small gap between the image and the border to the right and below the image.
The answer to this similar question suggests setting display: block on the image, but this does not seem to solve the problem in this case. Based on other answers I have also tried vertical-align:bottom, padding:0, margin: 0; adding width/height, but all to no avail. Increasing the border to 2px gets rid of the gap, but is not an ideal solution.
I tested the above snippet in Chrome, Firefox, and Microsoft Edge. It displays without a gap in Firefox, but with a gap in Chrome and Edge.
How can I create a bordered image that displays consistently without a gap across all platforms?
It appears that adding box-sizing: border-box; as well as a specific height solves the problem in Chrome and Edge.
img{
border: 1px solid black;
height: 16px;
box-sizing: border-box;
}
<img src="https://files.catbox.moe/r099uw.png">
If anybody knows a better solution, or why this is necessary, please let me know.
Edit: This solution is not perfect, as the gap can reappear depending on the position of the image. For example:
img{
border: 1px solid black;
height: 16px;
width: 16px;
box-sizing: border-box;
position: relative;
left: 1px;
}
span{
border: 1px solid red;
}
<span>
<img src="https://files.catbox.moe/r099uw.png">
</span>
Result in Chrome (zoomed in for detail):
You can fix this with css styling. This is what we can do, let's define a css class or id with desired width and height that you would like to have for image. Now use your image as background for defined div or class. Stroke/Border effect can be done by giving border to defined class or id. Once you're done you can adjust your image by making some changes to background-size. That will make you image zoom in or zoom out. So you can easily cover up the gap for any image. Here is the code
HTML :
<div id="image"> </div>
CSS :
#image {
display:inline-block;
width:30px;
height:30px;
border:1px solid #000;
background-image:url(TOn2E.png);
background-repeat:no-repeat;
background-position: center;
background-size: 150%
}
For adjusting image you can make changes to background-size in percentage.
try this:
img {
outline: 1px solid black;
}
<img src="https://files.catbox.moe/r099uw.png">
Also, if necessary, try to append outline-offset, like outline-offset: -1px;
Been working on this for days and cannot seem to resolve it.
I have this:
<div class="outer-border">
<div class="grid-layout">
<div class="grid"></div>
</div>
</div>
For the outer-border I have a roman-styled border which is 60 px on top and bottom and 100 px on left and right.
I want to add a background-image to the grid-layout and make it cover the content part and part of the border.
Is there anyway to position the background-image properly for this case?
Right now I get:
Where I used background-size: cover; which works vertically but not horizontally and is not responsive.
My css:
.outer-border {
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-image: url($outer_no_top) 23% 15% 23% 15% repeat;
background-image: url("theme/matrix-marble.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: right
}
Right now the background is only a .jpg, but I have tried different formats but still cannot handle the positioning.
I got it to work in a good way by putting it as a background to the grid-layout, then I had to work with positioning, z-index and negative margins to put it behind the border. This led to the links inside the grid to become unclickable.
Totally stuck right now, any clues?
/David
UPDATE
JsFiddle:
https://jsfiddle.net/bcn42gvm/1/
Hi I had a go with a generic png image. If you specify overflow:hidden; in the grid class, it seems to work. Here is a JSBin - output and code
I was wondering if there is anyway to make the background image in a div expand to the border.
Let's say I have a div with a background and a border. I want to make the background image in the div expand over the border so it kind of looks like there is no border at all(I know there's no point for this but I need to know how to do it for something I'm working on).
Maybe something like this code:
#myImage {
height: 200px;
width: 500px;
background-image: url("image.jpg")
background-repeat: no-repeat;
border: 0px solid black;
overflow: hidden;
}
i am working on an image hosting website, and for some reason the images in the gallery overflow their maximum width border
max-width: 495px;
full CSS:
.imagebox{
border: 1px solid gray;
height: 495px;
width: 495px;
background-color: #ffffff;
text-align: center;
line-height: 495px;
}
.image_container img {
vertical-align: middle;
max-width: 495px;
}
screenshot of how the overflowing images look:
Also, anyone has any tip on how to remove those annoyimg default image borders?
Thank you for taking the time on reading my post, any help will be gladly appriciated.
You can remove image border in css img {border:none, outline: none;}
Have you tried reducing the max-width slightly to see what happens? (Maybe to 485px)
For removing the borders, I am not sure how many images you are working with but you could always go the old-fashioned route - open it up in an image editing program and downsize it from there :)
I think the problem is the picture's border. The picture's width is 495px, as you set, but it's right border goes over the max-width and the left border pushes the image even more to the right. If the border is 1px, make the pic's width to 493px.
About how to remove them, I don't understand your question because you set the border to "1px solid gray". try setting "border:0;".
Hello i am looking for solution to do that:
http://www.delightfulwoman.pl/depilacja-laserowa/
When you click on the link on the left, the text changes inside right box...
I just want to know how to make that CornerRounded SemiTransparent div background, with scrollbar NEXT to it, not inside it.
You would say i can look into source file, but i am not that good at CSS, and i cant see transparency or opacity there :s or anything similar.
This website is using an image as the background for that DIV. They are using a PNG file which supports transparency. So in the CSS for the DIV (.o_right_cont) they are using an image of a rounded and translucent box instead of any fancy CSS.
On the inside of that DIV they have another DIV (.ofe_desc). They set the overflow to auto so that way the scrollbar would appear when the content is larger than the DIV.
.o_right_cont {
background: url(gfx/cennik_bg.png) no-repeat;
width: 670px;
height: 420px;
float: left;
margin: 10px 0px 0px 30px;
text-align: left;
padding: 10px;
}
.ofe_desc {
width: 662px;
height: 400px;
text-align: left;
overflow: auto;
line-height: 15px;
padding: 8px 30px 8px 8px;
}
Let me know if you have any questions.
Kind Regards,
- Chris