The code below is a link which has a class through which I want to add a background image. I am not able to display background image however same code sets background color correctly so what I am missing here? I don't want to use <img> tag inside link because I want to change background image on hover.
.dropbtn{background: url(http://images.freeimages.com/images/previews/356/cubes-1425949.jpg) 50px 50px no-repeat;}
<a class="dropbtn">image</a>
See Clearly i used class and in css,me use background-image.It is not necessary to do 1 thing from only one method.there are many options to do any anything
You can try this way.Wrap the <a> with a div then style below this way.Hope this will help you.
.hello {
width: 100%;
background-image: url(http://images.freeimages.com/images/previews/356/cubes-1425949.jpg);
height: 700px
}
<div class="hello"><a class="dropbtn">image</a>
</div>
You are showing 50px 50px
Is your link 50px heigh?
My guess is that you should start with 0 0 and see where the image is. Is there a lot of transparent or white space on the canvas so the actual image is not in view especially with the 50px right and top positions added also?
Add height to your link and remove the image positioning by using left top.
you are using wrong class for css
use below code
.dropbtn{background-image:url(http://images.freeimages.com/images/previews/356/cubes-1425949.jpg) 50px 50px no-repeat;
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?
You can view the page in question here: http://www.envisionlocal.com/
Underneath the blue, you'll see where there's a blank white space before the grey area starts. I believe it's this code:
<div class="bottom_part"></div>
Which uses this CSS:
#banner .bottom_part {
clear: both;
padding: 167px 0 0;
}
But when I remove that from the HTML, I still get the same white space on the page. Does anyone know what I need to change to remove it?
You should inspect your page.
body {
background: url("../images/body_bg3.jpg") repeat-x scroll left 0 #F3F4F4;
}
This is the image: http://www.envisionlocal.com/images/body_bg3.jpg
Your background is one whole image, that gives the impression that there is white space when you remove your div.
Change your background-image:'body_bg3.jpg' in body element
Drip was right, need to fix background image on body.
To fix the issue replace file images/body_bg3.jpg with this
http://i.stack.imgur.com/sTwFE.jpg
and remove dev with class "bottom_part" from html
It's part of the background image here: http://www.envisionlocal.com/images/body_bg3.jpg
When you zoom in you can see a 1px wide image that is repeated horizontally with this style:
background: #F3F4F4 url(../images/body_bg3.jpg) repeat-x left 0px;
You can crop the blue part out of the image or mimic the image with a div structure and styling.
I want to display images in a 144px x 144px div element.
Images are always larger than 144px and so I want to zoom scale them. By that I mean that the smallest side will touch the edge of the div, cutting a bit from the other side - the opposite of letterbox.
How can I do this and have it work on older browsers like IE as well?
EDIT:
Changed the image, the first was wrong, sorry.
Resize the image so that inside the div there is no space without image
My first answer addressed intentionally blocking out the part of the image while intentionally keeping the space occupied. If you just want part of the image visible with no space or anything else taken up, the best option will be to use CSS Sprite techniques.
Here's an example:
HTML (copy and paste into your own file for a full test):
<html>
<head>
<style type="text/css">
.clippedImg {
background-image: url("http://www.grinderschool.com/images/top_main.jpg");
background-position: -75px -55px;
height: 100px;
width: 235px;
}
</style>
</head>
<body>
<div class='clippedImg'> </div>
</body>
</html>
CSS (this is really the key):
.clippedImg {
background-image: url("http://www.grinderschool.com/images/top_main.jpg");
background-position: -75px -55px;
}
You can adjust the position numbers to get exactly the portion and size of the image that you want.
Note also that if you want a black box around this, it's even easier than the other post I made. Just put a parent div around this one:
<div class='blackBox'>
<div class='clippedImg'> </div>
<div>
With a padding and width set to create the black-box effect you want:
.blackBox {
background-color: black;
padding: 0 20px;
width: 235px;
}
Set only the width of the image to 144px in CSS or in the attribute. The height will scale automatically. I'm fairly certain this works as low as IE 6. I'm not certain about anything older than that.
If I read your question right, you aren't trying to resize the image, but rather to actually cut off part of the image. If you just want to resize the image, then follow the other answers about that.
The simplest way I can think of to actually cut off the image this is to add <div class='blockOut'> </div> and then use CSS to place & size the div, make it's color match the background color of your page, and put it in front of the image. Example CSS:
.blockOut {
position: relative;
top: -100px;
left: 100px;
background-color: white;
z-index: 2; //this is the important part for putting this div in front of the other one
}
Edit: Note that since you added an example showing that you want all sides blacked out, this would require separate divs for blacking out the top, each side, and the bottom. Also, if you want part of the image to show through (as it does in your example) you can use CSS transparency options.
div{height:114px;width:114px;overflow:hidden;}
div img{position:relative;left:-100px /*or whatever you want. can change it with js*/;top:-100px;}
that is masking to only show a part of the img, as you say in the title. but in the description says you want to resize the img. decide yuorself
to do what you want with css, you should use max-height:144px;max-width:144px. but ie6 doesn't implements those simple properties, so you'll have to use js
I put a frame in my images.
I created a CSS for the background-image is the image of the frame, but he must have an x padding for the frame is seen.
img.frame
{
background-image:url('http://bit.ly/k8g8zz');
background-repeat:no-repeat;
background-position: center;
background-size: 100%;
padding:23px 14px 60px;
}
I can not use a div inside of another because I need this image is a link with a title, and the W3C can not be div tags within a.
If possible, change the jsFiddle and send me the link
See the complete code here.
As you can see in jsFiddle, the frame is the wrong size .. she needs to grow along with the image and have a padding.
Thank you all for your help.
You almost have it! Just set both dimensions of background-size;
background-size: 100% 100%;
http://jsfiddle.net/vLBXH/
You can't set a width and height for a background-image in CSS, AFAIK. If you use a fixed-width image (PNG) you also should have images of the matching size. Another approach might be to style the frame with CSS only or have an framing-tag around the linked image, which you then may style, like:
<div class="img_frame">
<imgr src="#noimg" />
</div>
My web page sits in a DIV that is 960px wide, I center this DIV in the middle of the page by using the code:
html,body{background: url(images/INF_pageBg.gif) center top repeat-y #777777;text-align:center;}
#container{background-color:#ffffff;width:960px;text-align:left;margin:0 auto 0 auto;}
I need the background image of the html/body to tile down the middle of the page, which it does, however if the viewable pane in the browser is an odd number of pixels width then the centered background and centered DIV don't align together.
This is only happening in FF.
Does anybody know of a workaround?
Yeah, it's known issue. Unfortunately you only can fix div and image width, or use script to dynamically change stye.backgroundPosition property. Another trick is to put expression to the CSS class definition.
I found that by making the background image on odd number of pixels wide, the problem goes away for Firefox.
Setting padding:0px 0px 0px 1px; fixes the problem for IE.
Carlo Capocasa, Travian Games
The (most) common problem is that your background image has an odd number while your container is an even number.
I have wrote an article in my best English about where I also explain how the browser positioned your picture: check it out here.
I was able to resolve this with jQuery:
$(document).ready(function(){
$('body').css({
'margin-left': $(document).width()%2
});
});
I had the same problem.
To get the background centered, you need to have a background-image wider than the viewport. Try to use a background 2500px wide. It will force the browser to center the part of image that is viewable.
Let me know if it works for you.
What about creating a wrapper div with the same background-image.
body{ background: url(your-image.jpg) no-repeat center top; }
#wrapper{ background: url(your-image.jpg) no-repeat center top; margin: 0 auto; width: 984px; }
The wrapper has an even number, the background will keep the same position on any screen size.