I have a DIV with the following style
.vplayer-container .logo
{
position: absolute;
bottom: 50px;
right: 10px;
background: url(../img/logo.png) no-repeat;
border: 1px solid #000000;
max-width: 50px;
max-height: 50px;
}
I want that the DIV size is the same as the background image. Since the bg image change, I want it to be set automatically. I can use JavaScript, but I'd prefer a CSS way for that.
I'm targeting HTML5 browsers that is FireFox, Webkit and Opera.
Thanks
Answer:
With Kyle Sevenoaks hint, you can do it by putting an image element inside the DIV.
<div>
<img src="url">
</div>
Remove the Background property and no other styling is needed.
CSS can't do this, the div gets its dimensions from the content within it. The background image is purely a mark of styling.
You should be able to do this with Javascript, finding the height and width values and injecting them into an inline style should do it :)
You can also use an <img> tag within the .logo div. This would produce what you intend.
CSS cannot do that for background image.
This is impossible with pure CSS. I think you need to do it with JavaScript. Do you really need this to be dynamic? I think it is less work to change two values in the stylesheet if the logo changes.
Related
I am learning CSS and made up a problem for myself. I hope to get some help from CSS masters here :)
This is what I am trying to accomplish: A div with some text inside and a background image. Div's width is 100% of it's parent and height depends on text content. The background image should fill the div and have the minimum possible dimensions. Tried to search for answers but haven't found any.
The application of this could be for example a slider, a hero shot or a title with a responsive background and other responsive design applications.
Question
How to make responsive background image for div with constrained proportions without CSS3 "background-size" feature and without JS? The div's width is 100% and height depends on it's text content. Background image dimensions should equal either div's height or width as shown on illustration (i.e. image should have smallest possible dimensions).
Is this possible to accomplish at all? Or do I need to use some extra techniques to do this? For example extra #meadia queries with different different images (different dimension) or something else?
Illustration
Here is the illustration of how everything should behave:
Illustration
Requirements
The requirements I'm trying to achieve is No "background-size" and No JavaScript. This is for more browser compatibility. The CSS3 background-size:cover does the job almost. Very close. But it isn't compatible with older browsers. The structure is not prescribed. Text and images can be wrapped in any number of divs if needed.
Attempts
I've tried to accomplish the task with the following code:
jsfiddle
The code seems to work ok with smaller images but not with larger images. This presents one of two problems: 1) too low resolution (with small images) OR 2) it isn't clear what the image is about (for larger images).
I haven't used overflow:hidden to make the effect visible.
<div class="box">
<img class="img img11" src="image.jpg" alt="" />
<h1>Some text here</h1>
</div>
And the CSS:
* {
padding: 0px;
margin: 0px;
}
h1 { font: 600 20pt Arial; }
.box {
position: relative;
border: 1px solid black;
width: 100%;
min-height: 70px;
}
.img {
position: absolute;
top: 0px; /* Position it in top left corner */
left: 0px;
z-index: -1; /* Put it behind the text */
border: 2px dashed red;
/* Preserve aspect ratio */
min-width: 100%;
min-height: 100%;
}
What are your closes't solutions? Hope the question is clear enough and isn't too long. Thanks for your replies!
I'm certainly no CSS guru, but I am working on a problem where I'd like to make copying of images just slightly more burdensome for users. Sure, they can still easily be retrieved, but this makes it so you can't just drag/drop them on your desktop. Basically, I had a bunch of markup like this:
<img width="400" src="my image.png" class="foo" alt="foo">
Instead, I decided to put this into a background image and change the element to a div:
<div width="400" class="foo">
The problem I have is that the images have a fixed width, but a variable height. This worked excellent when I was using an img tag. It doesn't have the same behavior when I use a div tag. Instead, the CSS is requiring me to force a height property to display anything at all:
This doesn't work
.foo {
display: block;
margin: 0;
padding: 0;
width: 400px;
background-image: url(myimage.png);
/* height: 200px; */
}
This sorta does:
.foo {
display: block;
margin: 0;
padding: 0;
width: 400px;
background-image: url(myimage.png);
height: 200px;
}
The problem is the height for the images are all variable as I mentioned before. So it tiles over and over if I hard code a size. The container can be a placeholder for well over 5,000 images, so setting it by hand won't do it. If I can get this div to behave exactly like the img tag did, the problem is solved.
If you are just trying to prevent people from clicking and drag/dropping, I would say put each img into it's own div with position: relative. Add another div inside that relative div that has the following style:
div.img_box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: none;
z-index: 9999; /* or anything higher than your img's z-index */
}
That will cover up the image with a transparent div.
That way the image (which is part of your content) is still syntactically correct in the html.
Everybody is of course correct in saying that they have already downloaded the images to their computers just by visiting the site.
If you're trying to prevent users from reusing your content easily, some good methods are to:
1. Use images with lower resolution to limit reuse potential
2. Watermark your images
3. A combination of both, in an image sprite.
Hacking at it will just be ugly, ineffective, and difficult to maintain.
You are just setting the background of the div, you aren't adding an image to the div. The div can be resized to whatever it won't resize to what it's background image is. Just use the tag.
The only thing you could do with CSS is add a height which would work for all images. So if you're images range from 200-250px in height, set the div to 250px. Otherwise, you'll need javascript or server-side scripting to determine the height of the image and set the the CSS.
I want this markup:
<div style="background:url('Untitled.jpg');height:50px;width:50px;"></div>
to behave as this markup:
<img src="untitled.jpg" width="50" height="50"/>
The difference between the 2 is that the div doesn't fit the full image. It just crops it if the full image can't be fit inside the container. However img tag as we know shows full image. It scales down the image but shows it fully.
How can I achieve the same thing in div in background property of css? If possible, please do not suggest css3 because I need this to work on IE8. However it's fine. You can still suggest.
If the background image is 50x50 pixels large, what you show should work fine. If the div doesn't stretch, try adding a to it.
If you need to resize the background image, you will indeed need to refer to CSS3 which has the background-size property.
You'll have to reset the div completely:
<div style="border: 0; margin: 0; padding: 0; background: url('Untitled.jpg'); background-size: 100%; width: 50px; height: 50px;"></div>
background:url("untitled.png") 0 0 no-repeat; is required to declare the background property in full. or you can go background-image, background-repeat and background-position.
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 want to create a headline (h2) with an image at the right-most area of the bounding box. I have the layout almost right except I can't push the image a little bit to the right of the element's bounding box -- how would I tweak my css so it is displayed correctly?
I'm trying to do something like this:
[{someHeadLineText}{dynamic space }{image}{5px space}]
where the [] indicate the total available width of my content.
Html:
<div class="primaryHeader">
<h2>News</h2>
</div>
Css:
.primaryHeader h2 {
background-color: green; /* the header looks like a box */
color: black;
background: transparent url(../images/edit.png) no-repeat right center;
border: 1px solid red;
}
I am placing the image to the right of my h2 element and centered vertically -- but how do I adjust the placement of the background image?
I'm afraid I think you can't. You can use either right or a pixel value as the image's x-position but that pixel value will always be relative to the left corner of the bounding box. Adding padding won't help either, it will just extend the bounding box further.
The only solution I know for this is either adding the shift to the image itself, or using an absolutely positioned element (with a slight offset) hovering behind the element - but that would require you know the width and height in advance.
Edit: evil, hacky idea. I have no time to try this out right now, but it should work if the h2 is a display: block.
Give the h2 a position: relative.
Place a div or other element inside the h2 with the following:
position: absolute;
left: 0px;
top: 0px;
right: 5px; /* This is the shift */
bottom: 0px;
background-image: url(...);
background-position: right center;
background-repeat: no-repeat;
z-index: -1; /* I don't know whether this will overwrite the h2's content */
this could lead to the desired effect, I'm not sure as I have not tried.
The element may overlay the h2's other content, in which case you would have to put the rest into a <span> element with position: relative and z-index: 1.
It's really hacky. Better put the padding into the image itself, much cleaner.
Can you add padding pixels in the image itself?
You could ditch the background image and use an image instead.
<div class="primaryHeader" style="padding-right: 5px;">
<img src="../images/edit.png" alt="" style="float: right;" />
<h2>News</h2>
</div>
You can look into CSS3 background positioning. It works in all the modern browsers (not IE, of course).