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.
Related
I'm trying to make a landing page, and it needs to be 100% of viewport, example .
As you can see, picture is 100% of width and height.
I've succeed to make it 100% of width, but for height I haven't. Picture is bigger than my viewport.
This is my css code :
body {
background-color: #e3e3e3;
}
#main_wrapper {
width:100%;
height: 100%;
float:left;
background-image: url("http://imgur.com/B2y6wuI");
background-position: center top;
background-size: 100% auto;
}
#wrapper {
width:970px;
height:1000px;
margin:0 auto 0 auto;
}
#landing {
width:100%;
height:800px;
}
if you are working with html5/css3 you can use height:100vh (instead of %... vh = viewport height)... EDIT: depending on what browsers you want to support.. http://caniuse.com/viewport-units
with css3 you can
#main-wrapper{
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;
}
Could you clarify what you are trying to do here? If you are trying to have a full size background image that scales to the width and height of your viewport, then a lot of your CSS is unnecessary. There is certainly more than one way to skin a cat but in this case CSS3 allows us to use
background-size: cover;
http://jsfiddle.net/LtMpw/6/
How to make this image responsive
HTML:
<section id="first" class="story" data-speed="8" data-type="background">
<div class="smashinglogo" id="welcomeimg" data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="-2"></div>
</section>
CSS:
#first .smashinglogo {background: url(../images/logo1.png) 50% 100px no-repeat fixed;}
Use background-size property to the value of 100% auto to achieve what you are looking for.
For Instance,
#first .smashinglogo{
background-size:100% auto;
}
Hope this helps.
PS: As per your code above, you can remove fixed and add 100% auto to achieve the output.
Try adding background-size:cover
.smashinglogo {background: url(../images/logo1.png) 50% 100px no-repeat fixed;
background-size: cover;
height:600px
}
Check this tutorial for detailed article.
try this :
background-size:100% auto;
or
background-size: cover;
Instead of fixed Use
max-width:100%;
this will work.
Final Output
.smashinglogo {
background: url(../images/logo1.png) 50% 100px no-repeat;
max-width: 100%;
}
#first .smashinglogo{
background-image: url(../images/logo1.png);
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
}
try this, it might work for you.
Making a Responsive image there are many ways.
The Basic rule is use % value instead of pixel value. and second is use #media queries to target the mobile devices and tablets.
Also you can use CSS3 new technique to make the image responsive:
.img-element: {url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
you can read more about Responsive image by clicking on this link.
http://css-tricks.com/which-responsive-images-solution-should-you-use/
I'm just summarising with an answer that helped me along the same lines.
.smashinglogo {
max-width: 100%;
background-size:100% auto;
}
.smashinglogo {
max-width: 100%;
background-size:cover;
}
Both the codes above worked really well.
If you div background-image disappears when stacked on small devices (typically below 577px in width), then add "min-height:310px;" to your css.
I'm not a seasoned web developer and am quickly hacking up something for fun. I have a web page that has an 1024 x 768 background image (I know that's probably a bad idea) that I can correctly centre if the browser width increases. However, when the browser width decreases below 768px, I want the image to be "centered" along with the width rather than just tacking the top left corner so that the centre of the image is always in line with the other elements on the page.
What kind of CSS magic can pull this off?
Here's my CSS:
body
{
background: #000000; /*Black bg for extra space not covered by img*/
font-family: sans-serif;
margin: 0px;
}
.wrap
{
background: url(../images/background.jpg) no-repeat;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: auto;
/*Stretch body all the way to edges*/
/*width: 1024px; /*Min width for site*/
}
Thanks.
follow tutorials for responsive :
http://stephen.io/mediaqueries/
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
Take a look at this website
The CSS shown here in the "Awesome, Easy, Progressive CSS3 Way" is almost as the code you have. what you need to change to center the image horizontal and vertical is adding "center center" to the background settings:
.wrap{
background: url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: auto;
}
Have you tried :
background-size: 100% 100%;
along with all your other css. This will ensure that the background image that you are using will stretch to fit the screen size(height and width-wise)
How to make an image as background for web page, regardless of the screen size displaying this web page? I want to display it properly. How?
its very simple
use this css (replace image.jpg with your background image)
body{height:100%;
width:100%;
background-image:url(image.jpg);/*your background image*/
background-repeat:no-repeat;/*we want to have one single image not a repeated one*/
background-size:cover;/*this sets the image to fullscreen covering the whole screen*/
/*css hack for ie*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.image.jpg',sizingMethod='scale');
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg',sizingMethod='scale')";
}
um why not just set an image to the bottom layer and forgo all the annoyances
<img src='yourmom.png' style='position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1;'>
Via jQuery plugins ;)
http://srobbin.com/jquery-plugins/backstretch/
http://buildinternet.com/project/supersized/
Use this CSS to make full screen backgound in a web page.
body {
margin:0;
padding:0;
background:url("https://static.vecteezy.com/system/resources/previews/000/106/719/original/vector-abstract-blue-wave-background.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Use the following code in your CSS
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;
}
here's the link where i found it:
Make a div 100% wide and 100% high. Then set a background image.
A quick search for keywords background generator shows this CSS3 produced background pattern that's dynamically created.
By keeping the image small and repeatable, you won't have problems with it loading on mobile devices and the small image file-size takes care of memory concerns.
Here's the markup for the head section:
<style type="text/css">
body {
background-image:url('path/to/your/image/background.png');
width: 100%;
height: 100%;
}
</style>
If your going to use an image of something that should preserve aspect ratio, such as people or objects, then you don't want 100% for width and height since that will stretch the image out of proportion. Instead check out this quick tutorial that shows different methods for applying background images using CSS.
CSS
.bbg {
/* The image used */
background-image: url('...');
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
HTML
<!doctype html>
<html class="h-100">
.
.
.
<body class="bbg">
</body>
.
.
.
</html>
I have followed this tutorial: https://css-tricks.com/perfect-full-page-background-image/
Specifically, the first Demo was the one that helped me out a lot!
CSS
{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
this might help!
I found the reason why there is always a white boder of the background image, if I put the image in a 'div' element inside 'body'.
But the image can be full screen, if I put it as background image of 'body'.
Because the default 'margin' of 'body' is not zero.
After add this css, the background image can be full screen even I put it in 'div'.
body {
margin: 0px;
}
I'm trying to get a background image of a HTML element (body, div, etc.) to stretch its entire width and height.
Not having much luck. Is it even possible or do I have to do it some other way besides it being a background image?
My current css is:
body {
background-position: left top;
background-image: url(_images/home.jpg);
background-repeat: no-repeat;
}
Edit: I'm not keen on maintaining the CSS in Gabriel's suggestion so I'm changing the layout of the page instead. But that seems like the best answer so I'm marking it as such.
<style>
{ margin: 0; padding: 0; }
html {
background: url('images/yourimage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
Use the background-size property: http://www.w3.org/TR/css3-background/#the-background-size
In short you can try this....
<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >
Where I have used few css and js...
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>
And it is working fine for me.
Not sure that stretching a background image is possible. If you find that it's not possible, or not reliable in all of your target browsers, you could try using a stretched img tag with z-index set lower, and position set to absolute so that other content appears on top of it.
Let us know what you end up doing.
Edit: What I suggested is basically what's in gabriel's link. So try that :)
To expand on #PhiLho answer, you can center a very large image (or any size image) on a page with:
{
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center;
}
Or you could use a smaller image with a background color that matches the background of the image (if it is a solid color). This may or may not suit your purposes.
{
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center;
}
If you need to stretch your background image while resizing the screen and you don't need compatibility with older browser versions this will do the work:
body {
background-image: url('../images/image.jpg');
background-repeat: no-repeat;
background-size: cover;
}
If you have a large landscape image, this example here resizes the background in portrait mode, so that it displays on top, leaving blank on the bottom:
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
body {
background-image: url('myimage.jpg');
background-position-x: center;
background-position-y: bottom;
background-repeat: no-repeat;
background-attachment: scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media screen and (orientation:portrait) {
body {
background-position-y: top;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
}
The following code I use mostly for achieving the asked effect:
body {
background-image: url('../images/bg.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
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;
It works for me
.page-bg {
background: url("res://background");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
You cannot in pure CSS. Having an image covering the whole page behind all other components is probably your best bet (looks like that's the solution given above). Anyway, chances are it will look awful anyway. I would try either an image big enough to cover most screen resolutions (say up to 1600x1200, above it is scarcer), to limit the width of the page, or just to use an image that tile.
image{
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 0 3em 0 3em;
margin: -1.5em -0.5em -0.5em -1em;
width: absolute;
max-width: 100%;
Simply make a div to be the direct child of body (with the class name bg for example), encompassing all other elements in the body, and add this to the CSS file:
.bg {
background-image: url('_images/home.jpg');//Put your appropriate image URL here
background-size: 100% 100%; //You need to put 100% twice here to stretch width and height
}
Refer to this link: https://www.w3schools.com/css/css_rwd_images.asp
Scroll down to the part that says:
If the background-size property is set to "100% 100%", the background image will stretch to cover the entire content area
There it shows the 'img_flowers.jpg' stretching to the size of the screen or browser regardless of how you resize it.