CSS-Background image not full screen (uikit) - html

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

Related

Responsive Background

I am trying to make a background image of the particles JS responsible. Thus I used this code:
#particles-js {
margin: 0;
padding: 0;
width:100% ;
height: 100%;
background-image: image-url("rub.jpg");
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
but when I resize my browser I get this result:
Which in my opinion is too small in height. I used the image background-size: cover because it is what is recommended to make the background image responsive but it does not fit well.
My question is if it depends on the original size of the image or I am doing something wrong? and if there is any specific way to make the background really responsive? In other words to make the image background fit the maximum height and width of the screen of the the different mobile devices?

See if this helps: http://codepen.io/panchroma/pen/ggMYBQ
The key detail is to apply the background image to an element that covers the full height of the screen, eg html
CSS
html{
background:url(https://images.unsplash.com/photo-1440804518589-c0bbe09a8103) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Background Image not following cover rule

My background image is scaling down as the window width decreases. I want the image to be full image regardless of the display. How would I implement that? The following code scales the image, then starts only show a section.
header {
position: relative;
width: 100%;
min-height: auto;
text-align: center;
color: #fff;
background-image: url(../img/header.jpg);
background-position: center !important;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}

If I'm reading your question right, simply set your header width to the width of the image.

If you are trying to full width background image for your header(Hero Header).
Try these code examples.
Demo Link

Fixed a background image with 100% scale to screen

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;
}

How do I get a background to stretch to the full width?

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

How do I stretch a background image to cover the entire HTML element?

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.