I have a webpage that have some large images inside some divs that cover the background of the page. I however get some strange issue with the page on viewing the page on Android pad where the page is viewed in portrait (looks ok on landscape viewing). The page get a blue (same color as background) on the right hand part of the screen next to the scrollbar (see images below). It might look to me like the page initially gets scaled wrong and then when you pinch zoom out you can see the blue are. Like the images did not get drawn all the way or something.
In the head of the page I have put the following tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
The I have defined some divs to place the images:
<div class="homebg_top">...</div>
I have 4 of those divs with different background inside of them.
Then in the following in the css (for the above specific div):
.homebg_top {
background: url(../images/bg_home_top.jpg) no-repeat center top;
width: 100%;
height: 807px;
margin: 0;
padding: 0;
}
The picture below is the page when in landscape mode:
The picture below is when it is in portrait mode
(note the blue background issue next to scrollbar):
Example :
https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
.homebg_top {
width: 100%;
height: 807px;
margin: 0;
padding: 0;
background: url(../images/bg_home_top.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
you can try thisone:
.homebg_top{
background: url(http://media02.hongkiat.com/oversized-background-image-design/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://media02.hongkiat.com/oversized-background-image-design/bg.jpg', sizingMethod='scale')";
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.http://media02.hongkiat.com/oversized-background-image-design/bg.jpg', sizingMethod='scale');
}
you can see this page http://www.hongkiat.com/blog/oversized-background-image-design/
Try this:
.homebg_top {
background: url(../images/bg_home_top.jpg) no-repeat center top /cover;
}
Related
I want my background image to become responsive inside a div. It has a parallax effect when scrolled. I already tried to customize the background in the media queries but no hope it only adjust the height and doesn't contain the whole page when in mobile devices width. Can someone give me a clue to solve this? Im new to html and css.
html code for div:
<div class="parallax"></div>
css code:
.parallax {
height: 502px;
background-image: url(../img/back2.png);
background-attachment: fixed;
background-position: -70px 80px;
background-repeat: no-repeat;
background-size: cover;
}
#media screen and (min-width: 270px) and (max-width: 320px){
.parallax {
max-height: 300px;
background-image: url(../img/back2.png);
background-attachment: fixed;
background-position: -70px 40px;
background-repeat: no-repeat;
background-size: cover;
}
}
You should use property: background-size:100% auto;
If the width property is set to 100%, the image will be responsive and scale up and down.
please see this link for more info: w3schools
I am making media query for mobile website and i am trying to set background to image:
body {
background: url("../images/back1.jpg") no-repeat center center fixed;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This doesn't work for mobile phones.As i understand i can not use fixed for mobile browsers.My question what other ways are there for making background image without stretching it too much or making it blurry.Thank you for your time
Try adding a child container for the body.
body {
position: relative;
min-height: 700px;
}
body div {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: url("https://placehold.it/480x720") no-repeat center center;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<body>
<div>
</div>
</body>
Note: This may be an inefficient way to get the result. Adding too many DOM elements will increase computations done by your browser.
It sounds like the core issue is that you don't have this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
This will enable "responsiveness" in mobile browsers.
I'm making a website and I have this code that blur out the background:
CSS
#background{
background: url(img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
min-height: calc(100% - 96px);
-o-transition: all 750ms;
-moz-transition: all 750ms;
-webkit-transition: all 750ms;
transition: all 750ms
}
.covered{
background: url(img/bgb.jpg) no-repeat center center fixed!important;
-webkit-background-size: cover!important;
-moz-background-size: cover!important;
-o-background-size: cover!important;
background-size: cover!important;
}
jQuery
$('.overlay,.ov').click(function(){
$('#background').addClass('covered');
}
HTML
<div id="background">
//content of my page
</div>
I tried:
-Using blur filter but the content blurs out too.
-Using a sprite but since my backgrounds needs to be centered it appears the top part normal, and the bottom part blurred.
My current code works great but the image has to load and when you click overlay/ov the background turns white until the new blurry background fully loaded. Any sugestions?
You may try forcing browser to download image by creating Image element, either in html or in javascript. Try adding
<img src="img/bgb.jpg" style="display:none">`
to html or
var bbg = new Image();
bbg.src = "img/bgb.jpg";
to javascript. It doesn't have to be shown anywhere to force resource download. In facts, even bare new Image().src = "img/bgb.jpg";, without any var, should be enough.
When you switch the background with css, blurred image will be already loaded into browser's cache and should show immediately.
The only way to do this is to hack together something like this:
<div class="wrapper">
<div class="background"></div>
<div class="content"></div>
</div>
Then adjust the positioning of the background:
.background {
position: fixed;
left: 0;
right: 0;
z-index: 1;
}
I would like to make a landing page with an full screen image. Like this: http://startbootstrap.com/templates/stylish-portfolio/
I can figure out the rest of the stuff below it, but how do I go about making the image cover the whole screen?
it is background for the header tag
if you go to line 153 to 163 in stylish_portfolio.css
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
background: url(../img/bg.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;}
the backgorund-size is the trick to keep it covering all the screen W3C
---edit
height and width should be 100% so the picture would fit the whole screen on any media.
You should take a big size image. then
you html will look like
<html>
<head>
<title>Landing Page</title>
</head>
<body>
<div class="landingbg"> </div>
</body>
</html>
then css will be
.landingbg{
background: url("img/bg.jpg") no-repeat scroll center center / cover rgba(0, 0, 0, 0);
display: block;
height: 100%;
position: relative;
width: 100%;
}
try this and tell me if there is any issue
You probably need a large HD image for background.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
For more detail: http://css-tricks.com/perfect-full-page-background-image/
Have JQuery function to get width and height of the end-user screen.
var jQueryWidth = $( window ).width();
var jQueryHeight = $( window ).height();
Once you have this, set your HTML image width and height attributes.
<img src="yourImage.jpg" alt="Alternate text" height="<jQueryWidth>" width="<jQueryHeight>">
I am trying to create a sort of parallax effect, I what the section after "ABOUT" containing two different div with image to scroll faster than the rest of the page. I want that whole div to scroll faster so that it looks like the first drawn picture is being wiped up but the similar picture.
Test site: http://www.onepixelroom.com/AQUODI/ (the section just after "ABOUT")
Example, scroll down (a lot, yes, it's annoying :) this site to see the footballer guys change color, I want to do this with both my images: http://www.tridentpp.com/
HTML:
<div id="quote-selector-div">
<div id="quote-images">
<div class="quote-selector-div-img"></div><div class="quote-selector-div-blue"></div>
</div>
</div>
CSS:
#quote-selector-div {
height: 800px;
position:relative;
overflow:hidden;
}
#quote-images {
height: 800px;
position:relative;
}
.quote-selector-div-img{
height: 400px;
background: url(../img/living-room-blue.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow:hidden;
position:relative;
}
.quote-selector-div-blue {
background: url(../img/living-room.jpg) no-repeat center center fixed;
height: 400px;
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
}
the page is using parallax.js, but it only works on background picture, I would like that same effect on a whole div, or a better solution.
You can use this jQuery plugin that might help you: https://github.com/davecranwell/jQuery-scroll-parallax
EDIT
Try this. You can use the setScrollSpeed() to assign specific scroll speeds to elements. The speed is the multiplier for the normal scroll speed.
var boostedElements = [];
function setScrollSpeed(element,speed){
boostedElements.push({element:element,lastpos:element.scrollTop,boost:speed});
element.onscroll = boostedScroll;
}
function boostedScroll(){
var boosted;
for(var i in boostedElements) if(boostedElements[i].element == this){
boosted = boostedElements[i];
break;
}
if(boosted == undefined) return;
var distance = boosted.element.scrollTop - boosted.lastpos;
boosted.element.scrollTop = boosted.lastpos + (distance * boosted.boost);
boosted.lastpos = boosted.element.scrollTop;
}