I have a nice background SVG image from inkscape which marks the transition from one text section to the next. I want that background image to scale up or down to the full width of the text section. For reasons of responsivity, that size depends on the browser width. However, I want that background image to have a fixed height of 20px.
What does not work:
background-size: cover;
That does not work for me because it will cut the image off at the right instead of scaling it down, okay.
background-size: contain
That does not work for me because it will always scale the image down in x and y direction simultaneously. As a result, the image always retains its original x-y-ratio, okay.
combining cover and contain
That is not possible for syntactical reasons, okay.
background-size: 100% 20px;
or background-size: auto 20px
That does not work, even though I would have expected it to. I tried it with a PNG and it worked. But with the SVG, the width is being adjusted correctly and the height is then also being adjusted so that the image does retain its original ration, which I do not want it to. However, I wish to use an SVG because it's a relatively simple image and I want it in the best resolution on all devices, including the really big screens, without using a huge PNG image.
As the problem seems to be SVG-specific, I opened the SVG in a text editor and inserted into the tag the attribute and value preserveAspectRatio="none". As it did still not work I also tried removing the width and height and viewBox specifications in the SVG tag. No success.
So I tried around and found a possibility:
in Inkscape or in a text editor, set the following viewBox according to the size of your image – so if your image is 100*20px set it like this: viewBox="0 0 100 20"
in a text editor, add preserveAspectRatio="none" to the SVG tag
also, in the SVG tag set the height and width in percents: width="100%" height="100%"
in the CSS markup, then simply use background-size: 100% 20px;
With these steps it is possible to scale the background SVG using CSS in the same way that one would scale any bitmap image.
SVG vectors are rendered differently than static images. They are traced live on the browser. This is what makes them great for web use as they can scale in size without losing quality. Because of this css is unable to alter the rendering in a way that would distort it. If using svg is a strict requirement and assuming you expect dynamic widths then you could split it in multiple sections and have them distributed horizontally giving you the effect you are looking for if your width is static then just edit it on any online svg editor or Illustrator.
FYI this might be a duplicate question:
How does one make a SVG background that stretches rather than tiles?
Related
I'm getting started with responsive design and just built this very basic "responsive" image sequence http://goo.gl/iMGRkL using the img tag.
Now I'm trying to do the same but using background-image instead of the image tag.
Is it possible without Javascript? I tried a few different approaches, including this http://goo.gl/AstSdl, but no luck so far.
Thanks in advance.
If you are using the css property "background" or "background-image", a good way to do it is to give the particular background image a parent such as a header, div, or section. Then you can use the css values "center" to center it in the parent container, and "cover" to make the image cover the parent div container. You can also play around with pixel and percentage values here. Another thing that is very important is to set the background repeat to "no-repeat" in your css so it doesn't repeat. This code will make it so that the image will cover the parent container at any width or height.
ex: background: #ffa949 url('example.jpg') no-repeat center / cover;
After doing that, the image may still looked a bit scrunched so it would probably still be a good idea to add some media queries.
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/
I want to create a polaroid style image using CSS. However, I'd like to square the image creating a large thumbnail so all images are the same size. I don't know the dimensions of the image beforehand and they are likely different. I was thinking of using a figure tag along with the figcaption to caption the photo. How do I create the thumbnail when the dimensions of the image are unknown. I looked at Create Resizing Thumbnails Using Overflow Property and Creating Thumbnails Using the CSS Clip Property, but neither seemed to account for unknown dimensions.
This Example uses the overflow technique to create a thumbnail by only setting the width, and the height of the image is auto set The container div then hides the excess image beyond what you want to show.
Then by simply using padding and container divs, you can create the white polaroid affect.
This Example lets the image have full 100% width, and find image with the shortest height, and applies this height to all the polaroid images so all the polaroids are the same height. If you aren't really worried about having them each the same height. Then do it this way
It is fairly simple with the figure and figcaption tags, and I was able to recreate the effect without any superfluous markup.
The really essential CSS is:
figure{height:155px; width:125px; overflow:hidden;}
and by applying position:relative; to figure as well, and using some relative positioning on the figcaption, you are able to get a neat Polaroid effect.
Demo
Because you suggested them, I'm sure you know how figure and figcaption are supported across browsers.
Clip only works with rectangles. Overflow will work fine, just define the width of the images in the class.
Example
I'm working on a project for an Artist, the project has been passed to me as the design has been completed. I have receieved the design in a .psd file and the size is huuuuuuuge 2504px x 1781px to be exact!
As there are lots of patterns and gradients on it, I'm a little unsure as to how to set the image up. I have put the image up online, I think the first pressing thing is to resize it to suit more modern screen sizes.
The image is attached, Any help or suggestions on how to manage the image are much appreciated.
Cheers
That´s not a very flexible design for different aspect ratios, stretching it on a wide-screen monitor will not look pretty.
I would probably make multiple versions of the image (different sizes) and use html5 and / or javascript techniques to serve the right image to the visitor.
I would not use it as a background image but put it in a div behind the rest of the content so that I can scale that div and the image to be 100% wide. Positioning it in the bottom-left corner should make the most important part (the frame) always well visible.
I hope for you that mobile browsers in a vertical position are not a requirement...
you can split ('old style' way) the image in parts (in a glace, a header, a right column, a footer) and use'em as background images for divs. I suggest using photoshop built-in funcions "save for websites" to optimize the image (as Jpeg) to get the best ratio 'small file - best appearance' (something like medium (50 or 60) quality, multiple passage otpimization and a 1000 px width).
This if you want to keep the fixed layout..
What resolution is the website designed for?
I found that resizing the image to 1280px width (911px height) works nicely for a browser window size of 1024x768, which is pretty much the minimum that anybody's going to be using these days.
With this CSS:
body {
background-image: url('/path/to/your/background.png');
background-position: left bottom;
background-attachment: fixed;
background-repeat: no-repeat;
background-color: #000000;
}
.. the main part of the picture (people holding the frame) will always be in view, and larger browser viewports will get more of the top and right portions of the picture.
However: Anybody with a browser with above 1280px will see the plain black background color.
Edit: There's also the CSS3 property background-size: 100%;, which will automatically shrink/stretch the image to fit the browser viewport.
Update: I found that PNG-8 gave me the best quality-vs-filesize for the resolution I mentioned above. It came in at 280KB, whereas a comparable quality JPG was in the 330KB range.
Consider using a fixed size layout with the same aspect ratio as the image and resize the image to the same dimensions as the layout. You can then either set the background colour to the same black as the image or a complementary colour.
A layout of around 1000px * 700px works well on most computer displays.
If you must have a flexible layout then it would be really nice if you could separate the components of the image (do you have all the layers?). ie the frame/people, the red floral designs of the corners, and the background with crossed bands.
Then use several divs and some javascript so that the frame and hands stays locked in position relative to the bottom left corner, the floral designs always gravitate towards the four corners and the background moves so as to keep the frame in the dark diagonal area; kind of sliding up and to the right along the red band. (I can see it in my minds eye bt it's hard to describe.)
I have a transparent PNG that is used as a picture frame, and I want to utilize the background-image declaration to place an image in the transparent center of the frame. The problem is that the images I'm using in the background need to be shrunk a bit to fit all of the image's content into the available frame area.
I don't think there is a css or html solution, can I use javascript, jquery, or perhaps php to dynamically shrink the background images to a certain with on load? Thanks.
CSS-2 does not support scaling of background images.