Develop Reference

resizable box with rough edges using svg

I am working on a small project where I need to build a a box with rough edges around text. For this I use an SVG with funky edges - sort of a bit like this one: https://ikedabarry.com/InkTex/wp-content/uploads/2012/07/Ink_039_6501.jpg (but as SVG).
What I am trying to achieve is that I add this as background to a DIV and that it always fills nicely to the edges of the containing DIV, on all sides, so that the DIV does NOT look perfectly square on any sides. No matter the size of the box (it resizes with screen-size).
This does not work right now.
What we use at the moment:
background-image: url(above.svg);
background-size: cover;
This does not work because only half the edges are rough as the other ones extend outside of the visible area.
We also tried:
background-size: 100% 100%;
but that does not work because I end up having the image following its own naturally size.
I am now not sure what is the best possible solution using JS / CSS to make this work.
Here is what I see as options:
OPTION 1:
write some JS that:
a. listens to size changes in DIV
b. adds width and height to SVG
c. sets background image as 100% 100%.
OPTION 2:
a. add image as normal image with DIV
b. set DIV as position relative and IMAGE as position absolute
c. set top / bottom / left / right for image as ZERO.
(it does not work right now because it is an SVG - not sure why).
I feel option 2 is the best, but I am wondering if I am overlooking something ...
Any help appreciated.
UPDATE: here is a runnable example:
https://jsfiddle.net/sunnsideup/er1xd0wg/15/

Maybe try this:
background-size: 100vw 100vh;
I am not sure, if this is solution for your problem, but it can help

Here is what we have come up with:
https://jsfiddle.net/sunnsideup/er1xd0wg/15/
create different SVGs for portrait / landscape divs so you dont end up with BG images that look straight because they are overstretched.
remove height and width from svg, add viewbox like this with actual width and height:
viewBox="0 0 WIDTH HEIGHT"
add to svg:
preserveAspectRatio="none"
convert SVG to css background:
https://yoksel.github.io/url-encoder/
add the following css:
background-image: url("data:image/svg+xml,.... SVG GOES HERE ... ");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;

How can I make an image as big as possible, keeping the original aspect ratio and not cutting parts of the image?

Th main question is in the title, but here is the issues I am having getting it working:
I have an image that I am trying to size to a page depending on the size of the window. I want to keep the original aspect ratio of the image which may be wider or taller. I figured out a way to get the aspect ratio, but is there a way to figure out how much space I have to make it both in width and height based on the other items in the screen?
From there I can figure out how to resize accordingly.
I don't want to base it on the size of the window because there might be other items there. I am also using ionic2/angular2, but I don't really think that plays a role in this issue.

The easiest way to achieve this, and the solution I commonly use myself, is using the CSS background-size property. No JS is required, just a few adjustments to your HTML and CSS.
Basically what you have to do is get rid of your <img> element and instead create a <div>. Adjust your layout to give this div the appropriate size and position, and then, via CSS, give it a background-image. You will end up with something like this:
CSS:
#myImg {
background-image: url("../resources/img/myPic.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
HTML:
<div id="myImg">
</div>
The CSS properties I have set for #myImg do the following:
background-image: Set the path for the image
background-size: contain: Use the contain value, which scales the image to the largest size such that both its width and its height can fit inside the div. This is where all the magic happens behind the scenes
background-repeat: no repeat: Disable repetition of the background image. If this is not set, then the image is tiled so that the entire div is covered, which we don't want.
background-position: center: Position the image in the center of the div.
Browser support

Full background image initially fixed, then scrolls when DIV content ends

I'm trying to figure out how to have a full background image (background-size: cover) be fixed initially (the text over the image scrolls while the image stays put), but, at the moment when the user scrolls down to the end of the content (like a tall block of text), the background then scrolls up revealing a new section/div below.
For example:
<section id="top-section-with-fixed-bg">
<div class="tall-content-1500px">
<p>Text that's really tall</p>
</div>
</section>
<section id="next-section">
...
</section>
But, again, the background image is fixed until the user has scrolled down 1500px and the content for that section/div is done. At that point, the user continues to scroll and the background image scrolls up.
Not, as with parallax solutions, with the background image being covered by the next section. But the background image going up with the scroll.
I'm thinking this takes some javascript, jQuery fixing, but I'm still a bit novice with it. I'm a designer just wanting a site to look and act this certain way. I'm guessing I have to recognize the height of the content, where that ends, and then either tell the CSS to switch from fixed to scroll (without effecting the position of the image), or having the js move the image up with the scroll action.
Update: Here's a quickly tossed together jsfiddle
UPDATED UPDATE:
I think I've found the solution!
With the pointers provided in responses here, then some digging around, I have it kind of working.
I started with trying to figure out how to detect the window height. I plug that into the text/content DIV, using that value for the DIVs height. This is important, to set the container for the text to the height of the user's window, not to a specific height. Then, I set that DIV to overflow: auto (and hide the scrollbar, for aesthetics). That allowed me to set a trigger so when the end of the content in that DIV is reached, the background-attachment is changed from fixed to scroll.
And, voila! It's not perfect, and I'm sure some real javascript/jQuery experts will right my wrongs on it, but I like how far I've gotten with this so far.
I realize that the swtich from fixed to scroll is probably unnecessary. At the moment, when the switch happens, the image jumps a little to adjust to the window size and its own position, now being set to scroll. If I set the CSS originally to fixed, and make sure the content of the DIV (using padding wisely) to cover the window, as the user scrolls with the mouse the correct action will occur: text scrolls until there is no more text, then the image scrolls up.
Check it out and look forward to help and comments.
jsfiddle

have you set background-attachment:fixed;? This makes background images 'move' with the browser scroll. Be careful when it comes to devices though as this method can cause 'laggy looking sites' because there's too much render for the device (depending on image).
I personally target 'large' and 'modern' browsers with this:
#media query and (max-width:600px){
.top-section-with-fixed-bg{background-attachment:fixed;}
}
EDIT:
sorry I didn't fully understand the question. Here's some CSS to get you going
window.addEventListener('scroll',function(){
//document.body.scrollTop would be the windows scroll position.
if(document.body.scrollTop==1500px)
document.getElementById('top-section-with-fixed-bg').style.backgroundAttachment='static';
}else document.getElementById('top-section-with-fixed-bg').style.backgroundAttachment='fixed';
});
I'm very sorry but this is very basic. I'm about to finish work. The function could use a bit of sprucing up a bit like making it dynamic. This is also only native JS. So it's not all that fancy but you get the idea. When the document.body.scrollTop is at the bottom of your element. Which I'm guessing is 1500px tall? IF not use offsetHeight(). That'll give you the complete height of the element including padding and margins and I think borders as well?

I'd set your background images to background-position: fixed; then put the next background image at the bottom of the text so it overlays on top of the first div. Problem is you can't have the nice <section> structure you had going before.
<style type="text/css">
.section-with-fixed-bg {
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
#bg-1 {
background-image: url("./background-1.jpg");
}
#bg-2 {
background-image: url("./background-2.jpg");
}
#bg-2 {
background-image: url("./background-3.jpg");
}
</style>
...
<body>
<div id="bg-1" class="section-with-fixed-bg">
<p>Text that's really tall</p>
<div id="bg-2" class="section-with-fixed-bg">
<p>Next section of text that's really tall.</p>
<div id="bg-3" class="section-with-fixed-bg">
<p>Next section of text that's really tall.</p>
</div>
</div>
</div>
I haven't tested this but it should cause the new image to overlap the old one, at least in theory.

Display different image on various devices

I'm using Joomla 3.3.4 FYI.
I have an image on the front page (http://www.ckdev.info/cdp) that's a call to action to complete a form for a free estimate. It's great in desktop or tablet (landscape) as the form appears to the right.
However, when viewed on other devices or orientations, the viewport is too small to have the sidebar showing on the right and it drops to the bottom. So the "right arrow" image doesn't make logical sense.
What I want to do is a bit of an "if-else" solution. If screen width is xx px or greater show "right-arrow.jpg", else "down-arrow.jpg". I will attach a anchor to the form so that clicking/touching down-arrow.jpg when displayed will scroll down to the form.
I'm afraid I'm no coder so, while I have no doubt this can be done, I have no clue how! Thanks.

You can do it with css media-queries.
Try this: (change 900px and 899px to your desired values)
#media(min-width: 900px) {
#img {
width: 100%;
height: 150px;
background: url('http://www.ckdev.info/cdp/images/estimate.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
#media(max-width: 899px) {
#img {
width: 100%;
height: 100px;
background: url('http://www.ckdev.info/cdp/images/estimate.png');/*change image url*/
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
Check it out here: jsFiddle (resize result window width to more than 900px)
I've just made your image different size on different media queries, but instead change your background url to your desired image.

You can make this happen using jQuery without anything extra as long as you don't mind some odities in the width of the window that come from the scrollbar. Ill get back to the scrollbar in a sec. To test the width you can use jQuery(window).width(). This will return the width of the window in pixels. Exactly what you are looking for. An example snippet:
jQuery(document).ready(function(){
if (jQuery(window).width() > 1000){
jQuery(<select img here>).attr('src', '/path/to/new/image.jpg');
}
});
I notice that you dont have a class or id on the image you mentioned. I would suggest adding an id to make it easier to select. For example, <img src="/cdp/images/estimate.png" alt="Get a free interior or exterior painting estimate" id="estimate-with-arrow">. If you make this change you can swap out <select img here> for 'img#estimate-with-arrow' (this will select an the image with id estimate-with-arrow). And voila, image swap.
I will note three things.
First, that this will only work on initial page load. If a user loads the page at full desktop width then shrinks it down, the image will not change when it passes the break point. You need to bind to the resize to get this to work:
jQuery(window).resize(function() {
<code here>
});
Second, I set up this particular code to swap out the image for any screen over 1000 px. This means you will only ever load one image for smaller devices, saving bandwidth. This is preferred, ad mobile plans are more finicky.
And third, the scrollbar. Testing the window width using jQuery will not match the same break point as css. I use modernizr to get around this. This is a bit more advanced though.

What you want is a CSS media query to change the displayed image.
For a smartphone like the iphone in portait it would be something like that:
#media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) 
{ /* STYLES GO HERE */}
For more details take a look at:
w3schools
cssmediaqueries

CSS: Making Background Image fade slowly

I am working on a legacy code here, and cannot use jQuery, CSS3 or HTML5.
I am using a background image for an input field in HTML. I am trying to achieve some sort of animation here, where the image appears initially and fades away slowly after 'n' seconds.
The sample CSS code that I have is:
.acceptValue {
background-image: url('../../images/accept.gif');
background-repeat: no-repeat;
background-position: right;
padding-right: 20px;
}
I want the above CSS property to be applied for 'n' seconds and then it should disappear.
Is there a way I can get this working in IE7 and IE8? I want something like SetTimeout in CSS definition where the image (accept.gif) appears just for a few seconds.
Please let me know.