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;
}
Related
I have a <div> with a full screen background image for my slides. Due to a package I can't use background-attachment: fixed;. Without this property my image is distorted and in the slides. I can't use `background-attachment: fixed; here.
<div ref={parallaxDiv} className="image" />
.image {
position: relative;
width: 100%;
height: 100%;
background: url("https://placeimg.com/640/480/people") no-repeat center center;
background-size: cover;
}
Is there an alternative for background-attachment: fixed; for a background image set to cover?
does this work for you
.image {
background: url("https://placeimg.com/640/480/people");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
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.
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/
I want my background image like a Wallpaper. But I need some help to do it with css.
Here is my css:
#wallpaper{
position: absolute;
background-size: cover;
background-image: url(C:\Users\Pedro\Desktop\ASK2DOC landing_page\wallpaper.jpg);
background-repeat: no-repeat;
top: auto;
left: auto;
right: auto;
height: auto;
}
Try the following :
#wallpaper {
background: url(/*image_path*/) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
If it's doesn't work, click here.
If you want to cover the entire screen, you can simply do:
body {
background-size: cover;
background-image: url(/wallpaper.jpg);
background-repeat: no-repeat;
}
The image should be in a default directory for this website.