Good afternoon stackoverflow community,
I have a file with some images inside it, and I want to use each part of this image separately without creating different files. So I started to look for ways to give position through CSS to "chop" the piece that I want to show.
I tried using properties like clipwithout success. The closest I got was giving a height and background-position when inserting some random text inside the DIV.
Here's a fiddle I did to demonstrate it, but since I couldn't update a image to it I just made with background-color.
.icon {
float: left;
background-color:#6495ED;
background-position: 0 0px;
height: 29.2px;
}
http://jsfiddle.net/PatrickBDC/HaGNa/
Is there a way to show that background, the same exact size but without the text?
Thank you very much!
You need to have a width for your div as well if the div is empty. try something like this
.icon {
float: left;
background: url () no-repeat 0 0;
height: 29.2px;
width:60px;
}
If you would like your div to display without content, you need to specify width in your CSS:
.icon {
float: left;
background-color:#6495ED;
background-position: 0 0px;
height: 29.2px;
width: 50px;
}
Here is a working fiddle.
Just add width: 100px; and height: 50px;property in your code. You can add width and height as per the part of the image which you want to show.
Related
how can I solve this image oversize problem in my simple HTML photogallery with finding images in directory by PHP? I can't solve it and it's not visually good. Can you please help me? Screenshot is
Thanks.
Set all of the pictures with the same class, then add an image height to that class and it will set the images to all the same height.
Here is an example that i just made - http://jsfiddle.net/3gd5ooLf/
Im not sure how you are getting the image in PHP so i can't tell you how to set the class without seeing some code.
here's the CSS example:
.height {
height: 100px;
}
This may be a good example to you . Refer to stackoverflow old question too. here is the link:link
.img {
position: relative;
float: left;
width: 100px;
height: 100px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div>
In your css file, you could add heigth and width property to adjust the images size.
For example:
img {
heigth:200px;
width: auto;
}
will set the heigth to 200px, but will keep the aspect ratio. To have square images, set the width to, for example, 200px
If you prefer, you could set the image to be scrollable when it's too long like so:
img {
height:200px;
width:200px;
overflow: scroll;
}
So I want to write some css so I can make a preset div size that I can put the pictures in. Even if the picture is bigger than the div i would like to make it show only what the div can show you. So kinda like cropping it or something. I want to make a little thumbnail that you can click on and see the whole picture. I have no idea where to start. Please help. Thanks!
you can do something like:
div {
width: 300px;
height: 300px;
overflow: hidden;
}
the width and height will prevent the div from automatically re sizing, and overflow: hidden will hide (or crop) everything that excedes the div's boundries
this JSFiddle will show you how the JS, and CSS are really simple...
http://jsfiddle.net/ProgrammerKid/bh2dz8Lq/
(make sure that you look at the css... it is awfully simple)
#divId{
width: xpx;
height: xpx;
}
#imgId{
margin-right: auto;
margin-left: auto;
}
#imgId:hover{
width: 100%;
}
The image will shrink to the size of the div when you hover over it.
.yourDivClass {
height: #px;
width: #px;
}
.yourDivClass img {
margin-left: auto;
margin-right: auto;
}
This will create your fixed size div, and then center your image inside the div, with only the size of your div being visible of the image.
I've been trying to develop a simple page in order to try HTML/CSS and I'm trying to draw a colored column on the left side of the page using CSS. This is how I'm attempting to make it work:
#leftcolumn {
margin-top: 0px;
margin-bottom: 0px;
top: 0px;
left: 0px;
width: 60px;
height: 100%;
background-color: #276E55;
float: left;
}
And this is what I write on the HTML file:
<body>
<div class="leftcolumn"></div>
<!--rest of the code here-->
</body>
I'm assuming that since I set the column to float left, anything after it will automatically go to the space at the right of it. Also I'm setting the top and bottom margin because the document have a margin to keep the text from reaching the extremities of the page.
I'm assuming I'm doing something wrong regarding it, but I really don't know what am I missing here.
height is always based on the parents height, which is unspecified in this case. You have to use a fixed height to make the content visible. Furtermore you are using class but referencing the id (with #). Use .leftcolum instead.
Your left and top is not needed since you are not using position.
Update
To actually scale the div to 100% height you need as I specified a parent with a certain height.
You can achieve that by scaling the html and body to 100%.
html, body{
height:100%;
}
Here is the fiddle: http://jsfiddle.net/56b77g7t/1/
CSS notation is wrong... use . instead of #... and change height into pixels.. see demo below.
.leftcolumn {
margin-top: 0px;
margin-bottom: 0px;
top: 0px;
left: 0px;
width: 60px;
height: 900px;
background-color: #276E55;
float: left;
}
Click here to see the demo:
http://jsfiddle.net/fyee5nm8/1/
You are using class but your CSS is using an id (#) try changing the # for a dot (.)
I'm in the midst of making a navigation bar. I came here earlier and got some help re-organising and coding said item. All seemed great and it seemed like it should work but when using the following code instead of each image resizing, it only showed X% of the images height and Y% of the images width. I cannot figure out what is going wrong.
CSS:
#navbar a.newr:link { background-image: url('newr.png'); display: block; width: 5%; height: 2%; }
#navbar a.newr:hover { background-image: url('newrhover.png'); display: block; width: 5%; height: 2%; }
Please refer to how it looks looks on my website to see what I mean.
Please also refer to my other navbar question.
Thank you.
Background images don't resize. They are shown in full size and are clipped if the container is smaller.
What you can do:
The best approach is to resize the images to the target size
A hackish approach is to use absolutely positioned <img> tags as background and <span> text as foreground.
<div class="hasBg">
<img>
<span>text</span>
<div>
.hasBg{
position:relative;
}
//will autofit depending on how span stretches the container
.hasBg img{
position:absolute;
top: 0;
bottom: 0;
left: 0;
}
.hasBg span{
position:absolute;
}
A native but new feature is to use the new CSS3 background-size. but this is not cross-browser afaik
Since you've done it as a background image, the width and height attributes only apply to the div, not the image.
You have two options.
Resize your images to fit the dimensions
have your images on your page and use javascript for your hover effect
Please see this:
My code looks like this now:
http://jsfiddle.net/Bd9Ut/
As you can see I only managed the get text above.. ("asd"), and i want it under, above the border image..
How can I do this?
Change this line:
.header-inner-lhs { width: 360px; height: 22px; margin-top: 73px; float: left; }
You can see it here: http://jsfiddle.net/Bd9Ut/4/
I simply adjusted the height down and added a top margin to keep the overall height the same, maintaining the overall element height at 95px;
Is that what you had in mind?