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;
Related
I while ago while making a site, I didn't set a height for a div section and filled it with content. Then I set the background-image to an image, and the image/div stretches to wrap the content since there is no height. I have been trying to replicate it but every time I do the same thing, the background image disappears but the content is still there (white text, can't see unless selected). This happens when I set it like:
#main{
background-image: url("images/pizza-dark.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
clear: both;
}
I know there is a way to do this but I'm not quite sure. This is crucial to the site because I am using bootstrap columns and a set height won't give a good result on mobile. In the JSFiddle below, there is no set height and, as you can see, the background image doesnt show at all. Even if you set it to 100%, the content that folds down (coloumns from Bootstrap) wont show since the background image doesnt stretch that far.. I have tried height:auto too and that doesn't work either.
Here is a JS Fiddle:
https://jsfiddle.net/du53n862/
Thanks!
You forgot to add float property to main container. You can use vh units for the main container height, and it will fits to every screen size:
#main {
background-image: url("http://itspizzatime.ca/wp- content/uploads/2015/09/4791207-9790062099-Pizza1.jpg");
background-repeat: no-repeat;
background-size: cover;
float: left;
width: 100%;
height: 100vh;
}
Here is a fiddle: fiddle link
I'm not sure if this is the behavior you want, but if you add a height of 100% and a scrolling overflow to your main div, the image will just be a fixed full-cover image in the background. This seems to be working fine in this fiddle.
#main {
height: 100%;
overflow: scroll;
...
}
This issue can easily be solved with flexbox. If you can drop support of older browsers here is the simple solution https://jsfiddle.net/1p1k41ot/.
I just added few lines in #main
#main {
...
display: flex;
flex: 1 1;
height: 100%;
}
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'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 am trying to create an full width image above my nav bar, but I cant even get the image to show on screen. Here is my simple HTML:
<html>
<body>
<div class="wrapper" />
</body>
</html>
And the css:
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 100%;
}
I see the jpg made it to my browser and can click on it in my resources, so there is no problem with the path. The screen is still blank and showing nothing. Any help would be awesome.
This is because height:100% is functionally useless, and your div resultingly has no height.
If you give the div a fixed height, the image should appear as expected.
Alternatively if you want the background image to apply to the background of the page, you can apply it to the <html> element and avoid the whole wrapper, 100% debacle.
html {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
http://jsfiddle.net/dolours/JcxLm/2/ Give a specific height, Height 100% is meaningless
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 50px;
}
try this <div class="wrapper"></div>
It is possible that the image isn't showing because there is no content within the div and therefore it's size is 0. Try setting the width and height to a set size, something like 200px to test out this theory. Also I would change your code to:
<div class="wrapper"> </div>
you can use css for body tag, the css of body will be like this:
body{
background: url(../assets/bridge.jpg) center top no-repeat;
}
i think it will work for you, if you want just background image.