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.
Related
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?
is there a way to crop a background sprite?
We have our background image to the CSS body class. Now, if there is not an element with a white background overlaying the rest of the sprite, we have this mess of all the other images there.
I tried background-size, but that doesn't do it. So is there a CSS value that I'm missing that defines not just the background position, but also the actual area the image that should be used?
Thanks!
https://www.w3schools.com/css/css_image_sprites.asp - This article covers the use case senario and correct execution of how to use image sprites.
Okay, so the only way I could work out for this is to put the main body page background at the bottom of the sprite. Assign the correct background-position values and add a background-color: #fff, so the rest of the page becomes readable text.
Thanks for your input!
Here's my dilemma, I've got a background image that has a bar on it. I fit the background image by using
body {
background-image: url("foo");
background-size: 100%;
}
I also have some html that I want to be inside that bar. The problem is, when the user resizes the browser window, the image adjusts to fit it (which is what I want it to do) but the html stays in the same spot, so it gets put outside the bar. Is there a way I can make my html resizable like the image so that it appears that the html is glued to the image? Can somebody give me a css clip for this?
The biggest problem with using images to guide your layouts is exemplified by this issue. Unfortunately, Harrison, you there is no solution that will enable you to do what you want across browsers or browser sizes without changing the image. If you can, please post a screenshot of what it is supposed to look like so that we can help you modify your background to improve its compatibility
In the meantime, I suggest that you remove the bar from the image and continue to use the image as your background. Then use a div with display: block; and use the bar as its background.
If you want the bar to be resizable, set its height and width to percentage amounts of the container height and width. Of course, when the window is reduced in size to a large extent, the HTML would spill out, there's no remedy for that.
I want to build a fixed width website which is 960px wide and aligned to the left. However, I want to use a background which is wider than 960px and that fills the space to the right if the user has a screen wider than 960px.
This is easy using a background image:
body {background:url(myreallywidebgimage.png) 0 0 no-repeat}
#wrapper {width:960px;}
But can I do it where the background is an SVG, without a horizontal scroll bar appearing?
The only thing I can think of that would turn off the horizontal scrollbar is to do something like as follows:
#wrapper {width:960px; overflow-x:hidden}
Edit: Upon further reflection I decided it was best to see if Google offered up an other possible suggestions and I came across this: http://helephant.com/2009/08/svg-images-as-css-backgrounds/. The above solution will only work if you assign the background to that div element. You can, however try assigning overflow-x:hidden to the body itself to see if that solves the problem as well. Hopefully these suggestions help.
The background will scroll only if your SVG image has pixel dimensions which exceeds that of the browser window. If you set the image to have 100% width and 100% height, the background should not scroll.
Take a look at this web site. They're essentially doing what you want. They have an SVG gradient as the background. As you resize the browser, the gradient adjusts to fill the entire window.
http://emacsformacosx.com/
They also have a lot of other SVG on the page, but the background gradient is all you need.
I would like to have a repeat-x on my body background for a web site, but the background is 1024 wide, so on wider displays, the line where the image begins again will be positioned to the right of the body, and possibly visible. My content is in a div 800 wide centred on the body. I would like the 'split' like from the repeating background to occur in the centre of the body, where it is hidden by the content.
I'm sure this is possible, with some trickery, the details of which are beyond my novice design and layout skills.
WORKAROUND: I used the Liquid Rescale GIMP plugin, which uses seam carving, to stretch the images to twice their original size. It works great, and I'm happy for now, but it's not an answer to this question.
A straightforward way to do this without any CSS trickery or extra markup is to modify the image. Center the background image with:
background-position: top center;
...and then offset the actual image file in an editor. In Photoshop use Filter >> Other >> Offset and use a horizontal value that is half of the image's width. Likewise, in the Gimp use Layer >> Transform >> Offset.
That's not the clean CSS solution you were looking for, but it's a nice pragmatic fix.
just put in the style:
background-position: 400px 0px;
this will start the repeating 400px from the left side (thus moving the split under the content)
I think it is not possible to do this dynamically (without taking the screen size into account) without using CSS expressions. I don't know the details about browser support though. A quick google search turned up this page as an example of how to do this.
http://valums.com/vertical/
Adding to what David said, creating a seamless, tiling background image isn't that tough:
Seamless background with Photoshop
It takes a bit of time, but it will look good at all screen resolutions once you're done.