CSS background is not covering whole viewport width while using media query #media (max-width: 62.5em)
I tried using background-size: cover, background-position: top left, background-repeat: no-repeat but still nothing works.
here's main CSS styles of that section.
max-width: 100vw;
min-height: 100vh;
background: url(../images/bg-hero-desktop.svg);
background-color: #ebfbff;
background-size: cover;
background-repeat: no-repeat;
padding-top: 20rem;
padding-left: 5rem;
This is a fairly common error that I experience at times while working on layout.
The problem is NOT with the background of the html component, but rather with the layout on your footer, and your footer-cta-box div. These elements are pushing the layout outside of the viewport which is what is making it appear as though the background for the html is not rendering correctly. If you use "Inspect" in your browser to temporarily take out those elements you will see that the html background renders correctly! You're doing things right!
I'm not sure exactly how you want the footer and footer-cta-box to be laid out on the page, or else I could help you to get them in the right place, but those are the culprits of the problem.
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background: url(https://www.nasa.gov/images/content/296150main_2-226.jpg) no-repeat center center fixed;
background-size: cover;
}
main {
color: white;
}
<main>Hello world</main>
try
background-size: contain;
or
background-size: 100%;
instead of
background-size: cover;
Related
(Beginner question)
Hello, I'm trying to create a site that has one long image as a background that you can scroll. Nothing fancy, just one image of 1920x3740 of which you can only see a viewport-sized section of. I added an image to clarify what I mean.
I've tried using multiple divs under each other of 1920x1080, and chopped the image up to fit correctly, which kind of worked, but they wouldn't stay 16x9 so the edges of each image didn't match up. Now what i've got is one big image but I can't scroll it.
HTML:
<div class="bgImageFull"></div>
CSS:
.bgImageFull{
background-image: url(../images/LandingPage/NEW_TAHIN_IMAGE_FULL.jpg);
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
This also goes before but I don't think it does anything for my issue:
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
html, body{
height: 100%;
font-family: 'functionPro';
}
.bgImageFull {
background-image: url(../images/LandingPage/NEW_TAHIN_IMAGE_FULL.jpg);
height: 3740px;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
Height: 100%; Could be what's messing this up for you.
It might be better to specify the actual height of your image in the image's class. 100% is just going to cover the available height of the parent element.
I'm building a website from CSS and HTML. I'm up to the point of adding a background image to my website. The trouble is, the image isn't showing up as the website's background.
My CSS code:
.bg {
background: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
height: 50%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: repeat-x;
background-size: cover;
}
<div class="bg"></div>
Just ask me if you need any more code from my website.
Edit: This is not a clone, I've tried every other solution that I've come across on here, and nothing works.
This works fine if you use fixed height:
In the below case I have used 100px;
.bg {
background: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
height: 100px;
/* Center and scale the image nicely */
background-position: center;
background-repeat: repeat-x;
background-size: cover;
}
<div class="bg">
</div>
But if you want it to be 100% of the screen you can always go with 100vh
.bg {
background: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
height: 100vh;
/* Center and scale the image nicely */
background-position: center;
background-repeat: repeat-x;
background-size: cover;
}
<div class="bg">
</div>
If you want to know more about vh visit this link
Hope this was helpful for you.
The background image for a page can be set like this:
body {
background-image: url("paper.gif");
}
so maybe you can change your code become :
.bg {
background-image: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
height: 100px;
/* Center and scale the image nicely */
background-position: center;
background-repeat: repeat-x;
background-size: cover;
}
If you want to add background image to whole HTML Page then use body tag.
body {
background-image: url("https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg");
}
and if you want to add background to specific class then use this
.bg {
background-image: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg');
}
in that adjust your height accordingly. if you want to add to full class then use
height:100% else adjust it with your own condition.
The image that the OP refers to is a resized version of the original. This solution uses the original image along with CSS that uses a height of 100vh (as recommended by #weBBer) and auto for the width. The background position remains with a center value. It seems needless to repeat the image so the CSS uses no-repeat. This works with Google Chrome (version 49).
.bg {
background-image: url(https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg);
width:auto;
height:100vh;
background-position: center;
background-repeat: no-repeat;
background-size:cover;
}
<div class="bg"></div>
The result is a centered image that fills the page due to background-size property being set to cover as well as the height property set to 100vh, i.e. 100% of the view port height; see more about this and other measurements here.
If you only wanted to fill the portion within the dimensions of the DIV then you could alter the CSS and replace background-size property with object-fit, as follows:
.bg {
background-image: url(https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg);
height:480px;
margin-left:auto;width:100%;margin-right:auto;
background-position: center;
background-repeat: no-repeat;
object-fit:cover;
}
<div class="bg"></div>
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 have a large background image that is fixed with text being displayed on top of it, however the bottom of the image is being clipped off. I want the image to be displayed completely and not be cropped off.
#content {
background-image: url(../images/bean.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-attachment: fixed;
height: 40em;
margin-top: 0;
padding: 0;}
Set background-size to be 100vw 100vh i.e background-size: 100vw 100vh;
#content {
background-image: url(http://lorempixel.com/1400/1400/sports/3/);
background-repeat: no-repeat;
background-size: 100vw 100vh;
background-attachment: fixed;
height: 40em;
margin-top: 0;
padding: 0;}
Checkout this DEMO: http://jsbin.com/buqaju/1/
To have the background always cover the whole container you can use:
background-size: cover;
Source: http://css-tricks.com/perfect-full-page-background-image/
Pay attention to browser support: http://caniuse.com/#search=background-size (hint: No IE8)
Also, I noticed it's not very performant on pages with a lot of transparencies and moving backgrounds, but other than that I use it quite a lot and it works well.
Increase the height?
height: 100em;
you have
background-size:100%;
use
background-size: 100% 100%;
.bg_care{
background-image: url(../img/care-area.jpg);
background-size: cover;
}
just use background-size as cover it wont cut off.
You could also modify your background as such:
background: url(xyz.jpg) no-repeat **center center** fixed;
where you change the center values as needed (left,right,bottom,top). Depending on the image it may be useful.
So I have an image (w:1638px h:2048px) and I set it as my background using the background-image function and then trying to give it width: 100%; and height: 100%; attributes. It stretches the image across the screen horizontally but then it makes me scroll down for the rest of it. I want no scrolling. Is there a way to crop/position a portrait orientated image to look proportional and fill the screen as a background properly? Should I make it a different size in Photoshop, something landscape orientated?
I have a regular <div class="bgimage></div> in the html and the css looks like this:
.bgimage {
height: 100%;
width: 100%;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
position: absolute;
}
Is there something I'm missing or not doing correctly? I'm using Dreamweaver CS6 and viewing it in the latest versions of Firefox/Safari.
Thank you.
If you're setting the background for the whole page, just style the body element instead:
body {
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
}
http://jsbin.com/rugom/2