I'm looking to make my homepage a full screen centered background image, where it doesn't matter what screen size the device is, the image always covers the entire page and with the correct aspect ratio. I'd also like it to work across various devices.
I've seen various different ways to do this but i just don't seem to get the effect that i'm looking for. So i'm either doing things incorrectly or i just haven't found/thought about a solution that works.
Thanks
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;
}
Try the above code and switch html with any other element as required. So if you only want it on the body or something for example.
This was taken from this article on CSS Tricks -
CSS Tricks - Perfect Background Image
.bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
Like that, you can still use the html image tag.
.div {
background: url('images/bg.jpg');
background-size: cover;
background-position: center;
}
And for responsive layout if you are new to this i suggest using Bootstrap framework.
Related
I've configured a full screen background image with CSS like this:
html {
background: url(image url) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
overflow: hidden;
}
When I first open the site in a mobile browser it looks great. However, if I select a form input and the mobile keyboard pops open then the background image resizes to match the height of the view that's above the keyboard.
Is there any way to keep the height of the background image static when the mobile keyboard opens? CSS only solutions are preferred.
Here's one way to achieve this with CSS variables. First add this to your <head>:
<script>document.documentElement.style.setProperty('--original-viewport-height', window.innerHeight+"px")</script>
Now you can set the min-height of your background element to var(--original-viewport-height).
Here's an example of the code that I'm using:
body {
min-height: 100vh;
position: relative;
}
body::before {
content: "";
position: fixed;
background-image: url(img.png);
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
min-height: var(--original-viewport-height);
left: 0;
top: 0;
will-change: transform;
z-index: -1;
}
(As you can see, in my specific case the background is on the ::before rather than directly on the body to solve the jittery scrolling issue with fixed backgrounds in Android Chrome.)
How can I have an image always covering all the screen regardless of monitor sizes? I have an image which has a height of 1000px and a width of 1000px. I don't want the image to be repeated but I don't want the scrolling bar to appear as well. If I use % the image is repeated, because it's inside a div. Thank you
I want the bottom of the image to be always at the bottom of the browser page and the div/image to be always the same size, even if I zoom with the browser
div {
width: 1000px;
left:0%;
right:0%;
top: 0%;
height: 800px;
text-align:center;
position: absolute;
background-image: url("image.png");
background-position: 50% 50%;
margin:auto; }
Try this out
div {
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;}
If you still want to know more, do check out this link
https://www.w3schools.com/howto/howto_css_full_page.asp
well if you want set up a full image background that is also responsive, you can do the following:
div {
width: 100%; height: 100%; top: 0; left: 0;
background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
If you want to add this image as background image you can add the below css
div {
width: 100%;
height: 100%;
background: url(images/bg.jpg) no-repeat center top;
position: fixed;
z-index: 0;
}
Or if you want image to be show you can do the below things
<img src="images/bg.jpg" style="width: 100%;height :100%">
if (screen.width>=500){document.write(" body{zoom:78%;}");}
Here's the solution for my code, I needed to change the zoom.
Hey I think i'm doing something wrong because everyone says you can stretch an image using:
background-size: cover;
But when I use it, one or two sides are always getting cropped. I actually want a way to distort the image so it stretches to fit any screen responsively. Is that possible? Here is the exact code i've tried (i've tried a lot of variations of this):
.carnival {
background: url(../images/carnival.jpg) no-repeat 50% 50%;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
left: 0;
right: 0;
position: absolute;
}
html:
<div class="carnival"></div>
Also for some reason if I remove any of the below the background doesn't show up at all:
height: 100%;
left: 0;
right: 0;
Any help would be greatly appreciated. Can't believe how complicated setting a background image is for me.
Try background-size: 100% 100%; instead of cover.
cover will cause the background image to be scaled so that it fills the block dimensions,
cropping any excess width or height depending on the miss-match between the aspect ratio of
the background image and the block to which the image is applied.
body {
margin:0;
}
.carnival {
background: url(http://placekitten.com/700/1400) no-repeat;
background-size: 100% 100%;
height: 100%;
left: 0;
right: 0;
position: absolute;
}
<div class="carnival"></div>
I've tried changing the pixels to percentages and nothing seems to work. If I make it in 1920x1080 and then switch to a lower resolution the website looks all cluttered and weird.
Here's the CSS code:
body
{
margin: 0px;
padding: 0px;
background: url("images/Background.png")
}
#header
{
position: absolute;
top: -160;
left: 420;
right: 0;
}
.headerImage1
{
margin: 0px;
padding: 0px;
position: absolute;
width:100%;
height:100%;
background-repeat:no-repeat;
}
Here is what it looks like on a different resolution: (The correct way would be centered)
http://puu.sh/6RgHg.jpg
EDIT: HTML part:
<body>
<div id="header">
<div class="headerImage1">
<img src="images/Header.png">
</div>
I think it's cause your ratio gets off when you use:
width:100%;
height:100%;
Try this instead:
width: 100%;
height: auto;
That way the ration doesn't mess up, if you want the background to not mess up, try this:
background: url("images/Background.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
EDIT:
If you mean centering the image, absolute poitioning is the absolute size of the browser, the full screen. While relative is the current position of the brower.
I would use relative for cross-device purposes.
I have a webpage with a css style file.
When I try to scale the header2.png in the code below, the picture gets cropped instead.
Any idea Why?
#header {
background:url(images/bg.gif) repeat-x 0 0;
height: 70px;
position: absolute;
}
#logo a {
background:url(images/header2.png) no-repeat 0 0;
width: 800px;
height: 80px;
position: absolute;
top:0;
left:10;
}
You need to use the background-size CSS property in order to get the picture to scale. One option you can use is to get the image to cover the header proportionally, like this...
#logo a {
background: url(images/header2.png) no-repeat 0 0;
width: 800px;
height: 80px;
position: absolute;
top:0;
left:10;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Of course, you can experiment with this by changing "cover" to pixels or percentages. For more information on resizing the background in CSS... visit http://www.w3schools.com/cssref/css3_pr_background-size.asp
Why don't you re-size your header2.png image to the size at which you want.