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/
Related
My college asked me to code a site for a project but make it responsive. The image i'm using for the header background is not resizing.
This is the code for the HTML
<div id="headerbackground"></div>
And for the style i've put
#headerbackground {
background-image: url('../images/header.png');
background-size: contain;
max-width:100%;
max-height: 100%;
}
I've followed a few tutorials but no luck
You can't set an empty div background until you set a height on that. Or you have some content inside that div. So all you need to set the height of the div.
So here is your responsive background image. You can check responsiveness resizing the window.
body {
margin: 0;
}
#headerbackground {
background: url('http://farm3.static.flickr.com/2098/2260149771_00cb406fd6_o.jpg');
background-size:100% 100%;
background-repeat: no-repeat;
height: 100vh;
}
<div id="headerbackground"></div>
First, you haven't specified a minimum height, only a maximum, so it's collapsing to 0.
Second, you probably want to use background-size:cover; - that resizes the image to cover the whole element. Contain resizes the image so that the whole thing only fits within the element.
html,
body {
height: 100%;
}
#headerbackground {
background-image: url('https://placekitten.com/g/800/600');
background-size: cover;
background-repeat: no-repeat;
max-width: 100%;
min-height: 100%;
}
<div id="headerbackground"></div>
I'm trying to setup a new bg on my website, but I can't make it work. Basically I have a picture (size 50x2000 px) and I want to create repeated background. In my CSS I used :
#test{
width: 50px;
height: 100%;
background:url(images/bg.png);
background-repeat:repeat-x;
min-width: 100%;
position: absolute;
}
And it's partly working, I can see that the bg is repeated but there is a problem with hight. My web browser should squeeze the hight of the picture to fit the whole picture in a website, and right now I can see only the top of the picture, it's because the picture hight is too big 2000 px. So what I have to change in my CSS code to make the bg fit in to my website ?
Thanks
Update your CSS as
#test
{
width: 50px;
height: 100%;
background:url(images/bg.png);
background-repeat:repeat-x;
min-width: 100%;
position: absolute;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
well background-repeat:repeat-x; should be background-repeat:repeat-y; if you want to do it vertically. look hear
edit, try to remove those absolut and other options so the browser can handle the rest:
#test{
background:url(images/bg.png);
background-repeat:repeat;
}
add this to your css
height:2000px;
as in:
#test{
width: 50px;
height: 2000px;
background:url(images/bg.png);
background-repeat:repeat-x;
min-width: 100%;
}
it should solve your problem.
UPDATE:
this is the Fiddle. the image you use in your fiddle is 900px so I set height to 900px.and I think your problem is solved.please explain more about your problem if it is not it.
Q : why do you need absolute position ? remove it.
I'm trying to stretch an Image Full Screen (Cover): http://www.bootply.com/114850
I have a simple Menu and a call to action button but the image covers only the menu and stops there.
The Section Style is below.
.section-1 {
min-height: 100%;
background-image: url(http://i.imgur.com/fGrTemz.jpg);
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
overflow: auto;
}
What am i missing?
Add
html, body {
height:100%;
}
section-1 is stretching to the height of its parent (html/body) which doesn't have a height set on so it doesn't know what height to be.
Change your min-height from percentage to pixels.
.section-1{
min-height:500px;
}
Percentage height is dependent on the height of the parent, so you need to "pass" the height in percentage to the targeted element.
html, body {
height: 100%;
}
Demo: http://www.bootply.com/114867
Yo specified position:absolute in your .content-holder so that it was removed from the content flow. As a result, its container <section> shrink its height to fit the <nav> element only.
Try remove position:absolute from .content-holder. And if you add position:absolute to .section-1, the background will be fullscreen.
Add the following to you css:
position: Absolute
so your css would be
.section-1 {
min-height: 100%;
position: absolute;
background-image: url(http://i.imgur.com/fGrTemz.jpg);
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
overflow: auto;
}
if you add width:auto; to the section class. then just play around with the section-1 class min-height in "px" to target the screen size that best suits you. essentially what you could do is use media queries to target different screen sizes that way you will always get the perfect size. but thats alot of work so use the
html, body{height: 100%;}
I'm trying to make a GIF fit my whole screen, but so far its just a small square that is on my screen while the rest is white. However, I want it to take up all the space.
Any ideas?
if it's background, use background-size: cover;
body{
background-image: url('http://i.stack.imgur.com/kx8MT.gif');
background-size: cover;
height: 100vh;
padding:0;
margin:0;
}
IMG Method
If you want the image to be a stand alone element, use this CSS:
#selector {
width:100%;
height:100%;
}
With this HTML:
<img src='folder/image.gif' id='selector'/>
Fiddle
Please note that the img tag would have to be inside the body tag ONLY. If it were inside anything else, it may not fill the entire screen based on the other elements properties. This method will also not work if the page is taller than the image. It will leave white space. This is where the background method comes in
Background Image Method
If you want it to be the background image of you page, you can use this CSS:
body {
background-image:url('folder/image.gif');
background-size:100%;
background-repeat: repeat-y;
background-attachment: fixed;
height:100%;
width:100%;
}
Fiddle
Or the shorthand version:
body {
background:url('folder/image.gif') repeat-y 100% 100% fixed;
height:100%;
width:100%;
}
Fiddle
You can set up a background with your GIF file and set the body this way:
body{
background-image:url('http://www.example.com/yourfile.gif');
background-position: center;
background-size: cover;
}
Change background image URL with your GIF. With background-position: center you can put the image to the center and with background-size: cover you set the picture to fit all the screen. You can also set background-size: contain if you want to fit the picture at 100% of the screen but without leaving any part of the picture without showing.
Here's more info about the property:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Hope it helps :)
if you're happy using it as a background image and CSS3 then background-size: cover; would do the trick
This should do what you're looking for.
CSS:
html, body {
height: 100%;
margin: 0;
}
.gif-container {
background: url("image.gif") center;
background-size: cover;
height: 100%;
}
HTML:
<div class="gif-container"></div>
In your CSS Style tag put this:
body {
background: url('yourgif.gif') no-repeat center center fixed;
background-size: cover;
}
Also make sure that it's parent size is 100%
I have a large image I would like as my background, but for some reason it repeats a little bit on my large screen. Is there a way I can just have the image size up or down according to screen size?
EDIT: So I have changed my HTML to look like this:
<body id="wrapper">
<div id="body">
<img src="/images/sky2.jpg" class="stretch" alt="" />
</div>
and my CSS to this:
#body {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
And the background won't show on preview. I have 3 other div elements that show but only to a white background =/.
move background-repeat: no-repeat; to the #body instead of #body img
You aren't actually showing any of your html here, just some embedded CSS and some (I assume linked?) CSS. You are loading the image as a background-image on the body element in that first bit of css, which is great. Because it's loaded as a background-image in CSS, and not and tag in HTML, your second bit of CSS (with the #body img selector) is not affecting it in any way.
What you actually have, in effect, is this:
#body {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
position:relative;
background-image: url(images/sky2.JPG);
}
Which is a very odd bit of code. But the only relevant part to your question is the background-image part. The answer has several parts. In CSS2: no, you cannot adjust the size of a background image. You can set it not to repeat (as others have shown) and you can set it's position:
body {
background-position: center left;
}
In CSS3 you can change the size, and you have several options (you are looking for cover, I think) but it only works for the latest browsers. The property is called background-size, but because it is still experimental, you have to declare it individually for each browser:
/* this is the default */
body {
-moz-background-size: auto;
-webkit-background-size: auto;
-o-background-size: auto;
background-size: auto;
}
/* this will size the image proportionally so that it is contained, but not cropped */
body {
-moz-background-size: contain;
-webkit-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
/* this will size the image proportionally so that it fills all the area */
body {
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* this will size the image as a percentage of the area */
.example #percent {
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
-o-background-size: 50% 50%;
background-size: 50% 50%;
}
/* this will size the image to exact specifications */
.example #absolute {
-moz-background-size: 100px 25px;
-webkit-background-size: 100px 25px;
-o-background-size: 100px 25px;
background-size: 100px 25px;
}
#img.source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Demo page:
http://css-tricks.com/examples/ImageToBackgroundImage/
Source:
http://css-tricks.com/how-to-resizeable-background-image/
I think it's worth to read that page :)
1) The CSS property background-repeat: no-repeat; should be on the body element itself, i.e. on the element you're specifying the background of.
2) In the CSS, you write #body... I guess you want to talk about the body element? Then you should just write body in the CSS. #body would be for an element declared as, say, <div id="body">.
3) Also, I'm unsure about #body img. #body img means “an img element inside the body”. Do you really have an img element inside the body? I mean, is your markup like this?
<body>
...
<img ... >
...
</body>
And do you really want to style that img element?
Anyway, the style that applies to the img element has nothing to do with the body's background.
<style type="text/css">
body {
background-image: url(images/sky2.JPG);
background-repeat: no-repeat;
}
</style>
You need to set it for the same element or class or whatever.
Also you could move the body css into your css.
Ok, I'm sorry there are some other things wrong, like #body {. I don't think you have an element with an id "body".
Not trying to RTFM, but maybe read some tutorials on CSS?
To scale the image, maybe have a look at: Stretch and scale a CSS image in the background - with CSS only