I want to have my background picture fill out the whole screen but I can't find a solution to fix my problem. Would be cool if someone could give me a solution for all mobile devices.
This is what my screen would look like now:
I tried many things. Here is my current code:
html {
background: url('/path/to/img') no-repeat center center fixed !important;
background-size: cover !important;
height: 100%;
}
Try :
html { background-image: ...
no-repeat;
background-size: cover;
width: 100%; }
Related
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;
So on my phone, this site looks like this:
However, on my PC with a similar size viewport, it looks like this:
Notice the background image difference.
I can't really understand why this is happening or how to fix it, but what I can do is ask on here and provide the CSS for the background image.
CSS:
.fw-bg--1 {
width: auto !important;
height: 100vh !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-attachment: fixed !important;
background-image: linear-gradient(180deg,rgba(0,0,0,.8),rgba(0,0,0,.8) 40%,rgba(0,0,0,.8)),url(https://media.discordapp.net/attachments/898930011359297629/925860960038694922/terrie-shum-edotown2.png);
}
Let me know if you need any more information to help me, just let me know! 🙂
By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally, try defining a background-position center to fix this, your code would be something like this :
.fw-bg--1 {
width: auto!important;
height: 100vh !important;
background-repeat: no-repeat!important;
background-size: cover!important;
background-position:center
background-attachment: fixed!important;
background-image: linear-gradient(180deg,rgba(0,0,0,.8),rgba(0,0,0,.8) 40%,rgba(0,0,0,.8)),url(https://media.discordapp.net/attachments/898930011359297629/925860960038694922/terrie-shum-edotown2.png);
}
I tried to make responsive sprites (backgroud Image) using CSS3. Like I have done this but nothing is shown in the div, I think there should be some contents (but I don't want to put any content) so that div get some height, then the background image will be shown.
HTML:
<div class="cbs-news-logo"/>
CSS:
.cbs-news-logo {
background-position: 0 27.272727%;
background-size: 122.439024%;
max-width: 100%;
background-image: url('logos.png');
}
I tried many links, but cannot find a good one.
If i understood you..
.cbs-news-logo{ // Responsive background
background: url('logos.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media screen and (max-width: NNN px) { // if you do not want to show any content until some properties ( note that now is max-with, but it can be other )
.cbs-news-logo{ (...)
}
.cbs-news-logo {
background-image:url('https://www.google.co.in/images/srpr/logo11w.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
min-height:125px; // if u want change hear
max-width:800px; // if u want change hear
}
<div class="cbs-news-logo"/>
Here is the simplest solution:
HTML:
<div class="cbs-news-logo"/>
CSS:
.cbs-news-logo {
background-position: 0 27.272727%;
background-size: 122.439024%;
max-width: 100%;
background-image: url('logos.png');
padding-bottom: 16%; // This will give height to the div and make the div responsive so the (background) image behaves as responsive image.
}
If you want to see the demo.
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
I am trying to recreate Minecraft's experience bar in HTML, so far I managed to get the background responsive but I can't get the "covering" bar working. When I make it min-height: 100% instead of 15px it is not shown at all.
.xpbar {
width: 0%;
height: 15px; /* works */
/* min-height: 100%; doesn't work */
background-image: url(http://i.imgur.com/4esnIWF.png);
background-repeat: no-repeat;
background-size: cover;
}
Here is what I have so far:
http://jsfiddle.net/zLwds/2/
Re-size the window to see the issue!
TL;DR How can I make the second image responsive too?
Try this:
background-size: 100% 100%;
Is that what you were trying to achieve?
jsFiddle here