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%;}
Related
I have made two forms on my website, both being surrounded by one <div class="wrapper"> tag. I used CSS to add a background image to this.
.wrapper {
background-image: url(../images/backgrounds/desktop.jpg);
background-size: 100%;
background-position: top;
width: 100%;
height: 100%;
min-width: 950px;
}
However, this is what the site actually looks like. I can't extend the bottom of the image to fill the screen. I can't figure out why it's doing this.
The height of div is 100% of what? If it is a direct child of body, the body is not wrapping 100% of the screen by default. So you have to make body 100% and then the wrapper will also take 100% of body. If there are more parent elements, all of them also should have style height:100% :
html,body{
height:100%;
}
Also add background-size:cover to make sure that the image stretch enough to cover the whole screen.
Add background-size:cover to have the background cover the entire div. Your background will only show behind the content contained within it. You need to change the height or padding of your container and/or add more content to see the whole background.
.wrapper {
background-image: url(../images/backgrounds/desktop.jpg);
background-size: 100%;
background-position: top;
background-size:cover;
width: 100%;
height: 100vh;
min-width: 950px;
}
My solution was to set the height of the <div class="wrapper"> to 100vh.
.wrapper {
height: 100vh;
}
This set the height of the divider to 100% of the window view height. Before it was going to 100% of the height of the forms.
Try replacing
background-image: url(../images/backgrounds/desktop.jpg);
with
background:url(../images/backgrounds/desktop.jpg) no-repeat scroll;
I have image of size 1400x560 and I want the my jumbotron div to scale to fit the size of the image. It works fine when i set the width of the jumbotron to that of the image but when I shrink the website to mobile view, I have issues. So how can I fix this?
I forgot to mention i have issue with the height and not the width, The jumbotron scales div to the width of 1400 but not to the height 560px
Here is a preview of the html page http://threeguys.us/rts/testing.html.
When i shrink the page , i want the image to resize according to the width of the browser
index.html
<div class="jumbotron">
</div>
css
.jumbotron
{
padding-top: 0px;
padding-bottom:0px;
background-image:url('images/car/car.jpg');
background-size: cover;
height:560px;
}
What you're looking for is background: contain;. Simply add this to your class as follows:
.jumbotron
{
padding-top: 0px;
padding-bottom:0px;
background-image:url('images/car/car.jpg');
background-size: cover;
background: contain;
width: 100%; /* make sure to define width to fill container */
height: 100px; /* define the height in pixels or make sure */
/* you have something in your div with height */
/* so you can see your image */
max-width:1400px; /* define the max width */
}
The background image will now scale with the size of the div (assuming the div is scalable). If you want to constrain your div so it does not get bigger than a certain size (in your case, the size of the background image), use max-width: 1400px;
See my JSFiddle example.
There isn't a way to get the div to fit the size of its background image, so I suggest you use an img tag instead.
To get your div to fit the size of the image, use display: inline-block on the div:
.jumbotron
{
display: inline-block;
border: solid red 1px;
}
<div class="jumbotron">
<img src="http://i.imgur.com/5LGqY2p.jpg?1" />
</div>
Try:
background-size: 100%;
width:100%
position:relative;
Hope it helps you
Wrap your jumbotron with:
<div class="container"></div>
It should make it fit width-wise to the rest of your page.
Make it simple. Thanks
.jumbotron {
background-image: url('https://stmed.net/sites/default/files/sky-wallpapers-28043-8362242.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
}
<div class="jumbotron"></div>
I need your help with a site i'm putting together. I'm a noob and have been given a design that has the body with designed to 900px wide but they have given me an image that is 1200px wide. They want the image to span the full 1200px wide, so essentially there will be 300px overlap on either side of the page. I can't quite figure out how to do this, any help would be appreciated!
Thanks,
Dave
Your best bet to accomplish what they want is to make the image a background-image in CSS.
Set up a div that will contain the image (as a background), and position it on the page relative to where you want it to be.
<div class="background"></div>`
Either fill the div with content to give it a height or define a fixed height, say 400px.
<style>
.background {
height: 400px;
width: 100%;
}
</style>
Now, set the background properties to achieve what you want.
<style>
.background {
height: 400px;
width: 100%;
background-repeat: no-repeat;
background-image: url(URL_TO_IMG);
background-position: center center;
background-size: cover;
}
</style>
JSFiddle example here:
jsfiddle
You can use this code:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
to cover the exact space you have.
body{
background: #ccc url(image_folder/image_name.extension) np-repeat 0 0 center;
}
#otherelement{
/*Style Your Page Whatever you want...*/
}
I would like my image to be not stretched and no scroll bars. So when the browser window is reduced the image is still the same size (but overflow is hidden).
<img src="http://nybbledesigns.com/images/header.jpg"/>
JsFiddle: http://jsfiddle.net/6ppL9axc/
I found solutions with containers but I need a solution without.
Any idea?
Give this a try:
img {
position: fixed;
overflow: auto;
}
<img src="http://nybbledesigns.com/images/header.jpg"/>
I made a background version, hope it could help.
<div></div>
div {
width:100%;height:60vh;
background-image:url("http://nybbledesigns.com/images/header.jpg");
background-repeat:no-repeat;
}
The vh is relative to the device screen height so 60vh will be 60% relative to the screen height
at all time, no matter which device :)
Try
html, body {
max-width: 100%;
overflow-x: hidden;
}
It will disable the scroll bars forever~
try this
img {max-width:100%;}
This can be done with the new CSS property object-fit (Currently webkit only, but soon to be supported in other browsers)
Just set object-fit: cover; on the img together width a max-width and fixed height.
This is basically the equivalent to to applying background-size:cover to a background image , except that here we apply it to an img element.
FIDDLE
body {
margin: 0;
}
img {
object-fit: cover;
max-width: 100%;
height: 513px;
}
<img src="http://nybbledesigns.com/images/header.jpg" />
I want to set height 100% and width overflow to an image, so that on every screen the TOP Menu (Red Buttons) and the Footer Menu can be reached easily.
Left hand side and right hand site can overflow.
I tried
.stretch {
width:100%;
height:auto;
}
Withouth success. And changing values makes the image fullscreen and has not the desired effect.
Any Ideas?
Here's a fiddle: http://jsfiddle.net/H75BT/2/
Edit:
From Bigood's answer, I need this one to be centered : http://jsfiddle.net/H75BT/1/
Apply a 100% height on html & body, and define that your .stretch will adapt its height to the height of the body, and recalculate its width to keep the proportions :
html, body {
margin:0;
padding:0;
height:100%;
overflow-x:hidden; /* Add this to prevent the body to adapt its width if you need */
}
.stretch {
width:auto;
height:100%;
}
Working demo
Edit
You can make it centered by using CSS's background:
.stretch {
background-image: url("http://bockt.de/link/home.jpg");
background-repeat: no-repeat;
background-position: center 0px;
background-size: cover;
height: 100%;
position: relative;
background-origin: padding-box;
}
With a <div class="stretch"></div>.
Centered image demo