i want to set an image in the background of a div with a property to repeat that image from the start of the div to the 99% of height of the div.
Is this possible? OR i have to find another work round?
Not purely with CSS background-repeat. Once you specify a repeat in a direction (x or y), you get 100% of that element's width or height;
You could try adding an element that overlays 1% of your <div>s height, thereby hiding the background image.
Another option would be to nest 2 div's, and add the background-image to the nested element:
<div style="height: 100%">
<div style="height: 99%; background: url(img.png) repeat-y 0 0;">
</div>
You can't do this with only CSS, you'll need an HTML <div> or similar to position the background.
Try using this css:
.myimg {
background-image:url(path here) repeat left top;
height:99%;
}
You need to apply the class myimg to the image. You might want to adjust the height there.
Note that you can also customize the starting/repeating position of the image by specifying the values to left and top like:
background-image:url(path here) repeat 20% 50%;
Related
Desired effect: background image with 100% height and horizontally starts at 50% of the element. (The background ends before the right end of the element, or overflows hidden at the right edge of the element depending on the image / element size ratio)
MDN "A <length> or <percentage>. This specifies the X coordinate relative to the left edge, with the Y coordinate set to 50%."
So I tried to set background-position:50%; but oddly this centers the background image horizontally.
Background pivot is set to center when using % values?
Even MDN example shows this behaviour.
I know there is a "hack" with :after pseudo element to achieve this effect, I just wonder is this possible with "background" css properties?
Like you already noticed and as I explained here background-position with percentage won't behave like you may think.
An idea to achieve this is to consider adjusting background-origin like below:
.box {
padding-left:50%;
height:300px;
border:1px solid;
background:url(https://picsum.photos/200/200?image=1069) left/100% auto no-repeat;
background-origin:content-box;
}
<div class="box">
</div>
the trick is to have the padding covering half the width and we start placing the background inside the content-box
I would like a div with a background-image that keeps the aspect ratio of the image, with a fixed height of 500px and i want no "padding" on the background of that div.
Is this possible to do?
I Can get a div with a fixed height and a background-image that keeps aspect ratio :
<div style="background: url(something.png) 50% 50% / cover #D6D6D6;background-size: contain;background-repeat: no-repeat;height:500px"></div>
This makes the image centered in the middle of the div ( either vertically or horizontally ) but gives some padding to the background of the div ...
Can anybody help me out ?
What you are trying to achieve is not possible using only CSS, you could use JavaScript to detect the width of the image and then set the width of the div to be the same. Or alternatively you could simply remove the background-image property and rather add the image as an img tag into your HTML. If you do that you can display the div as inline-block which will take care of making the div as wide as the width of the image.
body
{
text-align:center;
}
div
{
background-color:#666;
display:inline-block;
}
div img
{
height:500px;
}
<div>
<img src="http://lorempixel.com/200/500" alt="">
</div>
background-size: contain; will always display the whole image (without cutting off anything), thereby leaving some space either vertically or horizontally.
On the other hand, background-size: cover; will fill the whole DIV in a way that the shorter side of the image corresponds exactly to the length or height of the DIV (depending on the relation of the proportions between DIV and image) and the longer one is cut off on the sides or on top and bottom.
If you don't want a distorted image, those are the options you have.
So I have a couple container holding that have an image and I'm trying to add padding to the container only if the images is less than the width of the container.
I know this will be a simple javascript solution but is there a way to do this with css?
Example html:
<div class="image-container">
<img scr="my/path/to/image"/>
</div>
<div class="image-container">
<img scr="my/path/to/image2"/>
</div>
css: I dunno :)
Take a look at this image to get a better idea of what I'm trying to do: http://grab.by/r1sS
It is not possible to add padding based on the image size using CSS.
Although, From the link you provided it looks like you are trying to center the image. You can achieve this by setting text-align to center on the container which will center the child elements ie. the image.
.image-container {
text-align: center;
}
In regards to the original query, it is not possible to add padding based on the image size using CSS.
I'm not aware of any way to apply the exact conditional you're asking for in pure CSS since CSS has no conditionals.
But, based on your screen shot it seems like you don't need padding. Why not just center the image over a colored background. Won't that accomplish the same thing?
When the image is full width, it will cover the entire background and fill the container. When it's not full width, it will be centered in the container.
To center the image in the container and apply a background color:
.image-container {
text-align: center;
background-color: #777;
}
I have an img element with style='width:40%;height:40%;'. I would like to add a div that automatically wraps it. However when I insert the div instead of wrapping the img it just expands to the div inside.
How can I force this div to wrap img so it can be used as a frame. The reason why I do not preset the div's height and width is because img's percentages will be given dynamically, so div should wrap the img according to img's sizes.
If you do it like this
<div id="wrapper">
<img src="...">
</div>
you could add the display: inline-block; attribute to the wrapper. That did it for me. Yet still, your style='width:40%;height:40%;' will make its height being adjusted by its parent as #jesse-van-assen already mentioned.
The problem with a width and height of 40% with an image tag, is that the image isn't downscaled to 40% of it's original size, but takes up 40% of it's parent, as you can see here.
In your case, you want to wrap the image in a div, but still want to size it to 40% of it's parent. In this case, the parent IS the wrapping div. You see the problem.
If you just want to use the div as a frame, you can use css to style the image to gain a similar effect, like this:
<img src="..." style="border: 1px solid #000000; padding:10px;"/>
Example of this principle here.
make all your images float to left.
img
{
float:left;
}
and clear each div with
<div style="clear:both"></div>
as the very last element in the wrap div before it closes.
hope it helps.
I have 2 divs as columns, both are floated left and set to clear none. Their container div has a background image at the top, so the background is at the top of both columns.
I want to be able to also have a background image at the bottom of the columns. Ive created another div which sits inside the container div (but outside the columns) and set a background image to its bottom.
The problem is that this div doesn't extend to the bottom of the columns it contains. How can I make it do this? Ive tried playing around with floats and clearing but without any luck.
Thanks
In addition to the techniques the others already mentioned, you can add overflow:hidden to the parent container's style.
This is a very well known CSS quirk: here is a complete treatment: http://www.quirksmode.org/css/clearing.html
CSS:
div#test {
min-height:100%;
background-image: url('http://www.google.nl/images/logos/ps_logo2.png');
background-repeat: no-repeat;
background-position: bottom;
}
div#wrapper {
height: 500px;
}
HTML:
<div id="wrapper">
<div id="test">Blalalalalala</div>
</div>
This way you're div (#test) will have the height of his parent (#wrapper).
http://jsfiddle.net/F95xN/6/
Try removing the min-height: 100%; and you'll see.
Float elements do not count towards the height of a non-float elements. You can make the container div expand to include these floats in a couple ways:
Add float: left to the container div, too.
Or, add something like <div style="clear: both;"></div> to the end of the container div.
Or, use a more flexible clearfix technique.
Oops, I hadn't noticed but id set the height of one of the containers when I was wire-framing and forgotten it was there. Removing the height and floating the right div fixed this for me.
Thanks anyway.