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>
Related
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.
I can't get my background image to repeat on the y-axis when it is viewed on a mobile device. currently when on desktop the page can't scroll and the background image fills the screen. but if you move to tablet or mobile you need to scroll and the image is not repeating. My current code isn't much:
body {
background-image: url("../assets/BG.png");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: repeat-y;
background-position: center center;
margin-top: 0;
position: absolute;
height: 100%;
width:100%;
margin: 0;
}
Any help would be great.
Gif of issue: https://imgur.com/a/jX19E
erase background-size: cover; from that rule - this will always fill the full body element, also the part that appears when scrolling. Add background-size: 100% auto; instead and change the position to background-position: left top to make sure the image covers the complete width, starting from the upper left edge.
(BTW, position: absolute; for the body element is rather strange)
Here's a snippet that demonstrates it with a placeholder image:
body {
background-image: url("http://lorempixel.com/600/100/food");
background-size: 100% auto;
background-repeat: repeat-y;
background-position: left top;
margin-top: 0;
position: absolute;
height: 100%;
width:100%;
margin: 0;
}
Been playing around with CSS and for some reason I can't get the image to cover the whole screen. I managed to dip the opacity but the image won't cover the screen.
<div class="backgroundImage">
<img src="Image/BackgroundImage.jpg">
</div>
.backgroundImage{
opacity: 0.4;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
However if I use the code below I can make it to cover the whole screen, but the opacity won't dip. So for some reason it is not working on a div.
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;
}
You can combine multiple background images and stack them above each other. But then there is no way to control their opacity.
.backgroundImage {
background-image: url('http://www.css3.info/wp-content/themes/new_css3/img/sheep.png'), url('http://lorempixel.com/300/400');
background-position: center bottom, left top;
-webkit-background-size: 80px 60px, cover;
-moz-background-size: 80px 60px, cover;
-o-background-size: 80px 60px, cover;
background-size: 80px 60px, cover;
background-repeat: repeat-x, no-repeat;
width: 100%;
height: 100vh;
}
In your case the img tag is not closed. It should look like this <img src="Image.jpg">.
Further you can not specify the dimensions of an img with background-size: you should use width: and height:.
You can use CSS pseudo elements of either :before or :after and set the background image + opacity to it. You can either set everything to height:100%, or just use height:100vh on the div directly in order to make it to cover the whole viewport height.
Jsfiddle Example
body {
margin: 0;
}
.container {
position: relative;
height: 100vh;
}
.container:before {
background: url("https://unsplash.it/500") center / cover;
content: '';
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
z-index: -1;
opacity: 0.5;
}
<div class="container">Yes!</div>
Here is a demo of it: https://jsfiddle.net/a1wvdpwc/17/
I think that's the effect you want?
Just give the background div a width and height of 100%, and give it a position of fixed. Then give it a Z-index of very low so it stays at the very back. You then need to also give the image a height and width of 100%, so that it fills up the viewport. (In the demo I used vh and vw; which mean viewport-width and viewport-height, as percentages. )
Also the demo is in scss, but the only difference is that the css Img placed inside the backgroundImage styles uses a descendant selector, so it targets all Img elements that are descents of div.backgroundImage. I've put what the compiled css would look like in this answer.
Also sorry for the lack of indentation. I typed it up on a phone. I'll update it with a neater version in a few hours.
The html is:
<div class="backgroundImage">
<img src="http://lorempixel.com/image_output/city-q-c-640-480-6.jpg" />
</div>
<div class="content">
Content here
</div>
The css is:
.backgroundImage {
Position:fixed;
Top: 0;
Bottom: 0;
Width: 100vh;
Height: 100vh;
Opacity: 0.25;
Z-index: -5000;
}
.backgroundImage img {
width:100vw;
height: 100vh;
}
.content {
padding: 30px;
}
Also I forgot to add, (to the best of my knowledge) this method is not too good for semantics, but it shouldn't be too bad if you use it.
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.
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.