So I have a background image that is a bit taller and wider than normal browsers.
I'd like to be able to have it so that it scrolls it proportionately to the size of the screen. Since it is longer than normal, i'd also like it to scroll down gradually as the user scrolls down the page until the user reaches the bottom.
To put it simply, I think
Let's assume the side height is 1000px, and my image is 1500, i'd like the top to start a the page and be sized so it fits the user's screen, however the bottom 500 i'd like to have scroll at half the speed so as the user scrolls down it slowly scrolls till it reaches the bottom.
I'll find a simpler website later, this conept is hard to put into words and google.
If anyone understands, please help!
I need to use css or something
2 Things you should make before posting.
Show some code / attempts
Inspect your sources.
As far as I could see on the website you have provided, they are using simple one image which is 400px x 400px and the other which is 53px x 54px and it repeats both ways (height and width).
This is the background image:
(source: geek.nz)
On the back of that PNG image is the following image:
It is a GIF image.
They use the following on their CSS, which you should have had a go on it!
#ground {
background-image: url(bg-green.gif);
background-repeat: repeat;
background-attachment: fixed;
}
#clouds {
background-image: url(clouds.png);
background-repeat: repeat;
background-attachment: fixed;
padding: 5em 0;
}
Is that what you are looking for?
Related
Is it possible to control the direction from which a picture is cropped using CSS?
I have a product shot that has it's subject on the left side of the image.
I need to be able to not crop the left size on browser resize.
Right now the I'm setting the picture as background image in order to have control over the scaling and cropping but directional cropping does not seem to be a thing.
Below is a link to codepen:
http://codepen.io/samratrocks/pen/LxGjjR
and below is the CSS code I'm using on the DIV.
.img-holder {
height: 300px;
background-repeat: no-repeat;
background-position: center center;
background-size: auto auto;
}
As you can see from the pen, when you decrease the size of the browser, the image gets cropped while maintaining the center. I want to crop the image, while maintaining the left side of the image.
Has anyone has this problem / solved this problem before?
You might be able to do something in javascript, but it sounds like a hacky solution to me. Instead, I'd recommend having two versions of the image, one cropped and one not, and using media queries or a css framework like bootstrap. This way, when the browser is resized to a certain dimension, your page will use the correct image automagically.
Turns out it's a rather stupid question.
I just changed the position to left and kept the size as auto and now the image only crops from right.
.img-holder {
background-position: left center;
background-size: auto auto;
I'm sure I poorly structered that question title, but this is what I'm trying to do:
Key: image = moving picture behind submit form
Problem 1: Get the background image to stay at that perfect size no matter the width of the page.
Get the entire frame of the moving image showing.
When the image is at the perfect width (http://gyazo.com/702e443a6b814b1abc26a801836f4d6f) it shows the entire image.
When the width is increased even more, the image starts to 'zoom in'. (Which I don't want.)
Problem 2: On mobile devices with much smaller screens, most of the image is cut off (and you can't scroll to see the rest).
Get the entire frame of the moving image showing.
Have the entire image centered and the user should be able to see the entire frame of the image.
This is what my code looks like for the image:
background-image: url("https://s-media-cache-ak0.pinimg.com/originals/a4/79/4c/a4794cbfe048505d9645339738a8ddc7.jpg");
height: 60%;
background-size: 100%;
background-repeat: no-repeat;
background-size: cover;
jsfiddle
You need to do the following:
#top{
background-image: url("https://s-media-cache-ak0.pinimg.com/originals/a4/79/4c/a4794cbfe048505d9645339738a8ddc7.jpg");
height: 60%;
background-position: center -150px;
background-repeat: no-repeat;
}
Because you were using the background-size: 100%; you're telling the browser to scale the image for you. By removing it and positioning the background you'll achieve what you want with the image never resizing.
Fiddle
Note: You'll need to make sure that your image is large enough that when the page is stretched really large that you won't see the background. It will be hard to do, given that screen resolutions are getting so large now.
#your_image_container_id {
width: 100%;
}
What you are trying to say is called "Responsive Web Design". In order to achieve RWD, you never use absolute units such as pixels, points... but rather use relative units such as %, em which scales according to size of the screen. but you have do some calculation though such as %, make sure all elements on same row do not have the total of with percentage of over 100%, or something like that and also have to compensate for paddings and margins.
Currently, I have a mockup website www.hush.technology
and on my windows (17 inch) computer the website background is full screen
but on my mac (13 inch ) the width of the picture is cut off on the right. I generally like to solve problems on my own but I can't figure it out.
my css looks like this
// CSS CODE
.bgimage {
background: url(image url);
background-size: cover;
width: auto;
height: 720px;
}
Would anyone know why this is happening. I would love an explanation.
From here
background-size:cover
Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
I assume the aspect ratio is off, and it is clipping part of the image.
I'll try to build on what both of these answers have said. But I'll tell you in short: there is no solution to what you're trying to achieve because it isn't possible. Here's why:
The first box from the left shows what you have as a full screen browser - your image background perfectly covers the screen as you want it to. Your screen is the same size as the background and the image ratio is kept.
The box in the middle shows what happens when you resize your browser (or view on your 13" mac, which I'm assuming is a lower resolution). The image gets cut off the left and right! But why? Because the image is doing what it's been told to: keep it's ratio and cover the entire screen. They both have to be met, and the background image doesn't care whether all of itself isn't visible - it just cares that the screen is being covered and the ratio is the same.
The final box (one on the right), is the implementation of user3739658's answer. You've told the image you want it to make itself entirely visible, and keep the ratio. The consequence: it can't cover the whole screen anymore.
Your background image can only be guaranteed to do two of the three at any given time.
Cover the screen
Keep the ratio
Show the entire image
Another panel I could show is the image being told to: cover the screen and show the entire image, which would result in the image being stretched one way or the other.
The Solution
The easiest thing to do is to remove your static height: 720px;, which means the div can now resize based on the width of the browser (to keep the ratio of the background image).
An alternative is to change your background's purpose - your image is mostly made up of three things:
The actual picture on the right
Some largish text on the top left
Lots of background colour
You can split the background up into just having a picture on the right, and text on the left, with your background now being just a colour. The advantage of this is that the image will always show at the right of the screen, and your text will always show (and is now no longer a picture). Both the text and picture will also never skew, since the property being resized is the background color's width: which doesn't matter since its just a colour fill.
Check this link;
Perfect Full Page Background Image
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;
}
good luck!
first of all keep in mind I uderstand a very little of HTML language...
if you answer, do it as if you'd do it to a 10yo boy...
The question:
I'd like to have a background image in my website and another one on it.
the bg's image can be freely resized to match the screen or mobile size,
but the second one should keep its aspect ratio....!
http://www.flickr.com/photos/110747328#N03/
![you'll see on the left the full screen size and on the right the mobile size][1]
I dont know if understand you correctly. Here's what I get:
You want your bg image to be dynamically resized according to the size of the screen, but not the "content".
You can get the first by using the "background-size: cover"'s CSS property for your background:
body {
background: url('path-to-your-image.jpg') no-repeat center center fixed;
background-size: cover;
}
After that, if you just create a div and put your content in it. You'll get what you want: for the background to be resized and the content to keep its proportions.
Here is a live example: http://jsfiddle.net/agarridob/8NtwE/
By the way, I strongly recommend that you take a look at http://www.bentobox.io, where you'll find lots of resources that will help you understand a bit of what this HTML & CSS is.
I've never dealt with a website like this before, but here's what I'm trying to accomplish...
I have one large image (1000px x 1000px) which I want to use for the background image. The content itself only takes up around 500px x 500px, and It needs to be on the same position all the time relative to the background image.
This is complicated to describe, so I'll make a picture:
This itself doesn't seem like it would be that hard, but what if the browser is larger than my 11" screen? If the browser is too big for the background image, I'd like a simple color to show.
The other problem I see is keeping it centered at all time with scroll bars not appearing as they should only appear if the browser window is smaller than the content box.
I'll be happy to clarify more, as I'm having trouble putting into words what I'm trying to accomplish.
use CSS:
HTML{ width:100%; height:100%;
background:#F00 url(path/to/your/image.jpg) center center no-repeat;
background-attachment: fixed;
background-size:100% auto;
}
background sums up background-color, background-image, background-position and background-repeat (in that order). The other two currently cannot be included in background (though the W3C spec says otherwise).
background-attachment:fixed is like position:fixed for layers and will assure that the image stays visible regardless of how the user scrolls. if you don't want that, wrap a container around your content and assign the above declaration to it instead of to the HTML-node
background-size scales the image into your background
play with the value a bit - what I proposed here will scale the image to fit to the width of the viewport. 100% 100% will stretch it to always cover the entire viewport and auto 100% will scale it to fit into the height of the viewport. In both cases that use auto some clipping might occur - or the background-color (I chose red) will show on the sides/top&bottom
giving the HTML-node width:100%;height:100% makes sure you don't have a white border on the bottom if your content does not fill the screen
Not clear what problems you are having. Here is an example of what you might want to do: http://jsfiddle.net/mhgdZ/