I have a document where I use a 40×40 pixel repeated background texture on the body.
Then I have a div with a set width and height and centered with margin: 40px auto 0 auto;
Now, the background image of this div (let's say it's 960×500, same as the element itself) has the same texture as the body. I cannot use a transparent png, because of a graphical effect I'm trying to achieve with this image.
However, for the effect to work, the background of the div needs to be seamless with the texture of the body. The user should not even be able to tell that there is a separate block element there; just an endless sea of the texture, with a detail in the middle of it all.
This becomes difficult as the div is centered, and as such, its horizontal distance from the left varies.
How can I make sure that the background texture on the body always matches the simulated texture in the div to the pixel, regardless of page width?
I'm not scared to use a JS solution if necessary, but obviously would prefer a pure CSS solution.
What you want to do is to set the background image on the body element to start in the middle. So:
body {
background: url(to/your/tile.png) 50% 0;
}
This means that no matter how the window is resized, you will have a predictable area within the repeating pattern.
You'll then have to tailor the containing div's background to make the tiling in the body.
Here is some code showing how this method would work: http://jsbin.com/olabos/2/edit. Note how resizing the window does not put the pattern out of sync. Hover over the middle of the preview to see where the wrapping div is.
NOTE: some caveats to this technique, depending on how the browser handles half a pixel, you will get a 1pixel difference in the background. I don't know of another technique that will solve your problem, so hopefully you can live with being 1px off.
If you are trying to use a 40x40 tiled image as your body background, and a 960x500 image with the same background on top of it, use the following code:
body {
background: url(repeat.png) top center repeat; /* 40x40 image goes here */
}
div {
background: url(overlay.png); /* overlay image goes here, must be multiple of 40px wide, example is 960px wide x 500px tall */
width: 960px; /* must be multiple of 40px wide */
}
You may need to edit this CSS snippet and you may have to do a bit of tweaking to your overlayed image to get the seams to line up but this should line them up nicely with eachother. I've used it on a few sites before and it works well.
If you have any questions or if I have overlooked a certain scenario, let me know and I can take another look at it. An example of your code would be useful.
Related
I'm wondering because I am coding through multiple screen sizes and making a game that requires event.pageX and smaller screen sizes mean squishing everything as well as bigger screen sizes that push everything outwards. Is there a way to keep everything all positioned into one place so if you change screen sizes it is still positioned the same?
There are few css tricks that can helps you with your problem:
You can define body width and height, that will prevent window changes on resize, for example:
body {
width: 800px
height: 800px
}
Avoid using percents in element position defenition
Css position : absolute can make your element behave independently from other elements. position : fixed allows you ignore even user scroll if you need this. (more info)
small jsfiddle with some examples:
https://jsfiddle.net/qc3p2d5h/2/
I found this in a stackoverflow question on how to draw in canvas http://jsfiddle.net/ArtBIT/kneDX/ and now I want the canvas to cover my whole html page. For example:
<body>
<div id="2">
//code
</div>
<div id="2">
//code
</div>
</body>
So the canvas will be attached to the page and the user could draw over the content of the page. So is there any way to create the canvas inorder to take the 100% of the body be hidden apart from the drawing lines?
Edited:
How can I draw lines continuously without making circles in the above code? Also is there any way to draw something over the text without selecting it when you pass the mouse over it?
First, make the height and width properties of the canvas equal to the page height and page width. (Getting those values is quite difficult, so see the linked questions for the best way to do it -- or just use jQuery.)
Next, add some CSS to make the canvas sit in the absolute top-left corner of the page:
#canvas {
position: absolute;
top: 0;
left: 0;
}
Then, don't change the background color of the canvas as you currently do by calling ctx.clearTo. Canvases are transparent by default, so you'll be able to see the page underneath of it, as long as you don't change the background color.
Pass in the right width and height params instead of (200, 200)
Using window.screen.width and window.screen.height gives you this: http://jsfiddle.net/kneDX/878/
Update:
With this we will end up in canvas being as big as window and not the same size as client area. See apsillers's answer.
I am trying to create an interactive page where there's a ball. When I click on it, 2-3 random balls appear on the page. Each of those, when clicked, produce 2-3 of their own and the page slowly fills up with such balls. I have done this part using Jquery.
Now the page has a background image that is hidden from the user, and all he sees is 'white'. As and when a new ball appears, a circular region behind it (region being twice in size to that of ball) becomes transparent to reveal that portion of the background image, kind of like how the map is revealed in Age of Empires based on where the player goes.
How can I achieve this selective-revealing of background image based on the position of newly-created divs ? Can it even be done using just jquery/css and NO flash ?
My Jquery code for creating new balls looks like this :
$(document).on("click",".ball_link", function makeDiv(){
count=0;
//ajax code to fetch no. of divs to be created from table
while(count< no_of_divs)
{
//code to calculate random x,y coordinates and save them to posx and posy
var newdivid='div'+count;
$newdiv = $('<div/>').css({
'position':'absolute',
'left':posx+'px',
'top':posy+'px',
'display':'none',
'background':'ball.png'
}).appendTo( '.page-wrap' ).delay(900 * count).fadeIn(600).effect("bounce", { times:6, distance:15 },300);
count++;
}
});
You can use CSS background-clip, background-position and border-radius. Your newly created divs should be bigger than 'ball.png' with some border-radius so they appear as circles.
Then you can set the background position to be equal to negative div's position:
if div is on left: 100px; top: 40px then background-position should be: -100px -40px
Working sample here: http://jsfiddle.net/bndcS/
EDIT
Please see the fiddle here: http://jsfiddle.net/UX3B6/ The 'balls' appear with effect and delay.
Only one line of CSS had to be added :-)
EDIT 2
As for background and its negative coordinates: imagine that you have a big div with a nice image in the background. Now you create a small div on top of the big one. You set it in the top left corner (0,0) and set the background to the same image of the big div. Images match perfectly. Now you want to move your small div a little bit (lets say 20px right, 20 px down). Now the images do not match - in order to make things working again you need to move background image of the small div in the opposite direction you moved the div itself, hence negative coordinates: (20px left, 20px up = -20px)
You can use css3 transitions here is sample and tutorial it might useful
http://css3.bradshawenterprises.com/transitions/
I have a set of divs with position = absolute, and they can be positioned across the screen.
If the content of any div doesn't fit on the screen, the browser wraps the text into multiple lines and attempt to fit inside the window.
However, I dont want the browser to do that, It should instead hide the content.
http://jsbin.com/welcome/35835/edit/
Edit:
you may think of it as a div on a page with absolute positioning. and
1) the user can drag the div around
2) user can manually change the width of the div( there is a stretch box widget, which the user can use)..
So the problem is when the user is dragging the div around near the edges of the screen, the text should hide and not wrap if it goes out of the window. Hope this explains better
As shown in the example, block 2 shown is what I want.
So, lets say the width of the div is 100px, and the left position of the CSS style is (screen width - 50), then the rest of the text should hide.
Solution 1: white-space:nowrap. Cant use this, since this is a flexible width UI where user can change the width of the div if they want.
Solution 2: If I set the width of the div, explicitly to a number, it works fine.
But not a optimal solution, as then here I will always have to calculate the width for all divs at the time of rendering.
Is there a more optimal solution, which can make the browser not try to fit the text into the screen.
Hard to tell what you're asking. But I think you can use
{
height: 1.2em;
overflow: hidden;
}
To hide the content that is longer than the one line you support
http://jsfiddle.net/MXXDC/2/
If you put them all inside a huge (e.g. 5k px * 5k px absolute positioned div you should see the expected effect: http://jsbin.com/welcome/35862/edit
Is this what you want? (second item)
I wrapped the inner text in a very long div and applied overflow:hidden to it's parent.
I am not sure the exact use case of the widget so I am not 100% sure on what it can have and not have. I have an idea, maybe it will be useful - setting width to a % might help, something like this
.block2{
left: 50%;
top: 100px;
width: 100%;
}
you can set this in the css to avoid calculation with js, but like I said I am not sure of how this is used so this might not work but it might give you some ideas
I have a 700x300 background repeating seamlessly inside of the main content-div. Now I'd like to attach a div at the bottom of the content-div, containing a different background image that isn't repeatable, connecting seamlessly with the repeatable background above it. Essentially, the non-repeatable image will look like the end piece of the repeatable image.
Due to the nature of the pattern, unless the full 300px height of the background image is visible in the last repeat of the content-div's backround, the background in the div below won't seamlessly connect. Basically, I need the content div's height to be a multiple of 300px under all circumstances. What's a good approach to this sort of problem?
I've tried resizing the content-div on loading the page, but this only works as long as the content div doesn't contain any resizing, dynamic content, which is not my case:
function adjustContentHeight()
{
// Setting content div's height to nearest upper multiple of column backgrounds height,
// forcing it not to be cut-off when repeated.
var contentBgHeight = 300;
var contentHeight = $("#content").height();
var adjustedHeight = Math.ceil(contentHeight / contentBgHeight);
$("#content").height(adjustedHeight * contentBgHeight);
}
$(document).ready(adjustContentHeight);
What I'm looking for there is a way to respond to a div resizing event, but there doesn't seem to be such a thing. Also, please assume I have no access to the JS controlling the resizing of content in the content-div, though this is potentially a way of solving the problem.
Another potential solution I was thinking off was to offset the background image in the bottom div by a certain amount depending on the height of the content-div. Again, the missing piece seems to be the ability to respond to a resize event.
Another approach is to calculate the background-position style for the bottom and top DIVs based on the size of the content DIV. You can use negative positions to align the bottom of one to the top of another.
Yet another approach is to use a layered DIV approach in which the top, content and bottom are all children of a parent DIV that contains the background.
The benefit of these approaches is that it doesn't change the natural rendering of the content DIV simply for managing the background.
Example: http://bin.googlecode.com/svn/trunk/css/repeating-bg-content.html
Could setting background-position: fixed in your css help? Then your bottom div could move, but its background image would remain fixed in relation to the top of the page. As more of your repeating image was revealed, so more of your bottom image would be hidden.
This would comes under the heading of "offset the background image in the bottom div by a certain amount depending on the height of the content-div", rather than "the content div's height to be a multiple of 300px under all circumstances".
You could try adding an event listener to the div:
var div = document.getElementById("content");
div.addEventListener("resize", adjustContentHeight, false);
If nothing needs to match up at the top, position the repeating image at the bottom of the div (so the overflow will spill over the top). Like this:
div#repeating { background: transparent url('/path/to/image') repeat left bottom; }