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.
Related
I'm pretty new to this stuff but I am learning as I go and taking courses too but sometimes I hit a small roadblock like this one.
When the browser is at 100% the back images are great but as you minimized all the way to 25% the background image position collapses or "hides" and I'd like the images' background position center top to remain intact no matter minimize or maximize.
I've attached an example:
It is zoomed out to 25%. You can visit
medshopandbeyond.com and zoom out to also see the problem.
This is the html I used for the background images:
<div id="header-image6"></div>
This is the CSS I used for them
#header-image6 {
background-image:url("{{ 'WhoWeAre3.jpg' | asset_url }}");
height: 750px;
position: relative;
background-repeat: no-repeat;
background-position: center top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
margin-bottom: 0px;
width: 100%;
margin-top: 30px;
}
Checked out your code and found this:
#media only screen and (min-width: 320px) and (max-width: 480px){
#header-image6{
background-image:url("//cdn.shopify.com/s/files/1/0930/6704/t/2/assets/WhoWeAre3.jpg?7803954532461737215");
background-repeat:no-repeat;
background-position:center;
margin:0 auto;
width:340px;
height:250px;
margin-left:-20px;
display:none;
visibility:hidden
}
}
For viewport width between 320px and 480px, you are re-setting the element's width and height and thus the image shrinks.
You can let the width and height to be 100% as it is in the default case. Please comment if there is anything else to put forward.
In the class "#header-image6" that you provided, do change "background-size:contain".
Hope so it will help you else do not hesitate to ask here.
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.
i am working on a bootstrap-based website and i have placed a big image on top of it.
<div class="container-fluid introimage">
<img src="img/wald.gif">
</div>
Now i want the container to be only as high as the browser-window is and i like to have the image to be aligned on bottom of the container, to get sure, that the bottom of the image is always visible.
I've tried something, but it did not work at all:
.introimage {height: 100%;}
.introimage img {vertical-align: bottom;}
Could you please help me? Thanks in advance!
This is the website: http://baustelle.injuvik.de
Put the image in the background of the container.
Simply apply these styles to your website, and it should work
body, html {
height:100%;
}
.introimage {
height: 100%;
background-image: url(img/wald.gif);
background-size: cover;
background-position: bottom;
}
use min-height:100% with height:100% on body
.introimage {
height: 100%;
min-height: 100%;
}
html, body {
height: 100%;
min-height: 100%;
}
Use the unit vh . It represent viewport height, and go from 0 to 100.
.introimage{
height:100vh;
}
Add following rules in your style sheet, What I have done is set the container to position fixed; so that it works w.r.t screen and made its height, width 100% so that it covers complete screen, then I aligned the element from top left corner and in the last set the image to cover complete parent div thus indirectly covering compelte browser window.
.introimage {
height: 100%;
position:fixed;
top:0;
left:0;
width:100%
}
.introimage img {
height:100%;
width:100%
}
I would recommend using the newer vh measurement for your stage, which will make any element the height of the veiwport with a value of 100.
.introimage {
position: relative;
height: 100vh;
background-color:transparent;
}
I would then use that image as a background image as opposed to just an image tag. I'd probably add it to the after pseudo-element of .introimage.
.introimage:after {
content:'';
display:block;
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
background: url(images/bg.jpg) no-repeat center bottom fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
https://css-tricks.com/perfect-full-page-background-image/
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.