responsive images and different pic resolutions - javascript

i have this website, and as you can see on the index page that we have a 80% width and 100% container and in it a picture. Now there is a problem with different images and their resolutions, some are stretched some are narrow.
I want the pic to be full screen size and 80% width and to have proper aspect ratio. I would probably need some javascript to crop the images? please i need some insights on how to do that. Also a slider can do the trick if it has cropping feature and the possibility of 80% width and 100% height
here is the url
http://tinyurl.com/otwocvz

try removing the image and add the image as header2 background.
.header2 {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background-color: #CCC;
display: block;
background: url(http://leowd.com/wp-content/uploads/2014/08/leowd-umbrella-red2.jpg) no-repeat center center fixed;
background-size: cover; }

Related

How to make images position properly on lower resolutions without bootstrap?

I am trying to make website which has some icons on map. The problem is, that when I am making window smaller icons have wrong position, and they are in different places than I would like them to be. Also I cannot use bootstrap to position them. Only HTML, CSS and JS/jQuery.
Option 1: https://imgur.com/a/ifKFXRL
Option 2: https://imgur.com/a/R5DmQbt
I have already tried thing like:
min-height:100%;
min-width:100%;
}
#media only screen and (max-width: 1000px) {
body .background .foodini-logo img{
width:15%;
height:15%;
margin-top: 10%
margin-left:12%;
}
}
It only changed it for a while, because with resolution getting lower I had to add another media like every 100px, which is not an option for every icon I think.
html{
height:100%;
width:100%;
}
body {
background: url("../img/bg.png") no-repeat center center fixed;
background-size: cover;
background-color:rgb(178,212,238);
}
.
.
.
body .background .foodini-logo{
margin-top:15%;
margin-left:17%;
}
body .background .haps-logo {
margin-top: 35%;
margin-left: 23%;
}
I would like to have this icons be all the time as in option 1, no matter what resolution user will have on his screen.
The tricky part is that you're trying to use background-size: cover with position: relative logos. Cover is going to grow and shrink based on how large the elements are inside it. But you don't want that.
.background {
background: url("../img/bg.png") no-repeat center center fixed;
background-size: 100% auto;
background-color: rgb(178,212,238);
padding-bottom: 65%;
}
Changing the background-size to 100% auto will make the background 100% wide without stretching. I also added padding to make sure the container will keep the correct height ratio, since we're going to make the logo position: absolute so they don't conflict with each other.
.logo {
position: absolute;
transform: translate(-50%, -50%);
}
.haps-logo {
top: 35%;
left: 23%;
}
I added transform so the logos are centered on their position, rather than being pinned to the top-left of the logo. A bit easier in my opinion, but not required.
If you post a codepen or jsfiddle link with your code we can make sure it works, but otherwise, you can adapt this to your current setup.

How calculate div background image size on resize window

i have some problem which i can't figure out.
so
i have a div with background image.
<div class="a"></div>
and i want to make clickable some point of this background image. It's okey i can make this with adding to some div width z-index and make it clickable and positioning this with position:absolute e.g,
<div class="b">
<a class="clickablePoint" href="#"></a>
</div>
but how i can keep this clickable point on the same way when i resize the window if my background-image must be a responsive so background-size:100% auto.
maybe have some method to calculate background image height realtime when resize window ? or any other method? :(
Here's a minimal viable solution showing how to absolutely-position an element based on a full-width (background-size: 100% auto) background.
I'm setting the font-size of the element to 1vw (1/100th of the width of the viewport) and then calculating its left/top position and width/height size in em units, which become equivalent to a multiple of that 1vw.
As such, resizing this demo to any size will keep the box in the same place around the cat's nose.
body {
background: url('https://i.imgur.com/sVz3YRx.jpg');
background-size: 100% auto;
height: 50vw; /* for stack snippet height */
position: relative;
margin: 0;
}
.nose {
border: 1px solid yellow; /* for demo */
position: absolute;
font-size: 1vw;
top: 27em;
left: 59em;
width: 6em;
height: 5em;
}
<a class="nose"></a>

CSS - Show Entire Image as Background Without Cropping

I'm trying to setup a div with a background image with some text on top of it. The background image needs to stretch the entire width of the viewport, which I've been able to do successfully. This is my CSS:
.intro-header {
padding-top: 50px;
padding-bottom: 50px;
color: #fff;
background: url(http://) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The problem I'm having is that it isn't showing the full height of the image. The image is being cropped at the top and bottom. I want the image to show it's full height and the user needs to be able to scroll down to see more content below the image.
Is there a way I can show the full image without cutting the top and bottom off?
Thanks!
Remove the fixed and instead of cover use contain. If you want a specific size though I would define a height in my css.
You can use background-size: auto 100%;
I updated an example in fiddle to see how its looks.
http://jsfiddle.net/4ozmn00t/2/
.intro-header {
padding-top: 50px;
padding-bottom: 50px;
color: #fff;
background: url(http://);
background-size: 100% 100%;
}
setting the width and height of background-size to 100% will fill the div
Remove the fixed from the background.
url() no-repeat center center

Responsive Image Cropped Right

How can the following behavior be achieved?
Start with wide image e.g. 1440px x 378px.
Screen width = 1440px+ image displays normally.
As screen width is reduced the right side (or both left/right) of the image is cropped.
Screen width = 1024px image is fully cropped i.e no additional cropping occurs now.
As screen width is reduced the cropped image reduces in width/height like a standard responsive image i.e. img { max-width: 100%; }
Does using background image solve your problem?
.image {
height: 300px;
width: 40%;
max-width: 1440px;
background-image: url('http://kaboomshark.com/wp-content/uploads/2012/03/xbox-logo-600x300.jpg');
background-repeat: no-repeat;
background-position: center center;
}
Then set your media queries to resize or set the new background image url, size and positioning the image as needed something like so: http://codepen.io/anon/pen/DIAic/
Using a div wrapper:
<div class="wrapper">
<img>
</div>
.wrapper {
max-width: 100%;
width: 1440px;
overflow-x: hidden;
}
.wrapper img {
width: 1440px;
max-width: 140.625%; /* 1440px/1024px = 140.625% */
}
Above 1440px the image will display in full.
Between 1024px and 1440px it will be cropped, but display at 100% scale.
Below 1024px, it will scale down, keeping the same region cropped.
Fiddle: http://jsfiddle.net/MizardX/PB7D5/
If the exact widths are not important, you could leave them off and let everything auto-size. The max-width on the image will control the maximum amount that will be cropped.

Stretching a background image vertically not in scale, not just cover - Can this be accomplished?

EDIT: The answer would allow the background image to change it's height depending on the size of the body. if the body is 500px high, it should be 100% width, 500px height. or 100% width 2500px height.
Maybe I'm missing the boat on this, but I'm trying to figure out how to have my background image scale with the page. The end user doesn't want for the background image to be static (COVER), but the image should scale with the bigger his content gets on his site.
I'm guessing this can't be done with CSS alone. When I say I guess I've been through a mess load of different ways of doing this.
Is this just a simple javascript/jquery where I get the height of the body tag, and then apply that to the background image height?
If you need an example:
<body>
<div class="first"><!--TEXT--></div>
<div class="second"><!--TEXT--></div>
</body>
CSS
body { background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat; }
div { width: 75%; margin: 0 auto; }
.first { height: 1000px; }
.second { height: 500px; }
http://jsfiddle.net/WEat7/
This would need to work on multiple pages with different body heights
EDIT: http://jsfiddle.net/WEat7/1/
Fixed widths on the divs to illustrate the concept. I apologize
body {
background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat;
background-size:100% 100%;
}
http://jsfiddle.net/WEat7/
The following CSS should fix the background image and have it cover the entire body no matter what size the width or height - see demo
body {
background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center fixed;
background-size:cover;
}
However, please note that IE8 does not support background-size.
Edit: updated demo using following CSS
body {
background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center;
background-size:100% 100%;
}
Add to your body css:
background-size:100% 100%;
It seems that we need a wrap answer ))
It has been suggested above that background-size: 100% 100%; will stretch the background image to the full width and the full height. And so it does.
Say your content is small (400px) - the background image will cover only 400 - http://jsfiddle.net/skip405/WEat7/7/
Say your content is really huge (2500px) - the background image will still cover the full height - http://jsfiddle.net/skip405/WEat7/8/

Categories

Resources