There is a border around the container which is white in color. I tried the border: 0; rule but it doesn't remove it at all.
EDIT: http://mpkosis28.com
CSS:
#content {
height: 350px;
width: 700px;
margin-left: auto;
margin-right: auto;
border: 0;
text-align: center;
}
#content img {
top: 30%;
left: 50%;
width: 50%;
background: url(../images/awd/boxas.png) no-repeat center;
background-size: cover;
height: 300px;
}
#content a img {
border: 0;
}
<div id="content" align="center">
<h1 class="centeredImage"><img></h1>
</div>
This must work:
#content a img {
border: none;
}
First Set image tag attribute border = 0 in your html file
and in css file change like this.
#content a{
border:none;
outline:none;
}
#content a img{
border:none;
outline:none;
}
If you set the image source in the regular fashion like <img src="..." /> instead of as a background css property it will not show the border. Is there a reason why you need to set it as a background property?
It is just the browser implementation of showing that the src attribute <img> doesn't have valid image link.
Solution for your code:
copy the background url from the css to src attribute of the <img>.
change the <img> to <div>, and adjust it according to your requirements.
Related
I have looked around a lot for a solution to this but I can't seem to find one.
I have an image that I need to display within a certain set of dimensions. It must be no more than 100% of the width of the container: fine. But when I try to faux crop it to 50% of the container; it is scaled.
An example of the 100% width: http://i.stack.imgur.com/WTisJ.png
And an example of the problem when it is set to only 50% of the container: http://i.stack.imgur.com/J01sF.png
The code:
CSS:
.shopcontent{
margin-top: 120px;
}
.product{
margin: 2px;
display: block;
height: 250px;
width: 300px;
border: 2px solid #7f8c8d;
border-radius: 10px;
overflow: hidden;
}
.prodimg{
max-width: 100%;
max-height: 50%; (The problem line!)
border: 0px solid white;
border-radius: 10px;
}
.prodimgcont{
overflow: hidden;
}
HTML:
<div class="shopcontent">
<div class="product">
<span class="prodimgcont">
<img src="http://u.danmiz.net/xqz" class="prodimg"></img>
</span>
<p>This is a test</p>
</div>
</div>
Thanks for any help: I really have tried to find a way of doing this but nothing seems to work!
If I understand your problem correctly you could achieve the desired cropping effect like so:
HTML
<div class="img_container">
<div class="cropper">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQQWvNeCn17lshW3c9Z4PLXlTZe6GPf2oiNrLZQft1nPgld1WYb" />
</div>
</div>
CSS
.img_container {
width:300px;
height:250px;
}
.img_container .cropper {
width:50%;
height:50%;
overflow:hidden;
}
.img_container .cropper img {
width:200%;
height:200%;
}
You use the .cropper div to set the desired 50% width and add overflow:hidden, then set the child img tag to width:200% (100% of grandparent width)
Fiddle: http://jsfiddle.net/6hjL0pat/3/
EDIT:
Updated fiddle with your use case
First of all, your img tag should be self closing. so replace
<img src="http://u.danmiz.net/xqz" class="prodimg"></img>
with
<img src="http://u.danmiz.net/xqz" class="prodimg" />
To your problem. I'd advice you to give the dimensions to the container (change that spanto div by the way) and then assign your image as a background-image, because it is more useful for scaling images, especially with background-size: cover.
HTML
<div class="shopcontent">
<div class="product">
<div class="prodimgcont"></div>
<p>This is a test</p>
</div>
</div>
CSS
.shopcontent{
margin-top: 120px;
}
.product{
margin: 2px;
display: block;
height: 250px;
width: 300px;
border: 2px solid #7f8c8d;
border-radius: 10px;
overflow: hidden;
}
.prodimgcont{
display: block;
max-width: 100%;
height: 50%;
max-height: 50%;
border: 0px solid white;
border-radius: 10px;
background-image: url(http://u.danmiz.net/xqz);
background-size: cover;
overflow: hidden;
}
I created a JSfiddle to show you how to do it.
This is one way to do it.
Let me know if you absolutely need to use an img tag. There is a solution for that too. In any case: you need to assign the dimensions you want to the container of the image, not the image itself - because the image needs to be cut off.
Please note, that background-size: cover won't work in IE8 and lower, unless you use a polyfill.
I have a tricky question. Might funny to some people here.
I am trying to overcome html img and use image via css background property.
So, Code is simple:
<a id="logo" href="/"><img src="/logo1.png"></a>
CSS
position: relative;
height: 85px;
width: 200px;
background: url(/logo2.png) no-repeat;
background-size: 200px 200px;
So, I want logo1 from html removed and css image logo2 overtake logo1.
NOTE: No extra divs and classes, Only with that html markup!
Tried everything but i think this is impossible?
Remove the img with display: none and use display: block/inline-block/table-cell to get your height and width.
In this example the red <img> is being removed and replaced with the yellow CSS background image.
Example!
HTML
<a id="logo" href="/"><img src="http://www.placehold.it/200/FF0000"></a>
CSS
a {
position: relative;
height: 85px;
width: 200px;
background: url(http://www.placehold.it/200/FFFF00) no-repeat;
background-size: 200px 200px;
display: block;
}
a img {
display: none;
}
If you want to hide the img tag and replace it with the background image. Use z-index and remove position:relative; from the link and apply it to the img instead. Add display:block; to the link and give it fixed dimensions.
HTML
<h2>Your actual code:</h2>
<a id="logo2" href="/"><img src="http://www.placehold.it/100x100" /></a>
<br>
<h2>You want to hide the img tag and replace it with the background image. Use z-index and replace position:relative; and apply it to the img instead.</h2>
<a id="logo" href="/"><img src="http://www.placehold.it/100x100" /></a>
CSS
#logo, #logo2{
height: 100px;
width: 200px;
display:block;
background: url(http://www.placehold.it/100x100) no-repeat;
background-size: 200px 100px;
z-index:2;
}
#logo img{
z-index:-1;position:relative;
}
DEMO http://jsfiddle.net/a_incarnati/stkrj9eq/
If you want to hide the img, you can use several techniques, also using opacity, visibility:hidden, display:none; etc. Depends what you are trying to achieve.
How do I get a div background image to show above a img html tag. The reason for wanting to do this is for a semitransparent texture that overlays rotating images in a banner. I don't want to have to cut the texture with the image each time. That way adding/updating images in the future would be faster. I have tried the advice given in this post, but did not seem to work: CSS show div background image on top of other contained elements. Thanks for any help.
html:
<div id="sliderFrame">
<div id="slider">
<span id="slider-background">
<img src="/_images/rotating-banner/001.jpg" />
</span>
</div>
</div>
CSS:
#sliderFrame {position:relative;width:850px;margin: 0 auto;}
#slider {
width:850px;height:470px;/* Make it the same size as your images */
background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
}
#slider-background{
position:absolute;
background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
width: 850px;
height: 470px;
z-index: 100;
}
link to live site: http://lltc.designangler.com/
try:
HTML:
<div id="wrapper">
<div id="img"></div>
<div id="overlay"></div>
</div>
CSS:
#wrappaer{display:inline-block; position:relative; width:100px; height:100px;
box-shadow: 0px 1px 5px #999999;}
#img{display:block; position:absolute; z-index:1}
#overlay{display:block; position:absolute; z-index:2
opacity:0.3;
filter:alpha(opacity=30); /* For IE8 and earlier */}
make sure to adjust wrapper,img and overlay sizes, add your images etc'.
have you tried setting the opacity of the div element?
Edit:
After rereading your question, I believe this may not be what you're looking for. Have you tried explicitly setting the z-index of the slider element in the CSS as well?
I finally solved the issue by using an img of the background inside a div instead of making it a background image. My updated code is below:
<div id="sliderFrame">
<div id="overlay"><img src="/_images/marqueeLayout/MarqueeTexture.png" /></div>
<div id="slider">
<img src="/_images/rotating-banner/001.jpg" />
</div>
</div>
CSS:
#overlay{
display:block;
position:absolute;
width: 850px;
height: 470px;
z-index: 2;
}
The background image, as its name suggest, can never be in front of the child elements. Therefore, you will need to rely on absolute positioning to overlay that background image over the slideshow:
#sliderFrame {
position: relative;
width: 850px;
margin: 0 auto;
}
#slider {
width:850px;
height:470px;
background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;
box-shadow: 0px 1px 5px #999999;
}
#slider-background {
display: block;
position: relative;
width: 850px;
height: 470px;
z-index: 100;
}
#slider-background:before {
background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
content:"";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
}
#slider-background img {
display: block;
}
I have chosen to use a pseudo element that is positioned absolutely over the #slider-background element itself, and it is stretch to the element's dimension by setting all four offsets to 0. Remember that you will also need to declare the #slider-background and its child <img> element as block-level elements.
http://jsfiddle.net/teddyrised/XJFqc/
I can't remove border from my images. I've tried many times with different atributes. Still see white border. If you have any suggestion what causes the problem - please explain to me. I'm kinda newbie.
<head>
<style>
img{
border : none;
text-decoration: none;
}
#forum
{
background:url(forum_button.png) 0px 0px no-repeat;
width: 300px;
height: 81px;
}
#forum:hover
{
background:url(forum_button.png) -300px 0px no-repeat;
width: 300px;
height: 81px;
}
#facebook
{
background:url(social_buttons.png) 0px 0px no-repeat;
width: 29px;
height: 29px;
}
#facebook:hover
{
background:url(social_buttons.png) 0px -33px no-repeat;
width: 29px;
height: 29px;
}
#twitter
{
background:url(social_buttons.png) -31px 0px no-repeat;
width: 29px;
height: 29px;
}
#twitter:hover
{
background:url(social_buttons.png) -31px -33px no-repeat;
width: 29px;
height: 29px;
}
</style>
</head>
<body style="background:url(landing.png) no-repeat top #111111; width: 1280px; height: 1024px; border:0;">
<img id="forum" />
<div id="social">
<img id="facebook">
<img id="twitter">
</div>
It's because an img tag MUST have a src="" with a proper link otherwise it will be showing the image as a background like in your case (because of the css on the img) and a broken image on top of it
="#"><img id="facebook"></
It's not a border, what you see is the broken image border.
If you want to keep your code, change the img tag to a div..
Change
border: none;
to
border: none !important;
This way it will override all the parent's declarations and thus has to work.
That's probably because you have no src attribute on your img tags. I'd reccommend using transparent pixel as src in your case.
Insert Image by using img src with proper height and width.
Use Paint or other tools to edit image.
example.
make sure that your original image dont have any border, if it have simply select and crop the image.
maybe the border is not html given but its in your img ?
So open your image in an image program tool like photoshop and zoom to the places where the border is and have a look, if there is a border or not.
You are trying to set an icon image on a link using a background image that can be repositioned on a hover event.
The simplest way of doing this is as follows.
The HTML can be as simple as:
<a class="test" id="test" href="#"></a>
and apply the following CSS:
.test {
background: beige url(http://placekitten.com/50/50) center center no-repeat;
display: inline-block;
width: 50px;
height: 50px;
border: none;
}
Apply the background image on the link (a tag) instead of an img tag, which is not needed.
See demo at: http://jsfiddle.net/audetwebdesign/qAeHL/
Basically, I have some nice navigation button .png's given to me from a friend and a header/banner.jpg. I want to put these .png's on top of the .jpg banner. The problem is that I'm using a css rollover function (for the navigation buttons) that requires me to use position: relative for the divs that contain the individual navigation buttons. Otherwise the rollover function gets hairy in Opera. How would I be able to accomplish this?
Here's some code for the css (for the navigation buttons):
.cssnavabout { background: url(navigation/about_on_over.png) no-repeat; white-space: nowrap; display: block; height: auto; width: auto; float: left; position:absolute; top: 55%; left: 50% }
.cssnavabout a { display: block; color: #000000; width: auto; height: auto; display: block; float: left; color: black; text-decoration: none; }
.cssnavabout img { width: auto; height: auto; display: inline; margin: 0px; border-style:none }
.cssnavabout a:hover img { visibility:hidden }
And the HTML partition (for the navigation buttons):
<div id="csswrapper">
<div class="cssnavabout">
<img src="navigation/about_on.png" width=100 height=50 />
</div>
Heres the CSS for the header/banner:
#header { width: 1024px; height: 109px; position: relative; margin:0px; background-color:#FFFFFF; }
And the HTML for the banner:
<div id="header">
<img src="images/banner_about.jpg" width="100%" height="109" /> </div>
I'm sure this is easily solvable. Sorry, this is my first website.
How do I put an image on top of an image without using absolute positioning?
Like so...
<div style="background: url(image.png) no-repeat">
<img src="image2.png" alt="" />
</div>
Seems to be a case of z-index: http://www.w3schools.com/Css/pr_pos_z-index.asp
But you can give absolute position to the anchor that contains the png button which should do the trick.
#csswrapper a{
position:absolute;
top:20px; //edit
right:20px; //as needed
}