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;
}
Related
this is my first question on here so I'm sorry if I don't quite get the terminology.
I have a background image that is serving as a logo divider for the footer information, which I made 2,400px wide so it would display fully across multiple screen sizes. Only problem is that there is a large bottom scroll to the webpage and I would just like it to constrain to the window width, and show more as someone may adjust the webpage width to be larger, or less and it constrains down to be smaller. The closest I got to achieving this was when it was constrained to the width of the window, but it distorted the image.
This is the CSS I'm using currently, it may contain quite a bit of excess elements that are not helping me, I had scoured google for solutions but resorted to coming here.
footer {
overflow: hidden;
background: url(../img/aperture_labs_bot.png) no-repeat fixed;
background-image: url(../img/aperture_labs_bot.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left;
background-size: 2400px 68px;
background-size: cover;
background-position: 50% 50%;
}
Have you tried changing the background-size to contain?
footer {
background: url(../img/aperture_labs_bot.png) no-repeat fixed;
background-image: url(../img/aperture_labs_bot.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
I hope this helps...
Try this:
background: url(../img/aperture_labs_bot.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
This way it has the width of the entire screen, and scales when you make the screen smaller.
edit;
HTML:
<footer>
<div class="footer-test">
This text will be placed in the footer div. The div class footer-test will have a full-size background image no mather what width it has.
</div>
</footer>
CSS:
.footer-test {
background: url("http://www.cossumswimschools.co.uk/images/bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100px;
}
Let me know!
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;
}
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/