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
Related
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.
Does background-image not work with percentage div sizes? The images only show up if I hardcode width and height in the .contrast class. Images don't show up if width and height are percentages. Any insight?
CSS:
.parent{
width=1000px;
}
img.contrast{
width:400px;
height:100px;
background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg);
}
HTML:
<div class="parent">
<img class="contrast"/>
<img class="contrast"/>
<img class="contrast"/>
</div>
JsFiddle
Edit1: So .contrast cannot inherit the size of the parent division? If I had 3 divisions within a parent division set to 25% width, it can't access the parent's width?
Unless you use it as SRC, the container has no way to know wich size is your background.
That been said, you can just use divs for that purpose, and play with the background-size, background-position properties to get the desired effect (i.e. make the background fit the div size). What you cannot do is to make the div "inherit" the size from its background property.
Take a look at this fiddle I made from yours: http://jsfiddle.net/amenadiel/x9a56/2/
img.contrast{
width:450px;
height:100px;
background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg);
}
img.contrast2{
width:50%;
height:100px;
background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg);
}
img.contrast3{
width:20em;
height:100px;
background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg);
}
You can have the divs (or imgs) take absolute widths, or widths relative to the parent, or widths relative to the window. That''s not a problem, because the container has a width from which you can relate. But it wou fail to provide a height for each one, they won't have any.
In turn, the container div expands to fit the total height of its children elements. But, as an alternative workaround, If you provide a fixed height for the container, then you can assign relative heights to the children img.
TL/DR
use img with src attribute to guess size from the image url, or pick your favorite workaround
I have a situation were I cannot alter the main container and also implement body,html height and margin.
I am wanting to set the image via CSS and I am wanting the DIV to be the full height and width of the image.
What is the best way to achieve this most of the things I have found on google uses a div then a img tag
Use a background image in the div and set width/height to the dimensions of the image.
It's also easy to scale the image using background-size values of cover or contain.
See: http://www.w3schools.com/cssref/css3_pr_background-size.asp
<div style="background-image:url('image.jpg'); width:100px; height:100px;"></div>
Or use the background-size dimensions
<div style="background-image:url('image.jpg'); background-size:100px 100px; width:..; height:..;"></div>
I want to resize images when the browser is resized but I would like to keep a border of 30px on both the left and bottom of the image when doing so. Like this: http://www.jennyvansommers.com/non-commissioned/corner/#347
Is there a simple way to do this using CSS?
Thanks in advance
I would try putting the image inside of a container, the container having 100% width and height, with padding on the left and bottom of 30px, and the image inside it also having 100% width and height.
EG
<div id="imageWrapper">
<img src="imageurl" />
</div>
<style>
#imageWrapper{width:100%;height:100%;padding:0 0 30px 30px}
#imageWrapper img{width:100%;height:100%;}
</style>
The wrapper should fill the window, and the image should fill the wrapper out to the padding. This will most likely stretch your images though if the shape of the image differs to the shape of the window. If you want to keep the aspect ratio of the image try just setting the width or the height of the img, but not both.
Hope this helps :)
EDIT:
Not sure if you want to fill the screen, play with img{max-width:100% and img{max-height:100% instead of width and height if you want the image to retain it's natural size unless the window is smaller than it..
I would expect setting a min-width and min-height of 30px, with a relative width and hiehgt of 50% or whatever relative size you would like would achieve this sort of effect
.image-resize {
min-hieght:30px;
min-width:30px;
height:50%;
width:50%;
}
Sorry misread your question there, a border? or a margin? so somthing like
margin-left:30px;
margin-bottom:30px;
instead of the height and width, you could use border-left and border-bottom i suppose using a transparent border, but i perfer margin.
But relative sizing i think is what you want? so it resizes with the browser, or actually resizes relative to its parent so depends where it exists in the dom
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%;