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
Related
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%; }
(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.
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;
Hi everyone My name is Chris and I'm having some trouble here. I cant seem to find my way around this so i thought I will just go and ask here. Screenshot 1 is part of the Wix website that i created as a template for this company. They liked the design and everything. So now i have to implement as much as i can as code in Magento ( as you probably figured its about a webshop in magento 1.9).
On screenshot 2 is what I could make thill now.What i want to do is when I set a width property to .lefty i want the image to move on the side as you can see on the wix website.
<div class="parallaxbox">
<div class="lefty"></div>
<div class="parallax"></div>
</div>
This is the code:
.parallax{
background-image:url("/skin/frontend/WideScreen/default/images/parallax1.png");
/* Set a specific height */
min-height:600px;
width: 90vw;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: contain;}
.lefty{
float: left;
width: 13vw;
height: 600px;
background-color: lightblue;}
.parallaxbox{
width: 100vw;}
Screenshot Wix
Screenshot Magento
Just an Update I kinda did it. It's working correctly i fixed it with this code:
.parallax{
/* The image used */
background-image: url("/skin/frontend/WideScreen/default/images/parallax1.png");
/* Set a specific height */
min-height:600px;
width: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: 100%;
background-repeat: no-repeat;
background-size: contain;}
.lefty{
float: left;
width: 32.8em;
height: 600px;
background-color: lightblue;}
.parallaxbox{
width: 143em;}
Now my other question is how can I set a default resolution on the picture so when i change screens the zoom on the people stays the same? :P
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