I have a div with a background image. When the user zooms-in the page from the browser (using Ctrl & + or Ctrl + scroll), I don't want to zoom in the image. The image should remain unchanged by the zoom. Is there any way to do this?
This is the styles of the div containing the background image:
.owl-slide{
background-image: url('...');
background-repeat: no-repeat;
background-position: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I know that the normal behaviour would be to zoom-in everything inside the page, even the image. But this is a client's request which needs to be solved, even if I don't agree with it.
set top and left value for the element and add a position:absolute. also set the width and height.
.owl-slide {
background-image: url('http://www.freepngimg.com/download/nature/1-2-nature-png-picture.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
top:0px;
left:0px;
width: 100%;
height: 100%;
}
<div class="owl-slide">Sample div</div>
maybe you can disable the viewport zoom
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
Cheers.
Related
I'm trying to create a page with a centered background image and using the position center center. But instead of appearing centered both vertically and horizontally the image appears to extend vertically beyond the top of the page. Where/why am I going wrong?
<!DOCTYPE html>
<html>
<style>
body
{
background-image:url('tumbleweed.jpg');
background-repeat:no-repeat;
background-position:center center;
background-color:#EAEAEA;
}
</style>
</html>
Would you see the screen like below picture?
body{
background-image:url(../IMG/BG/pizzaBackground.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
I think It's because you didn't declare 'height'.
Add 'height:100vh'style.
body{
height: 100vh; /* ADD STYLE ! */
background-image:url(../IMG/BG/pizzaBackground.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
The reason for setting to 100vh is because the target is body tag.
If it's a different tag, use a different value.
Then this will be
And add 'margin:0px' style to remove the scroll.
body{
margin: 0px; /* ADD STYLE ! */
height: 100vh;
background-image:url(../IMG/BG/pizzaBackground.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
Then you can see
Thanks!
You can use cover
background-image:url('tumbleweed.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
http://jsfiddle.net/ou10gmfd/
Try this:
background-position: 50% 50%;
Or maybe you should try a space before the first center (could be an issue).
Most likely this is because your image is to large use background-size: cover; to cover the whole background of the body
remove DOCTYPE html from your page and it will work fine.
or use background-attachment: fixed;. then you do not have to remove DOCTYPE html
Ok so what I mean is, I want my background image to stay and the content in the div to scroll as more content inside is added.
see I don't want this to scroll
http://codepen.io/anon/pen/gLCns/
see kind of like the content on the codepen where you scroll in each window but it doesn't flow all over just in that window
you can use background-attachment: fixed; property to fix the background image.
html {
width: 100%;
height: 100%;
background: url(http://lorempixel.com/400/400) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.content{
position: absolute;
background-color: rgba(255,255,255,0.7);
width:50%;
height:1020px;
left:20px;
top:20px;
}
Here is a Demo.
The background-attachment property is what controls if the background image scrolls or stays.
http://www.w3schools.com/cssref/pr_background-attachment.asp
So in the CodePen it has background-attachment:fixed; and the image stays put while the content above it scrolls.
Then you simply center the content container on the page, leaving off overflows, and as the content grows the page will scroll but the background is fixed.
OK, first your code is a mess. I recommend running your code through the w3 validator first.
You have two options to do what you want, either using the background fixed & cover that you already have answers for:
html {
width: 100%;
height: 100%;
background: url(image_URL) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
or using overflow on the div with the content.
#content {
width: 600px;
height: 500px;
overflow-y: scroll;
}
I'm trying to place a fullscreen background image combined with a repeating background image without the use of J-query. Is it possible?
This is the code I use to get my image fullscreen:
body {
background: url(../img/bg1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
But now I want this completely overlapped by a .png image background that needs to have a repeat function, for the simple reason that the .png contains lines which will rescale and look awful on certain screen sizes.
Any ideas?
Already tried:
Giving html a background and body a background, it will only display one of both.
Be aware that multiple backgrounds won't work on ie8 if needed:
http://caniuse.com/multibackgrounds
This answer will work on every browser:
You must give width and height to the elements.
You can see answer here: http://jsfiddle.net/Rc38f/
HTML Code:
<html>
<body>
<div id="wrapper"></div>
</body>
</html>
CSS Code:
html {
width: 100%;
height: 100%;
}
body {
background-image: url('http://www.colourbox.com/preview/4632391-637684-seamless-small-white-flowers-pattern-background.jpg');
background-repeat: repeat;
width: 100%;
height: 100%;
}
#wrapper {
background: url('http://i.telegraph.co.uk/multimedia/archive/02403/Jonstockshooting_2403237b.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
}
It is possible to include two background images on one tag.
How it Works
Multiple background images can be specified using either the
individual background properties or the background shorthand property.
This should be a Helpful resource to get you started.
css:
body {
background-image: url(http://www.wallcoo.com/paint/Chiplegal_vector_art/images/%5Bwallcoo.com%5D_vector_art_0seasons.jpg), url(http://nopgc.org/v2/images/body_bg.jpg);
background-position: top center, center;
background-repeat: no-repeat, repeat;
width: 100%;
height: 100%;
}
fiddle: Demo
I have a very large image. I want to use this image as the background of my website. I would also like for this image to stretch and fit different browser window sizes.
This is the solution I have come up with. (I put it on jFiddle to make it easier for you guys to read).
http://jsfiddle.net/sGyax/
.bg{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -5000;}
<body>
<div id="background">
<img src="background/001.JPG" class="bg"/>
</div>
</body>
Is there anyway for me to do this without using IMG tag in my HTML? It interferes with the rest of my layout.
This should work in IE9/10 and current Firefox, Opera and Chrome:
html{
background: url(background/001.JPG) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background/001.JPG', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background/001.JPG', sizingMethod='scale');
}
Make it a background image (see example below) instead of an image with a huge negative z-index, and consider using the CSS3 backgound-size property for covering the entire page.
background-image: url(background/001.JPG)
In my page have 2-3 sections that have 100% width and background. When I open it on full screen everything is ok but when the screen is smaller than 960px (width of content in this sections) background image is not the entire page. The right side whis is hidden in firtst moment haven't background - it's white. You can see what I mean here: http://micobg.net/10th/
Simply add the background-size:100% style to the element where you applied background-image. Works in Firefox, Safari, and Opera. For example:
<style>
.divWithBgImage {
width: 100%;
height: 600px;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-size: 100%; //propotional resize
/*
background-size: 100% 100%; //stretch resize
*/
}
</style>
<div class="divWithBgImage">
some contents
</div>
Regarding to this article, you should to use cover as well:
html {
background: url(PATH_TO_IMAGE) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Use background min-width:960px; instead of width:100%;
Cheers