I'm creating a website for a friend of mine.
We got these layout and i've put a flexible background which scales to the current browser size. But the icons placed on the background needs to stay in relative position while scaling the window.
Means if i resize the window it would be fine to have the icons stay on there position.
#icon1{
/*Back*/
position: relative;
//margin-top: 20%;
//margin-left:10%;
widht:20%;
top:20%;
z-index:10;
}
html, body {height: 100%;
// width: 1600px;
margin: 0 auto;
overflow:hidden;
}
#inhalt {height: 100%;
// width: 1500px;
margin: 0 auto;
background: url(wp-content/themes/html5blank-stable/img/bg_small.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
z-index:0;
}
Example
At the moment the icons are fixed at their position.
Thank you for your hints
With the comments from #Paulie_D, I managed to achieve this by, instead of using a backgroud-image for the map, I used an actual image with an img tag. By using an actual image, I the icons scaled to the size of the image (since now the image determines the size of the container). When I used the background image, I had to manually set the height or width of the container, which might not be the actual size of the image.
Related
I had to set 4 pages with 100% width and height background depending of the screen size.
The imgs have got the same width and height and these are my settings,
.fullImg{
width: 100%;
height: auto;
max-height: 100vh;
max-width: 100vw;
}
this is working perfectly for few pictures but not with others, how is that possible if the pictures got the same dimensions?
I tried to do background-size: cover which is working for a while but then it will cut off the img so the best way so far is that one i wrote above.
I am talking about big screen sizes from 1440px to 2560px.
Thanks a lot
You can have a look at the headers here: http://provaresponsive.herokuapp.com/pr.html
As mentioned in the comments if you want an image to always use all available height and width, then you have to decide: Do you want the image to retain it's aspect ratio - then it has to be cropped, or do you want the image to change aspect ratio, in which case it will stretch.
Here is an example for each option:
No Stretching - Will Crop
html {
background: url(http://www.olejarz.com/arted/perspective/images/intro.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
jsfiddle
Stretching - No Cropping
div {
background-image:url(http://www.olejarz.com/arted/perspective/images/intro.gif);
/*
* Width & Height can be percetages only when the parent
* element has explicitly declared dimensions.
*/
height:200px;
width:500px;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:100% 100%;
}
jsfiddle
And there is a third option, you probably won't like, which is to contain the image, so:
No Stretching, No Cropping - not filling the x/y
html {
background: url(http://www.olejarz.com/arted/perspective/images/intro.gif) no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
jsfiddle
use backstretch js .it can fix your issue.if you call your background image using backstretch js then it will automatically adjust your image according to your screen ,whatever your image resolution is
When adjusting the width size of the page i only want the logo starts containing when there is no room left on either sides of the logo so at that point adjust to the width of the page. Must be quite easy! In the fiddle example is seems to act like i want, but doesn't with my own code it contains the background size (logo) al the time.
I want the logo center page with a one size and adjust the size when the page width reaches the both ends of the logo. Hope you understand my English.
Here the: fiddle
#logo {
display: block;
background: url("http://cdn4.colorlib.com/wp/wp-content/uploads/sites/2/2014/02/Olympic-logo.png");
background-repeat: no-repeat;
background-position: center center;
background-color: white;
background-size: contain;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
height: 30%;
top: 0;
left: 0;
margin: 0 auto;
padding: 0;
-index: -100;
}
Can anyone help me with this?
I checked the code by creating a single html file with the css in style tags, it didn't work with IE but worked with Chrome and FF.!
If you want a header image that resizes to cover the entirety of the header but also want the background-attachment to be fixed the background image will no longer cover the containing div but will attempt to cover the entirety of the window.
Here'a fiddle that shows the problem. Just toggle the commend of line 13 on the CSS. When you change to
http://jsfiddle.net/TqQv7/155/
#top-left {
position: absolute;
top: 0px;
left: 0px;
width: 50%;
height: 50%;
background: #000 url('http://placekitten.com/2000/1000') no-repeat;
-moz-background-size: cover;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-color: transparent;
/* background-attachment: fixed; */
}
background-attachment is 'scroll' by default. So with 'fixed' commented out the cat picture resize to the shape of the top left box without a problem but with 'fixed' the cat background stays fixed to the page but the cat picture size then "covers" the entire page.
Ideally I want to recreate the header here: http://startbootstrap.com/templates/stylish-portfolio/index.html
But with the header set to 50% of the page height. It works within this example because the header is full page.
This seems to be compatible with the standard as all modern browsers appear to do the same but I can't understand why it behaves this way?
This is because setting background-attachment: fixed alters the background positioning area to that of the initial containing block, which is always the size of the viewport. From the spec:
If the ‘background-attachment’ value for this image is ‘fixed’, then [the ‘background-origin’ property] has no effect: in this case the background positioning area is the initial containing block [CSS21].
The behavior of background-size: cover is then influenced accordingly.
You can still achieve the desired behavior with a fixed background by setting background-size: auto 50% instead, so its height scales to 50% that of the page, mirroring the height you have given to the element, and its width adjusts to scale:
-moz-background-size: auto 50%;
-webkit-background-size: auto 50%;
-o-background-size: auto 50%;
background-size: auto 50%;
Notice that I've also moved the standard background-size declaration to the bottom to ensure all browsers use that one over the non-standard implementations where available.
I just hacked my past it by changing the values to make it the size I wanted in the place where I wanted it:
background-size: 25%;
background-attachment: fixed;
background-position: center 300px;
background-repeat: no-repeat;
So far it's doing exactly what I need it to do.
My problem right now is when i change the window size there is a scrollbar at the bottom, the picture (which is the container) will fits the screen, but there is a lot of extra white space when I scroll right. so when i change the screen size, the text on the container will move. I changed to use media only screen to change the font size when the size of the screen changes, but this isn't about font size only, the text will move
.container {
background-image: url(../images);
background-repeat:repeat;
-webkit-background-size: cover;
/*compatible for webkit*/
-moz-background-size: cover;
/*compatible for firefox mozilla*/
-o-background-size: cover;
/*compatible for opera*/
background-size: cover;
/*compatible for generic browsers*/
margin-top:-5px;
//max-width:400%;
margin-left:auto;
margin-right:auto;
width:100%;
}
.text {
position: absolute;
width: 39%;
height: 20%;
left: 420px;
top: 4020px;
text-align:left;
font-size:34px;
font-weight:530;
}
I also tried to use position relative instead of absolutely. when i do that, the container image will suddenly gets huge. It's not even fit the screen, it's just gets huge.
position: absolute;
just wont work until above container has
position: relative;
Put relative position to your container first.
I want to achieve a background-image effect, similar to on http://yipit.com/.
Here is what I currently have:
<div id="landing-header">
<img class="landing-background" src="{{ STATIC_URL }}images/new/landing-background.jpg"/>
</div>
#landing-header {
height: 489px;
}
.landing-background {
height: auto;
min-width: 1460px;
width: 100%;
position: fixed;
left: 0;
}
What I want to accomplish is that the horizontal width is always as wide as the browser and the image scales accordingly. For example, if it is a 500x200 image and the browser is 1000px wide, the image would scale to 1000x400. This is working.
However, I only want the container to be 400 px high. In other words, I want to cut off the image at 400px. For example, the image in a 2000px browser width would be 2000x800, but only the top 400px would show. How would I accomplisht this?
Note that I only want the image to resize when the width of the browser is larger than the width of the image, I don't want the image to resize every single time the browser is changed.
hi you can achieve your desired results through CSS3 Property background-size:cover;
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
see the demo :- http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
UPDATED
see the updated demo its a very small image rather than the width of browser so its covering the whole background :- http://tinkerbin.com/CraP8wBh