https://realisation.github.io/sketch/
I'm trying to get that SVG to be the background and remain positioned flat at the bottom of the red section while the width and the height scales when the browser window is widened/narrowed.
I've tried a number of solutions with background-position, but none of them work -- it has to scale.
There IS an answer to this folks!
It's very STRANGE -- you do not specify the alignment properties of your image in your CSS, if it is an SVG, then you specify the alignment qualities in the SVG!
preserveAspectRatio="xMidYMax"
Did the trick.
Related
I currently have a div in my home page, serving as the first section of it. It has a background-image which is a SVG file.
What I'd like, is for the background to not move vertically when scaling it. Have it with fixed height, but scale horizontally.
Currently, I can get it to have 2 different behaviours, neither the one I want.
The first gif is closest to what I want, giving the svg element a height attribute and using preserveAspectRatio=none, but then the circles inside don't preserve their aspect ratio.
The second example could also work, but if the svg were clipped to the bottom of the div instead of the top. But I don't know how to make it scale "upwards" instead of downwards.
I want to use PNG (or SVG) background-image (background-fit : 'contain') and then dynamically change node border (based on data). Everything works except one thing: node border is rendered "centered" around the node, so half of the line is outside the node's dimensions and half is inside the node. This clips the background image (see nodes.jpg below).
nodes.jpg
As a workaround I tried to use 'background-width' and 'background-height' (set to 60%) to create something like padding in CSS but this changes the aspect ratio of the background image (it stretched the image) which I don't want.
Is there a way how to achieve the desired result with the current CSS styles in Cytoscape.js (I'm using CY 2.7.11)?
That's the way a stroke works in a canvas. Unless browsers add new API to control stroke position (inside, outside, on/mid), there's no performant way to have outer borders.
Set a padding to enlarge the outer width/height of the node without affecting its inner width/height (used for bg img sizing): http://js.cytoscape.org/#style/node-body
Just set a padding to half the border width or greater.
I hope what I try is not impossible.
Let me explain first: I have a responsive design which requires a background to be fixed under some situations (media query blocks). The design in question is this one:
http://think-open.at/fileadmin/templates/responsive/content.html
Basically there are two media queries: one for the maximal height and one for the minimal width. If there is enough viewport height there is a scrollbar in the content area and the design height is fixed. But if the viewport is not large enough for showing the predefined height the height-mediaquery removes the scrollbar from the inner div so there won't be two nested scrolling containers (body + div) and sets the content area to height: auto.
There is also a responsive media query if the viewport is too narrow but this works flawless.
Now the problem: When the design switches to the mode where the whole page scrolls (below 830px height) I would like to position the image in the right container "fixed" so it does not scroll out of the viewport. But then the problem arises, that I can't really position the background in regards to the container div as "fixed" positions an background image in regard to the viewport. I have created a CSS fiddle here:
http://dabblet.com/gist/ae5c3598e1465ce0c90e
If you change the width you notice the problem. I would like to have the right border of the image aligned with the right border of the green box.
Is this somehow possible? I have no problem using calc() as there will be a condition in my CMS to use the plain old-school design if an older browser gets detected.
I solved it myself now. Sorry for posting.
The trick was: As my design is centered, I started to try using calc(50% + somepixelvalue). This did the job.
I adjusted the CSS playground:
http://dabblet.com/gist/5b63553f47a81f3bb701
Now the image is always up in line with the right border of the green area. When scaling there is sometimes a 1pixel difference but this doesn't matter as the background will get assigned to some container element which acts as mask.
For reference, please see this website.
I want to use the faux columns method to ensure the blue background of the #secondary sidebar extends to the bottom of its parent: #main.
However, when I use Firefox Developer Tools Responsive View, and reduce the width of the viewport, #secondary's width becomes a %, but #main's background image remains fixed, so the blue part of the background image bleeds into the #primary content area.
I once read an article where someone used the faux columns method and was able to set the position of the background image to scale down when the viewport was scaled down, so that the colour change of the background image always lined up with the right hand side of the #secondary sidebar.
I am aware you can set the background-position to a %, but this matches a specific point x% in from the left of the image with a point x% in from the left of its parent, so it always stays in the same position regardless of what % you specify.
As kangaroo has written, the solution was to set:
background-size:contain;
for #main.
This CSS property is supported by IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.
I have a an image not covering the background completely of a div.
Can I specify the height of the image to make it larger?
transparent url(http://www.example.com/picture.jpg) height=??
You can not stretch a background image. Well at least you can not reliably do it cross browser today. The future CSS is most likely to support it, IIRC.
You will need to use a <img> element if you want to use the browser to stretch an image, but this is not recommended.
If you are not wanting to stretch the image, but more some of the background image is cut off, then expand the height of the element that has the background with the css property width or height.
Background images can't be stretched.
Use an img tag with absolute positioning and z-index it behind your other elements.
You should only specify the height of the div. And use
repeat
property of background.
If you need to stretch use an image inside the div and make height and width to 100%.
if the background is just a solid color, you can use repeat-y.
CSS3 does this with http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size. Sadly no browsers support that yet. You have to do a img.
See http://webdesign.about.com/od/css3/f/blfaqbgsize.htm and http://www.kyrnin.com/about/blfakebgstretchexample.htm