Example: http://jsfiddle.net/SJUeK/
I want for a background image in example to be always its full height (dependent on width). I can't do it with pixels, because it needs to be responsive.
Is there a way to do that? Or need I to use img in html?
Thanks in advance.
Sure:
background-size: auto 100%;
Here's a demo.
Or if you actually meant "maintain its aspect ratio and scale to fit inside the container", then background-size: contain should do the trick.
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;
}
https://css-tricks.com/perfect-full-page-background-image/
Related
Do anyone has similar experience and has the solution?
I use below CSS to display an background image on a mobile, of course I do declare
I could not able to display the image according to screen's height and width, if I remove the "background-attachment: fixed", then image is resized according to the screen's height and width but image is center according to the length of web content instead of the screen.
Do anyone have better solution?
#home {
background: url('../images/hkfmpt_trans.png');
background-repeat:no-repeat;
background-position:center;
background-attachment: fixed;
background-size: contain;
}
try this
html {
background: url('../images/hkfmpt_trans.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I have to fix by HTML page's background for full width, but the height of the background is not as per my design. How can I fix it?
CSS Code:
html {
background: url(images/body_bg.jpg') no-repeat top left fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You're missing a ' in the url
background: url('images/body_bg.jpg') no-repeat top left fixed;
Demo
Use background-size like the one used below,
body {
background-image: url(image1.jpg) no-repeat;
background-size: 100%;
}
Some useful links :
Scale background image style
Stretch and Scale a CSS image Background - With CSS only
Right now when you go to this link:http://rawgallery.us/user/login
the background is cut off. It should look like this picture no matter the resolution of the browser window: http://rawgallery.us/CarlisleBackDropWallRoom.png
I am still learning CSS, so I used this code that was suppose to cover the background everywhere, which works :
html {
background: url("CarlisleBackDropWallRoom.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
my #page is setup like this:
#page {
margin-left: auto;
margin-right: auto;
min-height:960px;
min-width:960px;
max-height:1200px;
max-width:1200px;
}
Does the html tag override the page tag?
Can someone tell me how I can view the whole background image if the browser window is 500x700 or 1200x1500 for example?
Thanks!
You may prefer background-size:contain, which fits the background image into its container rather than attempting to cover both width and height of the container.
From the MDN docs:
["contain"] specifies that the background image should be scaled to be
as large as possible while ensuring both its dimensions are less than
or equal to the corresponding dimensions of the background positioning
area.
Here's the CSS:
html {
background: url("/sites/default/files/imgs/CarlisleBackDropWallRoom.png") no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
Here is a working example.
Please note the browser compatibility of background-size.
i want my background to scale in width but not in height.
i got following code now.
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;
with this code the backgroundimage scales the whole thing but i only want it to scale in width. Does someone have a solution?
greetings
Instead of cover, you can try something like this.
background-size: 100% $IMAGE_HEIGHT;
Where $IMAGE_HEIGHT is the height of the background you are working with.
JSFiddle
You can either try to use the background-size property and set/stretch the width, or if it works in your case, try the background-repeat property with value repeat-x:
{
background-size: 100% auto; # width and height, can be %, px or whatever.
}
{
background-repeat:repeat-x;
}
I have used twitter bootstrap to make a webpage.
I have inserted an image in background through CSS as following.
<div class="container-fluid">
<div class="row-fluid">
<section id="wrapper">
</section>
</div>
</div>
CSS is as follows:
section#wrapper{
max-width:700px;
background-image:url("img/crane.png");
min-height:525px;
}
When I resize browser size the image is not getting resized according to screen size.
I am not getting how to make it responsive.
So please can any one help me out to resolve this issue.
Thanks in advance.
Try this
section#wrapper{
background:url("img/crane.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can use CSS3 background-size with cover as a value and not 100% property for a full page responsive background image for your website
html {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
For more info
You should use the background-size property and set it to cover like in the following shorthand:
div.withBackground {
background: url('http://image.url/img.png') center center cover;
}
read more here
try this background-size:100%;
but not all browser works lower version of browser not recognize background-size