I was trying to work with background image property. I was really confused with repeat x and y. I have tried to figure out what it does, and I found online things I found not good enough. I have created two columns, and the left column would get 63% and the right column 37%(approximate). I used background image with 3000px width and 160 height, and used two different colors for the two columns. That is, after 1890px or 63% the color changes.
I am using my laptop with 1350px wide screen. I kept changing the percentage of repeat-y and see what is it is doing. I still can't figure out, what happening. This is what I understood, and if I am wrong please give me more simpler explanation. For me, if I set repeat y 44%, then it is taking 44% of the current container, let say Z PX, and set the background image by starting from z PX to the end of image, in my case to 3000px, and repeat the process vertically. I hope I am clear. Am I correct? Please, let me know what you think or explain to me on your own ways. Thanks!
#page{
background:url("bg.jpg") repeat-y 63%;
}
.clear{
clear:both;
}
div.left{
width:63.11111111%;
float:left;
}
div.right{
float:right;
width:36%;
}
}
</style>
</head>
<body>
<div id="page">
<div class="left">
this is left column
</div>
<div class="right">
this is right column
</div>
<div class="clear"></div>
</div>
</body>
The background-repeat property and the background-position property are two different things. The background-repeat property sets if or how a background image will be repeated; default, a background-image is repeated both vertically (= repeat-y) and horizontally (= repeat-x).
In your example the image will be vertically repeated; but the div's your are using don't show much about it, because the image is much bigger than your div's . I suggest you try it with a smaller image, e.g. 25x25px and put some text (e.g. lorem ipsum) in or give this a height of 200 px, and play with the values again.
The background-position property sets the starting position of a background image; the first value is the horizontal position and the second value is the vertical.
In your example the percentage describes the point off the image to start from, on the horizontal axis.
If you only specify one keyword, like you did, the other value for the vertical axis will be "center". So your image will be viewable from the middle, on the vertical axis.
Try out my suggestion! If it does not seem to be working, I'll put an example online. Let me know.
PS: There are no colors specified for the columns.
Related
My style definition is:
<style>
.x { background-image:url(https://raw.githubusercontent.com/iamcal/emoji-data/master/sheet_emojione_64.png);
border:solid 1px red;
}
</style>
The image file above is 2624px x 2624px containing emojis in 64px square cells. 64 is 1/41 of 2624. The image in cell 13,7 is a camel.
My markup is:
<div class='x' style='background-position:-832px -448px; height:64px; width:64px;' ></div>
<div class='x' style='background-position:-832px -448px; background-size:4100%;
height:64px; width:64px;' ></div>
<div class='x' style='background-position:-312px -168px; background-size:4100%;
height:24px; width:24px;' ></div>
The JS Fiddle is at https://jsfiddle.net/5j5ahhda/ and the output is:
My understanding of the second DIV is that I am squeezing a 2624px image into a 64px square, 1/41th of its size, and then blowing it up 41 times, thus resulting in an image the same as the original size. Is this understanding correct?
The third DIV produces what I was setting out to achieve, but I don't understand what causes the background image to scale nicely to 24/64. Is it the specified size of the containing DIV that causes the scaling?
What I want is 24/64 of the original image size. Is there a more straightforward way?
My understanding of the second DIV is that I am squeezing a 2624px image into a 64px square, 1/41th of its size, and then blowing it up 41 times, thus resulting in an image the same as the original size. Is this understanding correct?
Yes.
The third DIV produces what I was setting out to achieve, but I don't understand what causes the background image to scale nicely to 24/64. Is it the specified size of the containing DIV that causes the scaling?
Yes. A percentage background-size is relative to the size of the element's background positioning area. This area is determined by the element's dimensions, not the image's. This is what allows a background image to scale with the size of the element based on the element's dimensions when a percentage background-size is set.
I need your help!
Been searching for a solution, but couldn't find one, so thought I should just ask it.
For a school project I need to postion a random number of halls into the right position on a map.
As an example I just used 4 halls an just hard coded all the info that's retreived from a JSON with Angular as you can see in this CodePen
<div class="hall" id="hall01" style="width:15%; padding-bottom:50%; left:00%; top:00%; background-color:red;"></div>
<div class="hall" id="hall02" style="width:85%; padding-bottom:20%; left:15%; top:00%; background-color:green;"></div>
<div class="hall" id="hall03" style="width:15%; padding-bottom:10%; left:85%; top:40%; background-color:yellow;"></div>
<div class="hall" id="hall04" style="width:85%; padding-bottom:20%; left:15%; top:60%; background-color:blue;"></div>
I already have solved the issue of resizing the halls, when the page gets resized.
The only problem that remains is that the absolute positioning with top isn't working like it should.
Everything is calculated with a width of 1000px and a height of 500px in mind, but it should all resize if the browser also resizes.
Also getting the parent to adjust to the right height is something I struggle with.
Can somebody please help me with this?
The problem is that when using the top property, percentages are calculated based on the height of the container, not its width.
To fix this, set the top to 0 and then use margin-top: x%;. All margins are calculated based on the container's width, so the margin-top will shrink as well when the window is resized.
Is there a way to resize a container to a percentage of its own content?
I'm having a tricky issue relating to scaled content. Doing a transform: scale(...) on something works as far as having it display as I'd like, but unfortunately, the content still has the same effective size of the original content. This is problematic when content needs to flow below the scaled content without vertical spacing.
For example, given this HTML:
<div class="scaled-preview">
<div class="content">...</div>
</div>
<div class="stuff-below">Stuff below</div>
...and this CSS:
.content {
transform: scale(0.4);
width: 250%; /* Inverse of the scale */
}
....stuff-below is spaced below it as though it was not scaled.
You can see this in this JSFiddle.
The size of the content being scaled is unknown, but the scale factor is known. Is there a way I can have .scaled-preview set to a height that is a percentage of its own content?
This might not be quite the solution you're looking for, but it may solve your problem in an unusual way.
By the time the browser is calculating transform information, the layout is sadly solidified, so I wasn't able to think of a way to have the content height reflect the transformed height. So, I tried working off of font-size instead. It transitions just as well, and you can even size elements off of it using em values. The only downside is, I had to specify a particular width: xxem value so that the varying font-size would not cause line breaks in the middle of the transition.
https://jsfiddle.net/07c7s83y/
I wanted to make two divs to be equal in height , yes from various forums and blogs i found the way of doing that. Though i made it work still these CSS rules(mentioned in query part) are bothering me and doesn't seems to be understandable.
here's the mark up:-
<div class="container">
<div class="left-col">
Hello there , This is Left content<br/>
Hello there , This is Left content<br/>
<div>
<div class="right-col">
Hello there , This is right content<br/>
Hello there , This is right content<br/>
Hello there , This is right content<br/>
Hello there , This is right content<br/>
</div>
</div>
And here's the CSS :-
.container{
height:100%;
overflow:hidden;
}
.left-col{
width:50%;
float:left;
padding-bottom:500em;
margin-bottom:-500em;
}
.right-col{
width:50%;
float:left;
padding-bottom:500em;
margin-bottom:-500em;
}
Query-
Can somebody explain the working of
padding-bottom:500em (or something)
&
margin-bottom:-500em(Use of negative sign).
The padding-bottom property specifies the width between the element's content and the bottom border, represented by the yellow highlighted area in the illustration below.
Default value is 0, It can be defined in percentage, pixel, pt or em.
The margin-bottom property specifies the width between the element's bottom border and the element's outer edge, represented by the yellow highlighted area in the illustration below
The definitions for units are:
“Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance,
if the font-size of the document is 12pt, 1em is equal to 12pt. Ems
are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt,
etc. Ems are becoming increasingly popular in web documents due to
scalability and their mobile-device-friendly nature.
Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to
one dot on the computer screen (the smallest division of your screen’s
resolution). Many web designers use pixel units in web documents in
order to produce a pixel-perfect representation of their site as it is
rendered in the browser. One problem with the pixel unit is that it
does not scale upward for visually-impaired readers or downward to fit
mobile devices.
Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to
1/72 of an inch. Points are much like pixels, in that they are
fixed-size units and cannot scale in size.
Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current
font-size is equal to 100% (i.e. 12pt = 100%). While using the percent
unit, your text remains fully scalable for mobile devices and for
accessibility.
One nice way to solve this would be to automatically set height of both divisions using jQuery.
For example, let us say you have:
<div class="double_column_left">
//code
</div>
<div class="double_column_right">
//code
</div>
After that retrieve the height of one div '.double_column_right' and apply it to another div ('.double_column_left')'s min-height. Use the following JQuery code:
var divHeight = $('.double_column_right').height();
$('.double_column_right').css('min-height', divHeight+'px');
Try this and let me know if it helps.
I can't comment, thats why I post this as an answer.
I recently had the same problem and found this:
http://codepen.io/micahgodbolt/pen/FgqLc
padding refers to the space within the container. It works from the outside in.
margin refers to the space outwards from that object to the next or the edge of the screen.
For example, if you had a box that is 100px sq. and you gave it a padding-bottom:-20px. Your content inside the box will be 20px away from touching the bottom of the box
If you gave the same box a margin-bottom:20px, anything else you place under the box will always be 20px away from it
I hope that answers your question
Here is the FIDDLE
<div id="wrapper">
<div id="left-col">LEFT</div>
<div id="right-col">RIGHT</div>
<div class="clear">
<p>I HAVE A MARGIN</p>
</div>
<div id="full-row">I HAVE PADDING</div>
</div>
I prefer to ID my containers and CLASS my container elements. That way I can use nesting and target any container I need to modify without creating too many classes. But that is up to you.
I have used this JQuery plugin on a couple of occasions and may work for you, especially as both columns can be the same height based on the columns contents.
It's by Adam Wulf and can be found at http://welcome.totheinter.net/columnizer-jquery-plugin/.
How do I make multiple columns with equal heights that has a border between each section AND keeping it responsive... (see image below). I know you can use a background image if you have two columns but when theres more, the whole responsive part goes going.
EDIT: heres a jsfiddle I've made: http://jsfiddle.net/kF9LA/
What about two bg images, one with a border 1/3 from the left, and one with a border 1/3 right from the right? Then apply them in a pair of containers with background-position:33.3% 0; and background-position:66.6% 0;, respectively.
Similar to using a single image with a border in the middle, and background-position:50% 0;
Edit:
After running a quick test this seems to work, and it's fluid/responsive.
HTML
<div class="container">
<div class="bg1">
<div class="bg2">
<div class="content">...</div>
</div>
</div>
</div>
CSS
.container {width:100%; border:2px solid #000;}
/* Tile a 2x1 image for the border */
.bg1 {background:url(img/border.png) repeat-y 33.3% 0;}
.bg2 {background:url(img/border.png) repeat-y 66.6% 0;}
Edit 2:
Removed height:200px; from .content and added some text content to the demo, to show that the height can grow based on the content. Replaced the two bg images with a single 2x1 image.
You can take a look at the solution from Matthew James Taylor:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
I've got a couple of answers in a similar thread here. The best way to do this depends entirely on if you need the user to visually see the divs are the same height. If your final site will look like this mock-up (the only visual cue being the borders), you don't necessarily need to use MJT's method and instead could use a background image, like this.
As stated in the comment in the link above, this method won't work for horizontally fluid layouts, but if you have a fixed-width layout, you can use the background image for as many columns as you like. Just make sure you're math is right :)
However if your layout needs to be completely fluid, MJT's method is best. It requires extra mark-up, but is bulletproof.
The simplest way to achieve this is just to use a table with bordered cells, but if you have a lot of time on your hands, the CSS approach suggested by #nebulousGirl is the way.