I've created a page with cool background gif, but when I change page's height (just by changing browser's window size), scroll doesn't appear and doesn't work.
Here is how I did it:
html body {
margin: 0 !important;
padding: 0 !important;
}
.main {
background-image: url("assets/video/background.gif");
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
}
I know, that I need to change position on something else, but that way my background just disappears. So, how can I do that?
This is how page looks 'normal':
And this is what happens, when I am trying to change window size:
Related
I am building a react app, and I am writing responsive sass code to make my site look nice. I am trying to make my background image scale, and I am trying to use the background-size: contain; property to do so.
I'm running into a bug I can't fix though... When the background size is set to "cover", the image shows no problem. When I change that property to "contain", the image doesn't show anymore. The image is being loaded according to the console, and I can see it in the inspector as a style on the body where I have it attached. What gives? Why won't the image show? Here's the relevant css.
body {
min-height: 100vh;
height: auto;
width: 100vw;
max-width: 100vw;
position: absolute;
left: 0;
top: 0;
margin: 0 auto;
background: center / contain no-repeat url("../img/boulder.jpg");
}
I am unsure with that syntax you are using in the background property but this seems to accomplish the desired result: https://codesandbox.io/s/goofy-nobel-tmvno?file=/src/styles.css:67-138
background-position: contain;
background: no-repeat center url("../img/boulder.jpg");
I have a header image on a wordpress site I'm creating that needs to be the full width of any browser.
The code already existing on the parent theme is:
background: url("/test/wp-content/themes/Howtopassyourexams.com/Theme/images/page-header-bg.jpg");
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
position: relative;
box-shadow: 0 7px 10px -10px #000;
width: 100%;
z-index: 0;
height: 300px;
margin-bottom: 80px;
There is also a second style sheet on the theme thats used and inherits most of the styles from the parent stylesheet, where the image CSS on that stylesheet is:
background: url("/test/wp-content/themes/Howtopassyourexams.com/Theme/images/page-header-bg.jpg");
width: 100%;
height: 300px;
I'm not sure why the heading image has two css codes in two stylesheets, but thats the way the theme came, and I'm not a expert in this so that may be normal.
The image is sticking to the original size (1369x325px) even when the width is changed to 100% and therefore cutting some of it out on a smaller browser.
Any help where I'm going wrong would be great, site address: http://biobreak.co.uk/test/services/
Thanks.
The rule in the first stylesheet actually sets the size of the background image with the word cover.
The second rule's width: 100%; setting only sets the width of the surrounding element, not the background image itself (which remains unchanged cover).
So you have to add
background-size: 100%;
to that second rule.
Two way, the first one is to put the image in a relative div and then give the image the following
img {
position: absolute;
width: 100%;
}
or just use the vw unit
img {
width: 100vh;
}
if you're a background image just use background-size: 100%;
When user's device width is more than 480px I'll show him original GIF as a background of my site.
My HTML:
<img class="background" src="assets/img/960XAUTO.gif" alt="Pink Smoke Background">
My CSS:
.background {
display: block;
height: 100%;
margin: 0 auto;
}
When user's device width is less than 480px I increased my GIF's width to 200%, because without increasing the smoke looks very commpessed and skinny:
So, I do this in my CSS:
#media screen and (max-width: $breakpoint) {
.background {
position: absolute;
left: -50%;
max-width: 200%;
}
}
And here is a problem. As my GIF is increased in 2 times, I get horizontal scrollbar. Just look:
I really need to increase GIF, so that the smoke looks more widely. How can I remove empty place on the right side, which was created by GIF? Or maybe there is some other way to increase GIF's width? I tried to use overflow in the different ways. Also I tried to set body width 100% of device screen.
Add this to your CSS, referring to the element you need (it should be the entire html or body like in this example, if this is your entire site background, btw):
html, body {
overflow-x: hidden;
}
Add background-attachment:fixed; in your style
code exact :
.background {
display: block;
background-attachment:fixed;
height: 100%;
margin: 0 auto;
}
You should try using background center with optional scaling percentages.
The full edit is here https://plnkr.co/edit/wZZqiC3awyEzHLPpxYBI
.bg{
width: 100%;
height: 100%;
background: no-repeat center/80% url("http://m.gdz4you.com/sandra/assets/img/960XAUTO.gif");
background-size: cover;
}
and ofcourse just drop a div
<div class="bg"></div>
I am having issues making the sprite I have resize, when I resize browser window.
The remiander of the template is repnsive including the Nav Menu.
The sprite remains fixed and sticks out of the page when resizing.
How would I make it size like the rest of the template (removing the width scroll bars)
If you just remove the sprite everything displays correctly.
I have created a Fiddle but its not showing the when I click results.
I have uploaded the page to here:
Test Page
Thank you.
Perfect Solution I have Got U can Use
I have used This solution
And It works Fine on all browser except Android Browser
.playerSp
{
display: block;
background: url(blue_sprite.png) no-repeat;
}
.next-button
{
background-position: -83px -6px;
width: 41px;
height: 46px;
}
var abc=(screen.availHeight+screen.availWidth);
$( window ).resize(function() {
var aaa=($(document).height()+$(document).width());
scale=abc/aaa;
$('#playerContainer').css({ 'zoom': (1/scale), '-moz-transform': 'scale('+(1/scale)+')', '-moz-transform-origin': '0 0 ' });
});
</script>
So I was stuck with the same question and noticed the answer was not yet given here.
Here is the answer:
I've managed to make my sprite fully responsive. For this I didn't use any slicing (photoshop) or javascript. Also notice how the sprites are positioned absolute and yet still responsive according the background.
For a better understanding of this process, please see the following link: http://brianjohnsondesign.com/unlisted/demos/responsivesprite/
Also see my link in order to see how it looks on my website: http://demo.chilipress.com/epic3/
Should my link not work anymore, try the first link above.
See here the CSS and HTML
#sprite1_contact{
background-image: url('sprite_contact.png');
width: 35.2%;
height: 0;
padding-bottom: 7%;
background-position: 0 0;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 32.3%;
z-index: 2;}
#sprite2_contact {
background-image: url('sprite_contact.png');
width: 27.5%;
height: 0;
padding-bottom: 28%;
background-position: 0 27%;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 35.8%;
z-index: 1;}
HTML
<div id="sprite1_contact"></div>
<div id="sprite2_contact"></div>
your sprites have fixed height: 632px; & width: 1163px; if you want them to resize youshould add at least a min-width and a min-heigth properties
example, if you want your sprites resize to a minimum of 10 px lets say you would add those properties to your code
#sprite-main-v2 {
height: 632px;
width: 1163px;
min-height:10px; /*added this line*/
min-width:10px; /*and this line*/
background-image: url(../images/landing-page/landing-sprite-5.png);
background-repeat: no-repeat;
background-position: 0px -700px;
cursor: pointer;
}
you can also use media queries to change the image acording to screen width or height: example:
#media screen and (max-width: 980px) {
#sprite-main-v2 {
height: 100 px; /*new size*/
width: 100 px; /*new size, value just as example*/
background-image: url(../images/landing-page/landing-sprite-5-small.png);/*smaller image*/
}
}
Shrink your sprite to a smaller set size by adjusting its background-position and background-size css properties in a media query.
background-position: 0 -135px;
background-size: 170px 190px;
Those number are an example, you have to play with them to get it to line up with your sprite, which can be confusing as the image can disappear. Recommend adjusting them bit by bit in developer tools.
You can also use percentages to allow for a more responsive resizing, although this can get tricky too.
Note, background-size doesn't work on IE8 but neither do media queries....
my problem is specific to the background image. I have applied a background image to the body and centred it horizontally. For each page I will add a paragraph below the header and each one will be a different size causing scroll. The background image must flow behind the paragraph but I can't make the body tag to expand to include the paragraph, meaning the background image cuts off when you scroll down. I don't want to set a specific height because that will make the page scroll beyond the paragraph. I've tried just about every combination of position relative/absolute and height/min-height I can think of.
<html>
<body>
<div class="paragraph">
<p>text!</p>
</div
</html>
CSS
html {
background: url('/images/bg.png');
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
body {
margin: 0;
padding: 0 0 50px 0;
background-image: url('../images/fullheader.gif');
background-position: center 20px;
background-repeat: no-repeat;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
min-height: 100%;
}
.paragraph {
width: 640px;
padding: 10px 20px;
margin: 400px auto 0 auto;
min-height: 100%;
}
I can post a screen shot if that helps.
add css to body like this
body {
background:#fff url(background.jpg) repeat-y top center;
margin:0px;
padding:0px;
}
If vertical repeat is not an option and your bg image of course cannot be endless, I think the only way to not cut off the image after some scrolling is fixing it's position:
body {
background-attachment: fixed;
}
No, there might be another solution, but in most cases this won't look very well: Set the background-size, e.g.:
body {
background-size: contain;
}
If your target is keeping the background with height enough to cover the size of your paragraphs and with the restriction of not repeat and not distort the aspect radio there is a simple and clean solution
Locate the background in the body tag .
Set its size to auto for horizontal size and 100% for the height
The paragraph, as being contained by the body will push the body height and this will push your background height without distortion of the aspect ratio
body {
width:100%; <!-- or what ever.....-->
background:url("whatever.jpg") no-repeat;
background-size:auto 100%;
}
Here is a fiddle for you. i used a wikipedia image. Play with it modifying the amount of paragraphs, etc... Hope it helps