Background scale so part of image fills div - html

I have an image (let's say it's 100px by 100px). I want to use the image as the background of a div, however I only want the first 50px by 50px to be visible (the other three 'corners' will be used as other backgrounds). I also want to scale the image so that the piece of the image I specify fills the div. For example, if my div is 150px by 150px, i'd want to crop by image to 50px by 50px, and then render it as 150px by 150px.
I can render the image in the background like so (using react): <div style={{width: '5vh', height: '5vh', background: 'url(./image) 0px 0px'}}></div>, however this does not scale the image back to the size I want it. How can I achieve the effect I desire?
Is it described in the image below, where the black square is the div, and the red is the content I want visible in the background, while the blue & red are the entire source image.
This is similar to this question, however that answer is several years old and does not rescale the image either.

To divide the image in four you need to double it's dimensions (in relation to the containing div)
background-size:200% 200% ;
Then you use background-position to choose the portion you need:
div{
background-image: url('http://lorempixel.com/output/abstract-q-c-100-100-9.jpg');
height: 150px;
width: 150px;
background-size:200% 200% ;
background-position: 0 0; // is top-left
/* background-position: 100% 100%// is bottom-right */
}
<div>
PS: reactwise you need to camelCase the hyphened properties( ex: background-size will become backgroundSize )

Related

Background svg image shifts laterally ~1px when page is zoomed

HTML:
<div>
<button class="my-btn"></button>
</div>
CSS:
.my-btn {
display: inline-block;
height: 19.6px;
width: 19.6px;
border: none;
border-radius: 5px;
background: url(https://www.svgrepo.com/show/21045/delete-button.svg) center no-repeat, #f99d1d;
background-size: 70%;
}
So, I set an svg as a button background. I want this image to be centered, but the problem is that when the page is zoomed, the background image sometimes shifts ~1px to the left or right. It's like on certain zoom levels browser engine can't make the image be surrounded by equal number of pixels from both sides, and instead of:
|----5.5px---- background-image ----5.5px (or 5.4px)----|
it outputs:
|----6px---- background-image ----5px----|
The same happens with vertical axis.
Why does it work like that and how can I make my background image be centered at any zoom level?
Codepen of the example: https://codepen.io/recursion1/pen/JjZPbxO
Screenshot of what I mean by lateral shifting

Three or more backgrounds stacked CSS

I'm trying to have three backgrounds stacked under each other using CSS but only two appear at maximum. Basically I want to make something like this:
Here is the code I'm using:
body{
font-size: 100%;
background-image: url(ex1.png), url(ex2.png), url(ex3.png);
background-repeat: no-repeat;
}
Is there any simple way to achieve this result using the body or am I forced to use divs instead?
When you set multiple images on a single element without specifying the background-position, they all are placed on the same position and so they will be one below the other. As long as the images are of the same size only one will show. If the images are of different size, say first is 100px tall, second is 200px, third is 300px then for the first 100px the first image will show up, for 100 - 200px the bottom of second image will show and for 200-300px the last third of the final image will show up.
Here is how you can stack the images within a single element.
If all three images are same height then just mention background-position: top,center,bottom. This setting means the top of the first image will be aligned with top of the container, second one's center will be aligned with center of container and third one's bottom will be at container's bottom.
If the images are of different height then the above approach will not work as-is, the positions will have to be set in actual pixels values such that the position of the second and subsequent image are offset by the sum total of heights of previous image. So, the background-position should be like 0px 0px, 0x [height of image1], 0px [height of image1 + height of image2]. This can still be done with percentages (to make it work for image of any size) but it would need algebraic equations to be used because of how background-positioning with percentages works.
Note: Height of the element should be equal to the height of all three images put together for all of them to show up completely.
div {
height: 300px;
width: 100px;
background-image: url(http://lorempixel.com/100/100/nature/1), url(http://lorempixel.com/100/100/nature/2), url(http://lorempixel.com/100/100/nature/3);
background-repeat: no-repeat;
border: 1px solid;
}
.bg-stack-with-pos {
background-position: top, center, bottom;
}
.bg-stack-without-pos-diff-height {
background-image: url(http://lorempixel.com/100/100/nature/1), url(http://lorempixel.com/100/200/nature/2), url(http://lorempixel.com/100/300/nature/3);
}
.bg-stack-with-pos-diff-height {
height: 600px;
background-image: url(http://lorempixel.com/100/100/nature/1), url(http://lorempixel.com/100/200/nature/2), url(http://lorempixel.com/100/300/nature/3);
background-position: 0px 0px, 0px 100px, 0px 300px;
}
<h3>Stacked Images with Background Position - One below the other</h3>
<div class='bg-stack-with-pos'></div>
<h3>Stacked Images w/o Background Position - One behind the other</h3>
<div class='bg-stack-without-pos'></div>
<h3>Stacked Images w/o Background Position and different heights - One below the other</h3>
<div class='bg-stack-with-pos-diff-height'></div>
<h3>Stacked Images w/o Background Position and different heights - One behind the other</h3>
<div class='bg-stack-without-pos-diff-height'></div>

Crop and scale a specific region of an image using CSS (responsively)

I'd like to show the user a specific part of an image. Ideally, I'd be able to crop the image on the server, but I'm unable to do so for this application. I'd like a solution that appeared to the user as if the image were in fact cropped on the server, such that it could scale properly as its containing elements got bigger or smaller.
Concretely, say my image is 200px wide by 300px high, and I'd like to show the region of the image that goes in x from 0px to 200px, and in y from 75px to 225px. Therefore I'd want an 'effective image' of size 200px wide by 150px high.
I'm assuming that this will involve background-position and size, but I'm unable to figure out how to use these such that I can:
Show ONLY the desired region of the image.
Can be placed in a container with a fluid width (e.g. width: 50%) and have the size change accordingly.
I've included an example of what I've tried so far here:
http://codepen.io/anon/pen/maCvd
The example has the uncropped image, scaling to the size of its container, which is 75% of 100px. It also shows what I'd like to effectively get out of the CSS -- something equivalent to the physically cropped image, which can also scale to the size of its parent.
It shows my attempt at using background-size, which as you can see, does not scale to the size of its parent.
Thanks for any help!
The only way i can think of doing this is using the clip property. Unfortunately, this can only be applied to inline images that are positioned absolutely.
So, based on the question:
Codepen Example
HTML
<div class="wrapper">
<img class="clipper" src="http://lorempixel.com/output/city-h-c-200-300-8.jpg"/>
</div>
CSS
.wrapper {
width:50%;
height:350px;
margin: 10px auto;
border:1px solid grey;
position: relative;
}
.clipper {
position: absolute;
top:-75px; /* same as top clip */
left:0;
/* top, right, bottom, left */
clip:rect(75px,200px,225px,0px);
}

css dock table background image to the right without stretching horizontally

I have a table, and a long image, i want to put the image as a background for the table, only that i want it to be docked on the right, with a width lets say 20% of the right column (( table has 2 columns )).
The table has a height that is equal to the sum of the heights of all the rows, so if the windows browser gets smaller, it will create a scroll on the page, and I want my image to behave the same !!
How can i achieve that in css without the use of js ?? whether it's a (( css background image )) or <img> tag that will be fixed by some css rule.
Thanks in advanced.
I find your question a little confusing, but here's a stab at what I think you're asking for.
http://jsfiddle.net/nate/7PcFJ/
table {
border-collapse: collapse;
background-image: url(http://placekitten.com/100/800);
background-position: 100% 0;
background-repeat: repeat-y;
/* Set the background image to be 20% of the width of the table, and 800px */
background-size: 20% 800px;
width: 100%;
}
td {
border: 5px solid orange;
}
In this example, we set a tall background image on the table. We use background-position to dock it to the right side. We use background-repeat to tell it only to repeat vertically. Then we use background-size to set its width to 20% of the table.
In your question, you asked for it to be set to 20% of the right column. That's trickier - you'd have to set the background image on the tds themselves, then, or have a fixed-width table. If you know the width of your table, it's easy to set the width of your background image relative to it.
Does this help?

How can i show only the right/left halt of a background image on my page?

I use a table to show several images. I need to show the left half an image in the first td-element and the right half of it in the second td-element. This is because some of the images have double width as others. I thought i use a div and set this image as background image for the first two td-elements using a child-div. Now i am fiddling around to make it work using css.
Any suggestions?
Update: Working example: http://jsfiddle.net/BkAcu/2/
Use background-position: <horizontal> <vertical> where <horizontal> and <vertical> are background offsets, in conjunction with background-repeat: no-repeat.
Set the background-position to a negative value, to move the bg to the left.
See also: https://developer.mozilla.org/en/CSS/background-position
Example (assume your TDs to have a width of 100px, and the image to be 200px);
#td1, #td2 {
background: url("200.png") no-repeat;
}
#td2 {
background-position: -100px;
}