I would like to create a background image inside a container that is about halfway down on the page. The height would maybe be 20%-30% of the screen height. Do I need to create more than one image and use CSS Media question to display one image and hide all the other images for each resolution range? Or, is there an easier way to make the image scale automatically. Does it help if the image is in vector format?
If you want the image to always cover the div, you can use CSS3's new background-size values:
background-size: cover | contain;
cover
With cover, the image will always fill the whole container no matter the size, the browser will adjust the image, and the image might get cropped.
contain
The whole image will be always visible, i.e if the container gets smaller than the image, image is scaled down to fit the container, this way, it's normal to see empty spaces in container.
Related
I have a div (suppose 30px width and 30px height) and i am using a sprite image for all the images ,now there is one image in the sprite at background-position : -12px -1467px (just an example)
whose width and height is 70px and i want to apply this image as background to given div.
The problem is how to scale that image to fit in the div size.
This should not break if i increase or decrease the div size based on resolution.
My sprite's width and height can be changed (more images can be added later in the sprite).
This question may be duplicate as few people suggested but i am not able to understand those question properly.
I have created a fiddle for this.
In the fiddle 2nd div shows the original sprite,and in the first div i want to show only first image but when i resize the div the first image should resize with div (like if i am using an individual image instead of a sprite).
One way to do this to have first div equal to first image and then on resize use something like transform:scale(.5) ,but i don't want to use that.
Set background-sizeto whatever % you need to fill the div
I've got a large div where users can swap out the backgrounds with either patterns or their own images. For small background images that are not sized to cover the entire div, I want the images to repeat horizontally and vertically and not stretch to over 100% of their natural width. For larger images that would cover more than the width of the div, I want to limit those to not stretch beyond 100% of the div width so that the entire width of the image is visible.
Is there any way to accomplish this without using JavaScript?
Plunker here:http://plnkr.co/edit/Pkx49a3Ku34YsupqLCRs?p=preview
#background1 should repeat as it currently is
#background2 should not stretch beyond 100% of the container width
To clarify, I'm looking for a solution that doesn't involve JS and will work for BOTH cases (can't just add styling to a specific element)
i have two div in my html page like this image.
main div with background image has responsive technology. i have second div with face picture as main div content that show in above picture with red border, which its resizing should be correspond to the main div background in a way that it's Aspect ratio remains last value.
http://f6design.com/journal/2011/10/18/responsive-elements-that-retain-their-aspect-ratio/
You have to manipulate the padding property on the parent div to get the desired effect of retaining the aspect-ratio. If you show me your code from some live website, I can further pin-point where you need to make the changes in your CSS.
I am using a layout where I have a centered title/logo image at the top and it connects with the background image which is being repeated vertically.
The problem is that the background only stays centered as long as the viewport is sufficiently wide enough. When I decrease its width below the width of the background image, the background image is no longer centered and is just drawn starting from the left so it no longer connects to the logo image.
I drew that picture just for your personal amusement.
is what you mean like this http://jsfiddle.net/yuliantoadi/FZAMX/ ?
Set min-width on body to be at least equal to your image with borders. In this test case that is 642px;
Have you tried setting min-width on html to be the min-width of the image? I tried that on your first link in Chrome and it seemed to work. I set min-width to 680px.
I ended up not using a body background-image after all, making a 100% min-height div which always extends to the bottom is much easier. Here's what I came up with: http://213.251.177.42/misc/background-problem/container.html
I would like to place a canvas on top of an image that I have on a page. The canvas will be the exact dimensions of the image.
However, the following conditions must be met:
The canvas must remain exactly on top of the image at all times. Therefore, using absolute positioning will not work because if content is inserted above the image, it will move the image down without moving the canvas.
The image may be resized from its original size. Therefore, replacing the image with the canvas and setting its background to the image will not work.
What options do I have?
You should be able to use position:relative instead of absolute for your first requirement.
For the second I'm guessing you could put both the image and the canvas inside of a span. The canvas would have a width/height of 100% and would be resized as the image resizes because the size of the div would change to fit the image.
EDIT: actually I'm not sure position:relative would work. But I believe if you use position:absolute and the parent element has position:relative, than the absolute positions will be relative to the parent.