I'm making a page that will just display an SVG image, and here are the requirements:
the vector should take up the entire window
the vector should maintain its aspect ratio (defined in the SVG file itself)
the vector should crop/clip in order to prevent skewing
The CSS...
body {
background: url(/path/to/image.svg);
background-size: cover;
}
...works almost perfectly except that when the browser window becomes too narrow it tiles instead of cropping/clipping.
Here are some screen shots (please ignore the artifacts left by dabblet):
Here the window is close to the aspect ratio of the original image
Here the window is "shorter" than the aspect ratio, and the image is cropping (as desired).
Here the window is "narrower" than the aspect ratio, but instead of cropping, the image is tiling (undesired).
Here are some thoughts that I had...
Could I change the SVG image in some way to prevent this from happening?
Could I markup/style the page to achieve the desired results?
I would prefer to keep in the realm of HTML/CSS, but if Javascript is needed, then so-be-it.
Here's the dabblet that I was working with... http://dabblet.com/gist/6033198
After some trial-and-error, this is what I found.
Adding (to the original CSS):
html {
height: 100%
}
delivered exactly what I was looking for in the original spec.
Additionally, if I wanted the image to be center when it was cropped, I could use:
html {
background: url(path/to/image.jpg) no-repeat center center fixed;
background-size: cover;
}
Lastly, if I wanted it to be centered, always maintain the aspect ratio, but NOT be cropped (i.e., some whitespace is OK) then I could do:
body {
background: url(/path/to/image.svg) no-repeat center center fixed;
background-size: contain;
}
For me I had all other properties set except background-attachment:fixed. I had experienced the same issue on a site of mine for ages, one of the most elusive and infuriating bugs I've ever come across, but adding this to the html element seems to have finally solved it for me.
This css is working.Thanks
"background-size: contain;"
.cover{background:url(images/cover.jpg) no-repeat top center; display:inline-block; width:100%; height:400px; background-size: contain;}
<div class="cover"> </div>
Related
I have many icons svg, I could use them as fonts if that is helpful and I would like to use ng-click(basically any kinda of click you know) the way that when i click on svg1 and svg2 wont be clicked. Till now i have tried allot of icons and many ways of doing it without success. I have upload to codepen small example, each region of that country have it's own svg which cover other svg's and make click on them impossible. Basic use of svg is below:
<svg>
<use xlink:href="#icon-region"></use>
</svg>
Since all <svg> elements in your page are absolute positioned and have both width and height of 100%, it's possible to only catch elements from the last element. That behavior comes from the way elements are rendered, within layers, like the example bellow:
+-<svg>--+
|+-<svg>--+
||+-<svg>--+
||| |
+|| |
+| |
+--------+
If all those elements have the same width, height and position you can only catch events from the last one, on the top of all.
To avoid this behavior you can do the following, with CSS:
.regionPosition {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
pointer-events: none;
}
.regionPosition > * {
pointer-events: all;
}
This way you disable the event listening from <svg> elements – with regionPosition class – and catch only the events from their immediate children.
Since you're using <use> inside your SVG to get the actually graphics, you can't rely only on Angular to bind the event, because the elements are not yet there when you load the script. You'll need to attach the event listener to the document and then check the target before call the function you want. This can be easily done with jQuery, as follows:
jQuery(document).on('click', '.regionPosition > *', function () {
// Call your function.
});
I changed your code a bit to show how to do it, here: http://codepen.io/anon/pen/waLwrm. I'm using a simple window.console.log() call to just log the clicked element. You can change it to another logic in your final code.
Reference:
jQuery hover problem due to z-index
The content of my webpage is going behind the side menu I have positioned to the left.I want the menu to be fixed however whenever I do so the content hides behind the menu to the left. Any help would be much appreciated. (Apologies for formatting, new to the site.)
.menu {
padding-top: 150px;
height: 100%;
width: 170px;
background-color: white;
float: left;
display: table;
position: fixed;
}
Fixed elements are no longer within the page flow, they act in the same way as an absolute positioned element. Chris Coyier has a really good explanation about the differences in positioning http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
In order for your body content to stop flowing behind the fixed property, you need to create a container (if one does not exist yet) that all of the body content resides in, except of course the nav/menu bar. You then apply a padding-left to the main body content equal so the width of the fixed element so that the main body content is always padded away from the left of the browser.
Fixed elements don't affect the flow and positioning of elements and position:relative on a parent container has no affect on a fixed element.
I already have setInterval for the images changing on my website. My problem is that it is only the first image that is replaced with the retina image. How can I load my retina.js again when the other images is loaded? They are changing every 5 sec
I use the script from retinajs.com.
By using CSS media queries you can serve these high–resolution images automatically to retina devices.
/*CSS for basic styling and non-retina image path:*/
.icon{
width: 100px;
height: 100px;
background-image: url(icon.png);
}
/*CSS for serving the retina image to devices with a high "device-pixel-ratio":*/
#media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.icon{
background-image: url(icon#2x.png);
background-size: 100px 100px;
}
}
UPDATED:
- Cons(retina.js): If you are using retina.js you are serving
normal-sized and #2x images to retina devices, which dramatically
increases the loading time of your site. I cannot recommend using
retina.js if you care about a fast loading time.
- CSS media query (Pros): By adding a CSS media query that detects
high-definition displays you can change the image path of the
original background-image to the #2x image for those displays.
Update:
You might need to modify retina.js to work in slideshows.(See here https://github.com/imulus/retinajs/pull/26)
Modifying these lines
that.el.setAttribute('width', that.el.offsetWidth);
that.el.setAttribute('height', that.el.offsetHeight);
to this..
if(that.el.hasAttribute('width')){
that.el.setAttribute('width', that.el.offsetWidth);}
if(that.el.hasAttribute('height')){
that.el.setAttribute('height', that.el.offsetHeight);}
I thought Safari had sorted this but it still seems to be an issue (unless I'm doing something obviously wrong).
I have a SVG placed inside an object tag. That is wrapped in a flexible containing DIV (e.g set to be width 50%). On resize, the container height resizes in Firefox, Chrome and Opera as I would expect but on Safari the container stays too high.
Here's an example on Codepen to demonstrate, switch to the full size result or 'editor on side' (button bottom right) to see the effect clearly in Safari: http://codepen.io/benfrain/full/fhyrD
Besides using JS to resize the SVG on load/resize, does anyone know if there is anything else I can do to make Safari behave correctly? Could of sworn I'd figured this out a few weeks back but now I seem to be hitting the issue again.
So, Sérgio Lopez had an answer for this. You can employ the intrinsic ratio for video technique that Thierry Koblentz described here: http://alistapart.com/article/creating-intrinsic-ratios-for-video. More info at this blog post: http://benfra.in/20l
Here is the cut and paste code you need in your CSS:
Surrounding object tag
object {
width: 100%;
display: block;
height: auto;
position: relative;
padding-top: 100%;
}
And this for the SVG inside:
svg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
I'm new to fluid grids, btw i'v started learning about diferent types and now trying to build page in cs6 (maybe not the right choice). I have a problem which I didn't have when building pages that are not fluid. I need to create different background images for header and footer that are 100% width and as wide as the screen, not just as wide as media-query, and also to setup the page to be 960 centered.
Are you trying to make the header wider than the rest of the page?
To do so, create different div's in the document. For example, I normally work all of my divs inside a master div, so that my entire page is affected. For example, a page with a main div, header, body, and footer:
#main #header #body #footer. The header, body, and footer are all create inside of the main div. To make everything float in the center of the page at a width of 960px, then you'd simply apply the attribute to the #main div like so:
#main {
width: 960px;
margin: 0;
}
The margin will cause the div to float in the center. It does not have to be any specific value, but you do need a margin to the left and right of the page.
To only float the remainder of the page, create everything else inside of the main div but the header and footer, and set the width of the header to 100%. So you would have the following overall snippet:
#header, #footer{
width: 100%;
margin: 0;
}
#main {
width: 960px;
margin: 0;
}
If you don't already do so, it'd be wise to add some padding on either side so that the images and text don't appear to run into the side of the page (which makes it difficult to read or view). 5px is usually all I add.