I've got a simple question :) Hopefully.
So, I wan't to repeat a website-background-image with CSS. But not pixel by pixel - no - pixelinterval by pixelinterval. For example I want to repeat pixel 0 to 100 of my background image each time it is needed on the y-axis.
For normal, if i had a background image to repeat with the dimensions of 1000*1 px, CSS would display this image each pixel-line in the browser, until it's not needed anymore.
Now, if I put in a 1000*10 px image, CSS would repeat the image as long as there is the need of it PLUS only as long as there is content to display on. That means, if there is (for example) no text to be displayed anymore, the browser would stop displaying the image, even if there were only 1000*5 px of the image displayed.
What I want is to display the full image, even if there is no content displayed on it. That means if the 1000*10 px image is repeated, it's displayed by it's full size. Everytime 1000*10 px - never less.
Is it possible to archieve that somehow?
thanks :)
You can put all of your content in one DIV.Add your img-background style to this DIV. Then with javascript you must get the height of your content , add 5px and round number to 0. Then add the new height to the DIV.
I'm not sure there's a way to do this with pure html/css that would work cross-browser, but you could look to javascript to calculate the height of your container, and work backwards from there, explicitly setting the min-height to a set interval as you'd like...
Related
This is kind of a specific question.
<div id="d_btn">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
</div>
Here's a jsfiddle: https://jsfiddle.net/fcjwjutb/
you'll notice it creates an image button which is really just a div with a background image, and that thanks to a base64 data of a single transparent pixel the aspect ratio is always 1:1 (a different pixel w/h would give different aspect ratio). it changes the image when you hover.
the problem is: if I resize the window vertically, the aspect ratio breaks.
however, automagically, if you refresh the page - the aspect ratio returns to normal.
what I want is the aspect ratio to stay correct while you resize the window, without having to refresh. what would I need to change in this specific example to accomplish this? looking for a CSS answer, not JS.
the "trick" to maintain aspect ratio here is the fact that if you set only height or only width, the other parameter should automatically maintain scale if there's an image involved, that's what the 1pixel is for.
I don't get why this breaks upon resize though, when initially upon page load it works correctly.
The issue seems to revolve around the fact that when you resize, the div's background image stretches instead of... well... not stretching. but the div itself also gets resized, while the img child inside of it doesn't, and maintains its aspect ratio as intended.
after seeing some incorrect answers let me make something clear:
the div and the image size have to match. hover event should only get triggered when you hover over the image itself, otherwise this doesn't feel like a "button". basically you're not allowed to have a div larger than the image, or else you create blank area that triggers a hover event.
the answer I'm looking for is one that is able to make the div itself resize in a way that keeps the aspect ratio while you resize the window, while having the background image always cover the entire div.
You can use background-size property to ensure background images maintain their aspect ratio within a given container.
It is also bad practice to use IDs for elements like this one.
I have solved the problem for you...
https://jsfiddle.net/x18h41yr/
You can also use flex-box to now centre page elements vertically & horizontally. Read more about flexbox here
Been using ImageResizer quite effectively on my projects but just ran into an issue.
I have an img element that can have it's src change frequently but I always have the same dimensions of width and height to resize, along with the anchor=middleleft.
However, I don't want to upscale, so sometimes an image that is too small will be placed there and it won't anchor as desired.
Does anyone know a way to allow the anchor to still work when the image is too small to resize it? Or am I just going to have to have a fallback of css left alignment?
Try scale=canvas. This ensures the returned image is exactly the requested size, and adds padding as required.
Is it possible via CSS to force the background-image which is repeating that it should be completely visible (not cut at the end of the container)? The container-height is flexible!
It should look like on the right side but I get a result like on the left side if the content
grows.
There are two possible ways:
avoid the background-image to overflow (I can't use background-size: contain because it's repeating)
force the container to grow gradually
Is this possible?
this is not the best solution but maybe it will help: if you can ignore IE8 and below, you can use the background-size property, it will allow you adjust the size of the images with percents so they will feet completely to what you need (and will stay in the same position at resize), then you can use the background-position property and move the images little bit for a better result. then, when you will try to resize it you will see that it stays in the same ratio on the screen but the images are getting bigger because of the percents, so make sure to upload bigger images from scratch so when the images will get bigger they will not resize above the real image size.
example: http://jsfiddle.net/fq5dkL51/2/
Please visit website: http://viewlike.us/ and change resolution to e.g. 1920x1200 - in mostly cases header (div with input form and submit button ) is not anymore 100%. How to avoid this situation? Ive tried to use width:100% !important, min/max width - but without success. I suppose there should be a small trick/fix or sth to avoid it but Im struggling with lack of ideas.. thanks~!
I think the default value for the width property is auto for most elements. And in this case, the <div> is expanding to 100 percent of its parent element, which in your case is <body>. Since the <body> tag has no width defined, it will default to 100 percent of the browser window. So even though the width of the page located below the resolution selection bar is greater than the browser window's width, the top bars (URL entry and resolution selection) still have the width of the browser window. That is why you see the edge of them when you scroll to the right.
You might want to experiment with using position: fixed in combination with the CSS properties top and left for your top bars. That way, those bars will be on-screen even when you scroll the page to the right. (I tried that breefly and it should work.)
I hope that helps you!
I have this website.
The div container contains a background with a grungy look, and the body contains another background that is repeated on the x coordinate.
If you view the site you'll see whitespace on the left and right side. I am wondering how I can set the background images to expand based on the screen resolution. Would it work to set a width based on percentage for each div?
To my knowledge, CSS does not support scaling background images, which is disappointing to say the least. Long story short, you'll probably have to fake it with a fixed-position, z-indexed img tag. That, or what you did: a large image with a background-repeat.
I dont see any issues with what you've got in FF3/IE6/IE7 and chrome. only issue i see is the transparent png in ie6 with the ugly gray behind it.
ie6 I gotta fix but what the customer wants is for the with of the page to size up based on the users computer resolution
Unfortunately, you can't scale the image itself.
What you could do would be remake the div structure so that the inner div contains the center of the grungy background and the sides were tiled through two separate divs. You could then recut the center piece to tile both vertically and horizontally and give it a width that is a percentage of the window size. You could keep it from getting too small via javascript.
This is not an optimal solution, but if the client is set on having it scale with the browser window, this might accomplish it for them.
thanks for all your answers, when i said white space i didnt mean actual white space what i was refering to was that the entire container div wasnt sizing (width wise) towards what the users computer resolution was. and since allot of the divs are set with a background image there is no css code for setting the width on the image but i guess it would work on the divs. but thankfully after talking with the customer he changed his mind and doesnt want it anymore :)