css dock table background image to the right without stretching horizontally - html

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?

Related

Background scale so part of image fills div

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 )

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>

How can I make a white rectangle extend all the way down, on top of another background?

I'm a complete beginner. I tried my best to search for a solution, but part of the problem is that I don't even know what the technical term is for the thing I'm trying to do.
Essentially I want to have a tiled background repeating everywhere, but then also have a white rectangle that extends from the top of the page to the bottom, occupying roughly 50% of the horizontal screen space. How would I go about accomplishing this?
If I get it correctly, you might just want a repeated background of the page and then absolutely-positioned <div> with white background.
This is pretty basic stuff, I suggest you take a beginner's course in HTML and CSS before going too much further.
body {background: url(tile.png) left top repeat;}
content {background-color: #fff; margin: 0px auto; width: 50%;}
I hope this is what you wanted. It is a tiled, repeating background with a white strip, half the screen space, going down the middle. If you want a tiled background, you don't need to define anything in CSS, and CSS will do it for you, but I'm not sure with the browser compatibility so it might be safer to explicitly define repeat:.
First of all, to those complaining that height: 100% does not work, note that the div with height: 100% is only being the height: 100% of its parent element (the container that encloses the div, in the case of this JSFiddle, the #container). Therefore, if its parent has no content, the div with 100% height will become invisible.
Therefore, the html, body and container must all have height: 100% for the white strip to have 100% height here in this JSFiddle:
JSFiddle
After this you are free to add any content to the white strip, which will probably be your webpage! :D
Note: Here I have defined the strip as width: 50%; but sometimes it may be better to explicitly define the width (width: 1200px;) so that you can avoid problems with the text and divs going haywire when you zoom in, zoom out, etc.
Edit:
Also, since the height of the container increases as you add more content, such as divs, the problem with the white strip not reaching the bottom of the page is that you simply have nothing that fills it up. As you add more content the strip will naturally grow to fill the page. Good luck!
Solution 1
Here's a solution that uses only the background CSS property applied to document body, no extra elements needed. It's documented so you can understand whats going on.
body
{
/*
* This specifies two background images, separated by comma
* First parameter is just a white pixel
* For the second use any background pattern of your choice
*/
background-image:url("http://i.imgur.com/qdx0kzd.png"),
url("http://subtlepatterns.com/patterns/tasky_pattern.png");
/*Center background images, self-explanatory*/
background-position: center;
/*Repeat white background image on Y-axis (vertical) only*/
background-repeat: repeat-y, repeat;
/*Make white background size 50%. Adjust as needed*/
background-size: 50%, auto;
}
You can see an example in this fiddle: http://jsfiddle.net/dV2zZ/6/
Solution 2
This solution applies different backgrounds to different elements: the pattern to the document body, and the white background to a content container. Code is also documented for better understanding.
HTML
<div id="content">Content</div>
CSS
html, body
{
margin: 0;
/* Make document size extend to the bottom of the page */
height: 100%;
}
body
{
/*Patern background. Use a pattern of your choice*/
background-image: url("http://subtlepatterns.com/patterns/tasky_pattern.png");
}
#content
{
/*Make container background white*/
background-color: #FFFFFF;
/*Center container*/
margin: 0 auto;
/*Size 50%, adjust as needed*/
width: 50%;
/*Extend to the bottom*/
height: 100%;
}
See an example fiddle here: http://jsfiddle.net/jDRG3/1/

Aligning a picture to bottom right in browser window

Im trying to markup a picture to show on the bottom right corner of the webpage.
If i set the overall width of the page to 100%
and i set the picture to float right at the bottom it makes the trick perfectly but above
the mentioned picture is a bigger width picture which is around 1600px so when you open the the page in the small window browser then the floated picture is aligned but the scrollbar apears and scrolls to the full width of the page without the floated picture..
body{width:100%;}
thepicture{width: 1289px;
height: 446px;
position:relative;
float:right;}
So the second aproach: to make the body or a wrapper div fix width that is bigger than the upper picture mentioned:
body{min-width:1600px;}
Than looks great until somebody has a bigger screen than 1600px... the float ends at 1600px;
The firs solution needs to be tweaked but i cant figure it out how, some responsive floating would be great jquery maybe?
thanks in forwards
The problem is the pearl:)
Updated
May be this work:
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%
min-width: 1648px; /* the width of the longest element */
}
#bottomwrap {
/* replace with your background color */
background: url(path/to/picture) bottom right no-repeat;
width: 100%;
}
Rememer to reset body margin, padding to zero and set body height to 100%
Update:
I have update the solution for your case, modify the HTML structure, you can review here http://jsbin.com/ulatis/1/edit
It sounds like you need to use a background image here. Put the background on a 100% width div and set the background position to right bottom.
div.background{background: url('images/bg.png') no-repeat right bottom; width: 100%}
Try position: fixed; z-index: -1;, it does exactly what you're looking for. Example

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;
}