I have the following CSS script that I would like help with. When its on a PC it looks fine, but when its on a mobile device its stretched. Is there anything I can add to it to keep the aspect ratio please?
body {
font-family: 'Open Sans', sans-serif;
background:url(../images/bg.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%;
}
Thanks all
Rob
If you remove background-size: 100% 100% it should work for you.
Fiddle: http://codepen.io/anon/pen/wGVJRg
Its because of background-size: 100% 100%; in your code. change it to background-size: 100%. this may work.
If you are concerned about aspect ratio, it's always preferable to use img tag,
and the css for image tag would be
img.background-image-holder{
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-height: 100%;
max-width: 100%;
margin: auto;
}
here is an working link https://jsfiddle.net/t236ngep/
Related
I want to create a box that goes over the whole width of the screen, so always responsive the full screen width.
My current CSS code always limited the box to the Boddy, but I want the full width.
In addition, I want a background image in the box.
Can someone help me?
My CSS:
div.bg {
background-image: url("LINK TO PIC");
background-repeat: no-repeat;
background-size: cover;}
Use Viewport units: vw, vh, vmin, vmax
div.bg {
background-image: url("LINK TO PIC");
background-repeat: no-repeat;
background-size: cover;
width: 100vw;
height: 100vh;
}
read more
div.bg {
background-image: url("LINK TO PIC");
background-repeat: no-repeat;
background-size: cover;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: auto;
z-index: 9;}
The box works and scrolls always at the bottom.
Now I would like a small X in the right corner so that the user can close the box, best function to close and reopen
Is there something which prevents you from setting the div as position:fixed?
If not, it's quite simple:
div.bg
{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: auto;
background-image: url("LINK TO PIC");
background-repeat: no-repeat;
background-size: cover;
}
I'm trying to get a background image to work in all browsers. The following code works perfectly for every browser but Firefox:
<style>
body {
background: url('src/images/SpeqS.jpg') no-repeat center;
background-size: 50%;
height: 100%;
}
</style>
Does anyone have any idea?
Updated code try this
body {
background: url('src/images/SpeqS.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
}
body {
background: url('http://s32.postimg.org/pqht43fkl/Speq_S.jpg') no-repeat top center;
background-size: 50%;
height: 100%;
}
This is working fine in the jsfiddle. Hope it's the result you are looking for.
How would I go about ignoring to resize image when zooming in on the website just like on this website: http://antares.pcadviser.ro/
My website: http://vizz.tv/
I am using this right now but the image resizes when scrolling in:
#headerImage {
height: 750px;
width: 100%;
background: url(2.jpg) no-repeat;
background-repeat: no-repeat;
background-size: auto auto;
margin-top: -50px;
}
I would really appreciate if someone could help me solve this.
Try
#headerImage {
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;
}
From css tricks. There's a demo too
Alright, I managed to fix my issue by adding "background-size: cover;" which apparently auto fills the entire div with my image.
Here is the final code:
#headerImage {
height: 750px;
width: 100%;
background: url(2.jpg) no-repeat;
background-repeat: no-repeat;
background-size: cover;
margin-top: -50px;
}
Is min-height more appropriate?
Or for that matter, is it even appropriate for me to be setting all of my fullscreen backgrounds to both html and body? Can this be set to html alone?
html, body {
height: 100%;
background-image: url(blah.jpg);
background-size: cover;
background-position: center center;
}
everything is drawn on body, html is the main document, if you can give styles but is not highly recommended because body and html in question are the same.
min-height is used whenever a screen this size that does not want.
*{
margin: 0;
padding: 0;
}
body {
background-image: url(blah.jpg);
background-attachment: fixed;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
}
I have a very large image to use as a background image. Because the image is so large, I have divided it into three images that can be stacked one on top of the other.
I'm putting the images in as background images with the property "cover":
<div class="screen" id="header1"></div>
<div class="screen" id="header2"></div>
<div class="screen" id="header3"></div>
css:
#header1
{
background-color: #000;
width: 100%;
height: 100%;
max-width: 1920px;
max-height: 949px;
background: url('images/bg1_landscape2.png') no-repeat center center;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 0;
margin: 0;
}
#header2
{
background-color: #000;
width: 100%;
max-width: 1920px;
height: 100%;
max-height: 947px;
background: url('images/bg2_landscape2.png') no-repeat center center;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;padding: 0;
margin: 0;
}
#header3
{
background-color: #000;
width: 100%;
height: 100%;
max-width: 1920px;
background: url('images/bg3_landscape2.png') no-repeat center center;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 0;
margin: 0;
}
The problem is that the pattern in the background image doesn't line up.
How do I make multiple background images line up no matter how wide the screen is?
So... there's a few things going on here with this:
1st question : You haven't done anything to make the div's overlap in your CSS, so they are going to appear just one after the other in the document flow of the browser. For example, view this fiddle here:
div:first-child {
background: red;
}
div {
background: green;
width: 100%;
height: 100%;
}
div:last-child {
background: blue;
}
If you want them to all overlap perfectly, aka to be superimposed, then they need to be positioned absolutely on top of each other, like this:
div:first-child {
background: red;
}
div {
background: green;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
div:last-child {
background: blue;
}
The other question is why you would break a large background image into 3 smaller images. We refer to that as image slicing, which is really not optimal. It takes 3 http requests instead of one to retrieve that image, which is more overhead than just getting the smaller one quite often. Also, it's a background image, so it won't prevent the document from fully loading until the image has loaded, as an inline image would.
Hope this helps.