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;
}
Related
Got some trouble with my background-picture with uikit.
Would be nice if you have a quick solution for me.
body {
background-image: url("bg.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
Here an image of that failure
How look its image?
In your screenshot you already have background image on <body>
If you want set background on card, just use correct css selector
Update:
For filling background, set background-repeat: repeat;
Because you not give size to body, browser depended on size card, set size to body to appear background img full screen.
body {
padding : 0px ;
margin : 0px ;
width : 100hv ;
height : 100hv;
background-image: url("bg.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
Hope this helps.
You must set your height with
uk-height-viewport="offset-top: true"
This will set your height with 100vh if it does not have any element on top of it.
You can see example here:
https://codepen.io/e2a4/pen/wvJyqKx
I have this html code to create a background to my div:
<div id="secondBigDiv">test</div>
This is my css code :
#secondBigDiv{
background: url(../images/myposts/background.jpg)no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This code works perfectly as I want but the problem is:
I couldn't fit the height also, when i scroll down I find empty white spaces because my background image didn't fit the height, it fits the width.
Any help?
I would try putting each image property in its own line. background-repeat,background-attachment, etc
May not change anything but seems to work for me.
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;
}
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.
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/