I'm wondering how can I make a background image fixed on one side, so when the user makes the window smaller, the background image shrinks only from one side, and the other side stays clear. I got this idea because I got a background image and i need the right side of it to be always on screen. Thanks.
You can use the background properties to do this, most notably background-attachment: fixed; and background-position: right top; This will cause the image to "stick" to the top right of the screen.
Also, if in the future the image doesn't work, just replace it with any other placeholder image. This one was picked just to showcase the static nature of the spider's position.
body {
background-image:url("http://creepyhalloweenimages.com/free_halloween_photos/backgrounds/spider_orange_copyspace.jpg");
background-attachment: fixed;
background-position: right top;
background-size: cover;
}
Related
I came upon a problem while designing a jumbotron for a website.
It's outside the container. Created a background for it, set background-size to cover, worked great.
When I opened the front page on a wider screen, the jumbotron became larger and there were gaps since the background image was too wide.
I then tried background-size: 100% 100%, thinking the image would stretch. No changes. Thought I perhaps had a margin/padding issue. No changes again.
Is this a problem with the image or the jumbotron? I'm not sure how to solve this. No matter what image I pick, it behaves very differently on different devices.
Behaving differently on different devices is not a bug, it's a feature. Having said that, try this...
background-image: url(INSERT_URL_HERE);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
If you want the image to stretch to fit the full element (even if it means losing proportion), you need to set background-attachment to fixed and the background-size to 100%. Like:
.jumbotron {
background-image: url(image.url);
background-size: 100% 100%;
background-attachment: fixed;
}
Working example:
https://jsfiddle.net/4w9u7m1a/2/
The effect works fine, but the image is zoomed in on. Any clue as to why?
#hero{
background-image:url(../images/metalWorx_hero.jpg);
width:1020px;
min-height:398px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Well, background-sizing: cover; is the reason why your background image seems "zoomed" as it is making the background image so big that it fully fits over its container. What happens on your case (feeling like its being zoomed in) is that the aspect ratio of the background isnt the same as the aspect ratio of the container. Instead of stretching the background image, background-sizing: cover will oversize the background so much until it covers everything up, leaving no gaps, but the "zooming" might happen.
Here is an illustration of the reason, as I know how bad my english :D
So you can see, the background image will be resized that it fits for the height, but because of the aspect ratio, both of the sides will go out of the container.
Edit #2 - Added some more informations and help
Depending on the real aspect ratios and sizes there are different solutions to it. The "quick and dirty solution" is to use background-size but instead of setting it to "cover", we will set its width and height to 100%. Code:
#hero{
background-image:url(../images/metalWorx_hero.jpg);
width:1020px;
min-height:398px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%; /* Set width and height to 100% */
}
Its a very simple "fix", but its obvious what can happen when the aspect ratio gets distorted:
Real and only way to fix it ;)
If you really want to fix it, you should make sure that your container and background image have about the same aspect ratio and then going back to background-size: cover; (just as in your first post)
I hope this is simple but here is the code I'm doing and it works perfectly except for one thing, the scale isn't kept. It gets wide and then looks silly.
.div1 {
background-image: url("images/headerbgimage2.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center center;
}
The image scales when resized and on smaller sizes it looks normal but as it gets bigger (wider) it stretches and looks awkward. How can I make it so the image keeps its aspect and just "zooms" in on itself keeping the whole div covered and the image scaled.
An example of this working on a site is techhubdenver .com with their top div background image
Can this be done with CSS or will I need to get some Javascript coding going to do this.
I know how to make new images for responsive type pages but I was hoping to just use one image and have it work no matter the device. it only becomes a problem when the screen size is way off from the image size (too small or too wide).
if the image would just "shrink" but keep aspect ratio for smaller devices I think it would work and if the image would just "zoom in" staying on the center of the image when the screen size gets to large i think it would work good.
Keep aspect ratio and always fill the div (okay to zoom in) is my goal here.
You need background-size: cover;. That will scale your background such that it covers the element.
.div1 {
background-image: url("images/headerbgimage2.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
I already googled this for a while, but simply can't find the answer. So, my question is: how do sites like this
http://tasag.de/
work? There are several background images that are shown behind the content box when you scroll down. When you scroll up and down you see that they occupy the whole screen, but sometimes you can see two of them, one at the upper an one at the lower part of the screen, at the same time. How does this work? I simply can't figure it out.
Thanks a lot
If you look at the css of one of those backgrounds you find the key declaration:
background-attachment: fixed;
This means the background doesn't move, even when the user scrolls, allowing you can have different scrolling divs and the background will always look fixed
Here I prepared a sketchy fiddle: http://jsfiddle.net/3UpUb/
.container2 p{
background-image: url(http://tasag.de/wp-content/uploads/2014/01/img-3-blur.jpg);
background-repeat: repeat;
background-position: center top;
background-size: auto;
background-attachment: fixed;
}
You can use Parallax scrolling and put the speed to 0. Then the image stays fixed but will change when you scroll to next background image.
I used this Parallax plugin.
I have a template for a website, it's an image which i have set as a background image. Now what i need to do is place html over it. For example there an part of the whole template where some images are but eventually when they are clicked they need to do something. So i need to place some divs over the whole template containing the different parts.
I don't know what the right approach for this is. What i've done right now is set the background image like this:
#body{
width:1280px;
height:8000px;
background: url(something.jpg);
background-repeat: no-repeat;
background-position:center;
}
So it always centers the image if you were to resize the window it would stay centered. This works fine.
Now i need to add another div in the body (of course) which needs to stay on top of the image.
I've tried and searched on the internet alot but the div seems to have a position that can't move. so how i resize the window it keeps in the same place.
I hope it's a little clear what i'm trying to do, and keep in mind this is my first time doing something like this so any help is greatly appreciated.
Thanks in advance!
PS: i'm not trying to cover the whole page in the background, just the original size which is 1280 all the time, and if the window gets resized bigger than 1280 in width it needs to center the image.
(if you're trying to set an image as the body's background to cover the whole screen)
Instead of settings width's and height's on your body, you should just set the size of the background to cover
css-tricks.com/perfect-full-page-background-image
body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can do this so the image is always centered
.main{
width:600px;
margin:50px auto;
}
<div class="main">
<img src="path to img"/>
</div>