!my present design**i have designed a website like this.
**
it is working fine for my screen resolution. the bottom div is half way up on the background image and half way down from the background image. my problem is when i test this for higher resolution screen it is not looking the same. the image is moving down. this is my css
body
{
background: #ffffff url(../images/11.jpg) no-repeat center top 0%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 75%;
font-family: Arial;
}
the bottom div css
.banner {
width: 100%;
min-height: 300px;
height: 100%;
background-color: #ffffff;
}
how to set this same for all screen sizes.
You say the image is moving down, do you mean when you scroll the image moves but you want it static? If so you could add background-attachment:fixed; to the body's CSS.
That's because the proportion of the image doesn't let the image fit the whole screen.
set the
body {
...
width : 100%;
height : 100%;
}
Related
I am currently trying to use a subreddit theme and resize an image to be bigger/actual size of uploaded image.
Current code for the Logo is:
/* SUBEDDIT LOGO ADDON
----------------------*/
#header .pagename a {
width: 100px;
background: url(%%subredditlogo%%) left center/auto 50px
}
I am trying to scale image to be bigger with keeping aspect ratio.
Like I said this is on Reddit, so I can only interact with the subreddit stylesheet.
I have edited it some and played with it, I have gotten improvements, but not the full image to show.
Here is my current code:
/* SUBEDDIT LOGO ADDON
----------------------*/
#header .pagename a {
width: 300px;
background: url(%%subredditlogo%%) left center/auto 300px;
background-size:100% 200%;
background-repeat:no-repeat;
}
It has resized the width but I cant get the height to change. I have tired the:
left center/auto 300px;
but nothing, and also the
height: 100%;
height: auto;
Just looking to get it fixed now.
Try this:
background-image: url(%%subredditlogo%%);
background-position: left center;
background-size:cover;
background-repeat:no-repeat;
I believe you need to break out your "background" css into individual attributes in order for each attribute to work properly.
You could try this:
background: url(logopath) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
#header .pagename a img{
width:100%;
height:auto;
}
Try this for auto resize img.
I have been researching for a while to how to get my background image to work on different screen resolutions. After many failed attempts I noticed I can't even get a normal css background in. It's not the file, I have tried different formats.
Code for the different screen resolutions:
html {
background: url('background.jpg') no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
The code the normal background:
body {
background-image: url('Background.jpg');
}
That is strange. Did you check that the path to your image is correct? For example if the image is inside an "example" folder, the path should be "example/myImage.png".
As for a responsive background, I believe you are on the right track, although a simple background-size: 100%; would have been enough. Check this Jsfiddle https://jsfiddle.net/a0mvnj63/
Also try using an external image, like in my example, just in case.
Try to use your code like this background-image:url('../background.jpg'); with height: 100vh;
body {
padding: 0;
margin: 0;
height: 100vh;
background-image: url(http://static.tumblr.com/295a1562899724d920b2b65ba33ffb76/vouqyzj/f2Dna5qb8/tumblr_static_197ahk99f1z44ogskg4gw4c80.jpg);
background-size: 100% 100%;
background-position: center;
}
h1 {
text-align: center;
color: #fff;
}
<body>
<h1>Hello Universe</h1>
</body>
only background elements does not give height and width to any div or html.
try giving some height and width to your code. just like
html { background: url('background.jpg') no-repeat center center fixed; height:500px; width:500px; }
or just put some data on body so you get auto height width according to contain and get image in background.
I have applied set background-image on one of my <div> with the following properties below:
.mydiv-left {
background: url(path to image) no-repeat center center fixed;
height:auto; // also tried with 100%
background-size:auto // also tried with "100%" and "100% 100%" as well as "cover"
}
This result is no image display, but when I set the height to this image, it cuts off the image. As image is of high resolution and I want it to fit in the smaller area of my div without removing any part/information.
Keep in mind that background image is dynamic and keep on changing for other divs within the loop.
Try this
CSS
.mydiv-left {
background-image: url(path to image);
height:(in px);
width: (in px);
background-size: 100% 100%;
background-repeat: no repeat;
background-position: center center;
}
If you post the entire code it is easy to find solution.
<div> without content/ height will result in 0 height. I guess that's why you can't see your image.
Give your <div> a size, and background-size should do its work.
http://jsfiddle.net/LsdDE/
.d1, .d2 {
border: 1px solid grey;
width: 200px;
height: 200px;
background: url(https://www.google.com.tw/images/srpr/logo11w.png);
}
.d1 {
background-size: auto 200px;
}
.d2 {
background-size: 200px auto;
}
Simplest suggestion would be to give min-height to your div in pixels... DEMO , keeping your markup same, below is the CSS.
CSS
.mydiv-left {
background: url(http://www.wallng.com/images/2013/08/image-explosion-colors-background-beautiful-263613.jpg) no-repeat center center fixed;
color : #FFF;
min-height:200px; /*this is the key*/
height:auto;
background-size: 100% 100%;
background-repeat: no-repeat;
}
if you give height:auto;, it would scale the div to content height.
if you want to show the div anyway, min-height is a solution
Thanks all for helping me out, I was able to get it done with the following below code:
mydiv {
background: url(images/bg.jpg) no-repeat;
height: 150px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Main thing was last four lines that worked for me the way I wanted.
.mydiv-left {
background-image: url(path to image);
height:(in px);
width: (in px);
background-size: 100% 100%;
background-repeat: no repeat;
background-position: center center;
}
I want to create a perfect full background image that is static and that fills the viewport, no matter what the size of the screen(viewport) is.
So I use the following CSS:
body, html{
width: 100%;
height: 100%;
background: url('http://ns223506.ovh.net/rozne/d4857d4e0f68027e7af6b70d5488b7e6/wallpaper-751328.jpg') no-repeat center center fixed;
margin: 0;
padding: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Now the problem is...As far as I understand, when the viewport size exceeds the size of the image, the image will stretch and will pixelate...
How can I prevent the max size being passed?
Also, what is the best way to approach this screen size problem when you want to cater for retina display resolutions? Set a max-width on the body, html elements?
Thank You
You can use #media queries to decide till what resolution you want the image to cover the entire page, if the resolution gets bigger, either replace it with another image, or simply use center value for background position and a background color, if you are not looking to cover the image after certain resolution, this will prevent the image to get pixelat.. For example
Demo (Resize the fiddle window for desired effect)
html, body {
height: 100%;
width: 100%;
}
body {
background-image: url('https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-frc1/p480x480/1231_381212385330183_1145397211_n.jpg');
/* If it exceeds 699px width, you can also replace the image here... */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media all and (max-width: 699px) {
body {
background-color: #000;
background-image: url('https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-frc1/p480x480/1231_381212385330183_1145397211_n.jpg');
background-size: 200px 200px;
background-repeat: no-repeat;
background-position: center center;
}
}
Note: I've used #media all and (max-width: 699px) and background-size: 200px 200px here in this example
just for demonstration purposes, you can replace this with original
height/width of your image and the desired resolution for #media rule
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